@coderundebug/ui-web/ui-link-button.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as i}from"./ui-tools.js";export class UiLinkButton extends HTMLElement{static get formAssociated(){return!0}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiLinkButton.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiLinkButton.uiCssStyleSheet],this.i=this.attachInternals(),this.o=this.shadowRoot.querySelector("a")}get disabled(){return!1!==this.hasAttribute("disabled")}set disabled(i){if(!0===i)this.setAttribute("disabled",""),this.o.removeAttribute("href");else{this.removeAttribute("disabled");const i=this.getAttribute("href");this.o.setAttribute("href",i)}}get href(){return this.o.href}set href(i){i?(this.setAttribute("href",i),!1===this.hasAttribute("disabled")&&this.o.setAttribute("href",i)):(this.removeAttribute("href"),this.o.removeAttribute("href"))}attributeChangedCallback(i,n,o){this.o.setAttribute(i,o)}static get observedAttributes(){return["href","hreflang","download","ping","referrerpolicy","rel","target","type"]}formDisabledCallback(i){if(!0===i)this.o.removeAttribute("href");else{const i=this.getAttribute("href");this.o.setAttribute("href",i)}}}UiLinkButton.uiCss=':host{display:inline-flex;justify-content:center;max-width:100%;--ui-link-button-background:var(--ui-link-button-default-background, var(--ui-default-background, hsl(0 0% 90% / 1)));--ui-link-button-foreground:var(--ui-link-button-default-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-link-button-font-size:var(--ui-link-button-normal-font-size, var(--ui-font-size-normal, 16px));--ui-link-button-padding:var(--ui-link-button-normal-padding, 8px 16px);--ui-link-button-pill-padding:var(--ui-link-button-normal-pill-padding, 8px 12px);--ui-link-button-icon-padding:var(--ui-link-button-normal-icon-padding, 4px 0);--ui-link-button-icon-size:var(--ui-link-button-normal-icon-size, 16px);--ui-link-button-gap:var(--ui-link-button-normal-gap, 8px);--ui-link-button-border-radius:var(--ui-link-button-border-normal-radius, var(--ui-border-radius-normal, 4px));}a{position:relative;cursor:pointer;display:flex;gap:var(--ui-link-button-gap);align-self:center;align-items:center;font-family:inherit;font-size:var(--ui-link-button-font-size);font-weight:var(--ui-link-button-font-weight, var(--ui-font-weight-bold, 600));line-height:150%;text-shadow:inherit;text-overflow:inherit;user-select:none;-webkit-user-select:none;border-radius:var(--ui-link-button-border-radius);border-style:none;border-width:0;border-color:unset;box-shadow:var(--ui-link-button-box-shadow, none);min-width:0;min-height:24px;padding:var(--ui-link-button-padding);box-sizing:content-box;--ui-icon-primary-color:var(--ui-link-button-foreground);background:var(--ui-link-button-background);color:var(--ui-link-button-foreground);transition:filter var(--ui-animation-duration-default) ease-in-out;-webkit-tap-highlight-color:transparent;}a:link, a:visited, a:active{text-decoration:none;}a:hover{text-decoration:underline;}.body{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}:host([fill-width]) a{width:100%;justify-content:center;}:host([small]){--ui-link-button-font-size:var(--ui-link-button-small-font-size, var(--ui-font-size-small, 12px));--ui-link-button-padding:var(--ui-link-button-small-padding, 4px 8px);--ui-link-button-pill-padding:var(--ui-link-button-small-pill-padding, 4px 12px);--ui-link-button-icon-padding:var(--ui-link-button-small-icon-padding, 4px 0);--ui-link-button-icon-size:var(--ui-link-button-small-icon-size, 12px);--ui-link-button-border-radius:var(--ui-link-button-border-small-radius, var(--ui-border-radius-small, 3px));--ui-link-button-gap:var(--ui-link-button-small-gap, 4px);}:host([large]){--ui-link-button-font-size:var(--ui-link-button-large-font-size, var(--ui-font-size-large, 24px));--ui-link-button-padding:var(--ui-link-button-large-padding, 12px 24px);--ui-link-button-pill-padding:var(--ui-link-button-large-pill-padding, 12px 24px);--ui-link-button-icon-padding:var(--ui-link-button-large-icon-padding, 4px 0);--ui-link-button-icon-size:var(--ui-link-button-large-icon-size, 24px);--ui-link-button-border-radius:var(--ui-link-button-border-large-radius, var(--ui-border-radius-large, 6px));--ui-link-button-gap:var(--ui-link-button-large-gap, 12px);}:host([pill]) a{border-radius:10rem;padding:var(--ui-link-button-pill-padding);}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*){padding:var(--ui-link-button-icon-padding);height:var(--ui-link-button-icon-size);width:var(--ui-link-button-icon-size);}:host([selected]){--ui-link-button-background:var(--ui-link-button-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));--ui-link-button-foreground:var(--ui-link-button-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}:host([success]){--ui-link-button-background:var(--ui-link-button-success-background, var(--ui-success-background, hsl(104 50% 90% / 1)));--ui-link-button-foreground:var(--ui-link-button-success-foreground, var(--ui-success-foreground, hsl(104 50% 30% / 1)));}:host([warning]){--ui-link-button-background:var(--ui-link-button-warning-background, var(--ui-warning-background, hsl(45 50% 90% / 1)));--ui-link-button-foreground:var(--ui-link-button-warning-foreground, var(--ui-warning-foreground, hsl(45 50% 30% / 1)));}:host([danger]){--ui-link-button-background:var(--ui-link-button-danger-background, var(--ui-danger-background, hsl(0 50% 90% / 1)));--ui-link-button-foreground:var(--ui-link-button-danger-foreground, var(--ui-danger-foreground, hsl(0 50% 30% / 1)));}:host([info]){--ui-link-button-background:var(--ui-link-button-info-background, var(--ui-info-background, hsl(190 50% 90% / 1)));--ui-link-button-foreground:var(--ui-link-button-info-foreground, var(--ui-info-foreground, hsl(190 90% 30% / 1)));}:host([highlight]){--ui-link-button-background:var(--ui-link-button-highlight-background, var(--ui-highlight-background, hsl(302 50% 90% / 1)));--ui-link-button-foreground:var(--ui-link-button-highlight-foreground, var(--ui-highlight-foreground, hsl(302 50% 30% / 1)));}:host([invert]) a{background-color:var(--ui-link-button-foreground);color:var(--ui-link-button-background);--ui-icon-primary-color:var(--ui-link-button-background);}:host([outline]){& a{background-color:transparent;color:var(--ui-link-button-foreground);border-style:var(--ui-link-button-border-style, solid);border-width:var(--ui-link-button-border-width, var(--ui-border-width, 1px));border-color:var(--ui-link-button-border-color, var(--ui-link-button-foreground));}& a[href]:hover{background-color:var(--ui-link-button-foreground);color:var(--ui-link-button-background);--ui-icon-primary-color:var(--ui-link-button-background);}& a[href]:active, a[href]:focus-visible{background-color:var(--ui-link-button-foreground);color:var(--ui-link-button-background);--ui-icon-primary-color:var(--ui-link-button-background);}} :host([blank]){& a{background-color:transparent;color:var(--ui-link-button-foreground);transition:background-color var(--ui-animation-duration-default, 200ms) ease-in-out;}& a[href]:hover{background-color:var(--ui-link-button-background);color:var(--ui-link-button-foreground);--ui-icon-primary-color:var(--ui-link-button-foreground);}& a[href]:active, a[href]:focus-visible{background-color:var(--ui-link-button-background);color:var(--ui-link-button-foreground);}} :host([disabled]) a{cursor:not-allowed;filter:brightness(75%);}a:focus-visible{outline-offset:2px;outline-style:solid;outline-width:2px;outline-color:var(--ui-link-button-foreground);}:host(:not([blank]):not([outline]):not([disabled])) a:hover{filter:brightness(85%);}:host(:not([blank]):not([outline])) a:not([disabled]):active, a:not([disabled]):active{filter:brightness(65%);}::slotted(*:not(:defined)){display:none;}@media (forced-colors:active) or (prefers-contrast:more){a, :host([outline]) a{border-style:solid;border-width:2px;border-color:var(--ui-button-foreground);box-shadow:none;}a:focus-visible{outline-width:3px;}:host([invert]) button, :host([outline]) button:not([disabled]):hover{background-color:var(--ui-link-button-background);color:var(--ui-link-button-foreground);--ui-icon-primary-color:var(--ui-link-button-foreground);}}',UiLinkButton.uiHtml='<a><slot id="start-slot" name="start"></slot><div class="body"><slot></slot></div><slot id="end-slot" name="end"></slot></a>',i.createUi(UiLinkButton,"ui-link-button",import.meta.url);