@uplynk/lynk-design 1.18.1 → 1.19.0

package/cdn/chunks/chunk.R2OEAFFE.js

@@ -0,0 +1,62 @@
+import{a as k}from"./chunk.VQM4UD55.js";import{a as T}from"./chunk.ALHVMVDH.js";import{a as D}from"./chunk.PUWWJRB4.js";import{a as d}from"./chunk.KLRPP4NQ.js";import{a as p,c as h}from"./chunk.VDJQBFEB.js";import{a as c,c as u}from"./chunk.DCN42ZX4.js";import{a as v}from"./chunk.MEKW2OXH.js";import{a as m}from"./chunk.TETFNMKN.js";import{a as w}from"./chunk.YHSYTTFF.js";import{a as g}from"./chunk.7TAXE2HP.js";import{a as E}from"./chunk.YZSIY5HS.js";import{a as n,d as l,g as b}from"./chunk.ZAFKTMHG.js";import{a as y}from"./chunk.MXDME6T6.js";import{d as r}from"./chunk.PINNEFCM.js";import{e as o}from"./chunk.FI4IKBIW.js";var t=class extends b{constructor(){super(...arguments);this.hasSlotController=new w(this,"footer");this.localize=new v(this);this.open=!1;this.label="";this.noHeader=!1;this.noArrow=!1;this.clickToHide=!1;this.placement="right";this.disabled=!1;this.distance=10;this.skidding=0;this.block=!1;this.hoist=!1}connectedCallback(){super.connectedCallback(),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this)}firstUpdated(){this.panel.hidden=!this.open,this.open&&(this.addOpenListeners(),this.popup.active=!0)}disconnectedCallback(){super.disconnectedCallback(),this.removeOpenListeners(),this.hide()}focusOnTrigger(){let e=this.trigger.assignedElements({flatten:!0})[0];typeof(e==null?void 0:e.focus)=="function"&&e.focus()}handleKeyDown(e){this.open&&e.key==="Escape"&&(e.stopPropagation(),this.hide(),this.focusOnTrigger())}handleDocumentKeyDown(e){e.key==="Tab"&&setTimeout(()=>{var s,a,f;let i=((s=this.containingElement)==null?void 0:s.getRootNode())instanceof ShadowRoot?(f=(a=document.activeElement)==null?void 0:a.shadowRoot)==null?void 0:f.activeElement:document.activeElement;(!this.containingElement||(i==null?void 0:i.closest(this.containingElement.tagName.toLowerCase()))!==this.containingElement)&&this.hide()})}handleDocumentMouseDown(e){let i=e.composedPath();this.clickToHide&&this.containingElement&&!i.includes(this.containingElement)&&this.hide()}handleTriggerClick(){this.open?this.hide():this.show()}handleTriggerKeyDown(e){if(e.key==="Escape"&&this.open){e.stopPropagation(),this.focusOnTrigger(),this.hide();return}[" ","Enter"].includes(e.key)&&(e.target.tagName.toLowerCase()==="lynk-input"||e.preventDefault(),this.handleTriggerClick())}handleTriggerKeyUp(e){e.key===" "&&e.preventDefault()}handleTriggerSlotChange(){this.updateAccessibleTrigger()}updateAccessibleTrigger(){let i=this.trigger.assignedElements({flatten:!0}).find(a=>T(a).start),s;if(i){switch(i.tagName.toLowerCase()){case"lynk-button":case"lynk-icon-button":s=i.button;break;default:s=i}s.setAttribute("aria-haspopup","true"),s.setAttribute("aria-expanded",this.open?"true":"false")}}async show(){if(!this.open)return this.open=!0,await d(this,"ev-after-show")}async hide(){var i;if(!this.open)return;let{activeElement:e}=document;return e&&this.contains(e)&&((i=document.activeElement)==null||i.blur()),this.open=!1,await d(this,"ev-after-hide")}reposition(){this.popup.reposition()}addOpenListeners(){this.panel.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){this.panel&&this.panel.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}async handleOpenChange(){if(this.disabled){this.open=!1;return}if(this.updateAccessibleTrigger(),this.open){this.emit("ev-show"),this.addOpenListeners();let e=this.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await h(this),this.panel.hidden=!1,this.popup.active=!0;let{keyframes:i,options:s}=u(this,"popover.show",{dir:this.localize.dir()});await p(this.popup.popup,i,s),e&&(e.focus({preventScroll:!0}),e.setAttribute("autofocus","")),this.emit("ev-after-show")}else{this.emit("ev-hide"),this.removeOpenListeners(),await h(this);let{keyframes:e,options:i}=u(this,"popover.hide",{dir:this.localize.dir()});await p(this.popup.popup,e,i),this.panel.hidden=!0,this.popup.active=!1,this.emit("ev-after-hide")}}render(){return r`
+      <lynk-popup
+        part="base"
+        id="popover"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist?"fixed":"absolute"}
+        flip
+        shift
+        ?arrow=${!this.noArrow}
+        auto-size="vertical"
+        auto-size-padding="10"
+        class=${g({popover:!0,"popover--open":this.open,"popover--has-footer":this.hasSlotController.test("footer")})}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="popover__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <div
+          part="panel"
+          class="popover__panel"
+          role="popover"
+          aria-hidden=${this.open?"false":"true"}
+          aria-label=${m(this.noHeader?this.label:void 0)}
+          aria-labelledby=${m(this.noHeader?void 0:"title")}
+          tabindex="0"
+        >
+          ${this.noHeader?"":r`
+                <header part="header" class="popover__header">
+                  <h2 part="title" class="popover__title" id="title">
+                    <slot name="label"> ${this.label.length>0?this.label:"\uFEFF"} </slot>
+                  </h2>
+                  <lynk-icon-button
+                    part="close-button"
+                    exportparts="base:close-button__base"
+                    class="popover__close"
+                    name="x-lg"
+                    label=${this.localize.term("close")}
+                    library="system"
+                    @click="${()=>this.hide()}"
+                  ></lynk-icon-button>
+                </header>
+              `}
+
+          <slot part="body" class="popover__body"></slot>
+
+          ${this.hasSlotController.test("footer")?r`
+                <footer part="footer" class="popover__footer">
+                  <slot name="footer"></slot>
+                </footer>
+              `:""}
+        </div>
+      </lynk-popup>
+    `}};t.styles=[y,k],t.dependencies={"lynk-popup":D},o([l(".popover")],t.prototype,"popup",2),o([l(".popover__trigger")],t.prototype,"trigger",2),o([l(".popover__panel")],t.prototype,"panel",2),o([n({type:Boolean,reflect:!0})],t.prototype,"open",2),o([n({reflect:!0})],t.prototype,"label",2),o([n({attribute:"no-header",type:Boolean,reflect:!0})],t.prototype,"noHeader",2),o([n({attribute:"no-arrow",type:Boolean,reflect:!0})],t.prototype,"noArrow",2),o([n({attribute:"click-to-hide",type:Boolean,reflect:!0})],t.prototype,"clickToHide",2),o([n({reflect:!0})],t.prototype,"placement",2),o([n({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([n({attribute:!1})],t.prototype,"containingElement",2),o([n({type:Number})],t.prototype,"distance",2),o([n({type:Number})],t.prototype,"skidding",2),o([n({type:Boolean,reflect:!0})],t.prototype,"block",2),o([n({type:Boolean})],t.prototype,"hoist",2),o([E("open",{waitUntilFirstUpdate:!0})],t.prototype,"handleOpenChange",1);c("popover.show",{keyframes:[{opacity:0,scale:.9},{opacity:1,scale:1}],options:{duration:100,easing:"ease"}});c("popover.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.9}],options:{duration:100,easing:"ease"}});export{t as a};

package/cdn/chunks/chunk.R2ZEY3CJ.js

@@ -0,0 +1,580 @@
+import{a as o}from"./chunk.PINNEFCM.js";var n=o`
+  :host {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    cursor: pointer;
+    line-height: initial;
+
+    /* Workaround because Chrome doesn't like :host(:has()) below
+     * https://issues.chromium.org/issues/40062355
+     * Firefox doesn't like this nested rule, so both are needed */
+    &:has(lynk-badge) {
+      position: relative;
+    }
+
+    --gap: var(--lynk-spacing-x-small);
+  }
+
+  /* Apply relative positioning only when needed to position wa-badge
+   * This avoids creating a new stacking context for every button */
+  :host(:has(lynk-badge)) {
+    position: relative;
+  }
+
+  :host([block]) {
+    display: block;
+    width: auto;
+  }
+
+  :host([color='default']) {
+    --lynk-color-fill-loud: transparent;
+    --lynk-color-fill-normal: var(--lynk-color-neutral-100);
+    --lynk-color-fill-quiet: var(--lynk-color-neutral-100);
+    --lynk-color-border-loud: var(--lynk-color-neutral-400);
+    --lynk-color-border-normal: var(--lynk-color-neutral-400);
+    --lynk-color-border-quiet: var(--lynk-color-neutral-400);
+    --lynk-color-on-loud: var(--lynk-color-neutral-900);
+    --lynk-color-on-normal: var(--lynk-color-neutral-900);
+    --lynk-color-on-quiet: var(--lynk-color-neutral-900);
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+    border-style: solid;
+    border-width: var(--lynk-button-border-width);
+    font-family: var(--lynk-button-font-family);
+    font-weight: var(--lynk-font-weight-bold);
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: 0 1em;
+    transition:
+      var(--lynk-transition-x-fast) background-color,
+      var(--lynk-transition-x-fast) color,
+      var(--lynk-transition-x-fast) border,
+      var(--lynk-transition-x-fast) box-shadow;
+    cursor: inherit;
+    gap: var(--gap);
+
+    background-color: var(--lynk-color-fill-quiet);
+    border-color: var(--lynk-color-border-neutral);
+    color: var(--lynk-color-on-quiet);
+  }
+
+  /* Appearance modifiers */
+
+  :host([appearance~='outlined']) {
+    .button {
+      color: var(--lynk-color-on-quiet, var(--lynk-color-neutral-on-quiet));
+      background-color: transparent;
+      border-color: var(--lynk-color-border-normal, var(--lynk-color-neutral-border-normal));
+    }
+    @media (hover: hover) {
+      .button:not(.is-disabled):not(.is-thinking):hover {
+        /* On hover the button gains a fill-quiet background, so the label switches from on-quiet
+           (tuned for text on the page) to on-normal (tuned for text on a quiet fill) to keep
+           WCAG 4.5:1 contrast against the new background. See color-token audit, finding 2. */
+        color: var(--lynk-color-on-normal, var(--lynk-color-neutral-on-normal));
+        background-color: var(--lynk-color-fill-quiet, var(--lynk-color-neutral-fill-quiet));
+      }
+    }
+    .button:not(.is-disabled):not(.is-thinking):active {
+      color: var(--lynk-color-on-normal, var(--lynk-color-neutral-on-normal));
+      background-color: color-mix(
+        in oklab,
+        var(--lynk-color-fill-quiet, var(--lynk-color-neutral-fill-quiet)),
+        var(--lynk-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance~='plain']) {
+    .button {
+      color: var(--lynk-color-on-quiet, var(--lynk-color-neutral-on-quiet));
+      background-color: transparent;
+      border-color: transparent;
+    }
+
+    @media (hover: hover) {
+      .button:not(.is-disabled):not(.is-thinking):hover {
+        /* Same as outlined: the hover fill-quiet background means the label switches to on-normal
+           to hold WCAG 4.5:1 against it. */
+        color: var(--lynk-color-on-normal, var(--lynk-color-neutral-on-normal));
+        background-color: var(--lynk-color-fill-quiet, var(--lynk-color-neutral-fill-quiet));
+      }
+    }
+    .button:not(.is-disabled):not(.is-thinking):active {
+      color: var(--lynk-color-on-normal, var(--lynk-color-neutral-on-normal));
+      background-color: color-mix(
+        in oklab,
+        var(--lynk-color-fill-quiet, var(--lynk-color-neutral-fill-quiet)),
+        var(--lynk-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance~='filled']) {
+    .button {
+      color: var(--lynk-color-on-normal, var(--lynk-color-neutral-on-normal));
+      background-color: var(--lynk-color-fill-quiet, var(--lynk-color-neutral-fill-quiet));
+      border-color: transparent;
+    }
+    @media (hover: hover) {
+      .button:not(.is-disabled):not(.is-thinking):hover {
+        /* Step up a whole fill token (quiet -> normal) rather than only mixing, so the hover is a
+           clearly visible background change. The quiet fill is a near-white/near-black tint, where
+           a small color-mix barely moves — see color-token audit, finding 2. */
+        color: var(--lynk-color-on-normal, var(--lynk-color-neutral-on-normal));
+        background-color: var(--lynk-color-fill-normal, var(--lynk-color-neutral-fill-normal));
+      }
+    }
+    .button:not(.is-disabled):not(.is-thinking):active {
+      color: var(--lynk-color-on-normal, var(--lynk-color-neutral-on-normal));
+      background-color: color-mix(
+        in oklab,
+        var(--lynk-color-fill-normal, var(--lynk-color-neutral-fill-normal)),
+        var(--lynk-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance~='filled'][appearance~='outlined']) .button {
+    border-color: var(--lynk-color-border-normal, var(--lynk-color-neutral-border-normal));
+  }
+
+  :host([appearance~='loud']) {
+    .button {
+      color: var(--lynk-color-on-loud, var(--lynk-color-neutral-on-loud));
+      background-color: var(--lynk-color-fill-loud, var(--lynk-color-neutral-fill-loud));
+      border-color: transparent;
+    }
+    @media (hover: hover) {
+      .button:not(.is-disabled):not(.is-thinking):hover {
+        background-color: color-mix(
+          in oklab,
+          var(--lynk-color-fill-loud, var(--lynk-color-neutral-fill-loud)),
+          var(--lynk-color-mix-hover)
+        );
+      }
+    }
+    .button:not(.is-disabled):not(.is-thinking):active {
+      background-color: color-mix(
+        in oklab,
+        var(--lynk-color-fill-loud, var(--lynk-color-neutral-fill-loud)),
+        var(--lynk-color-mix-active)
+      );
+    }
+  }
+
+  :host([color='default']) {
+    .button {
+      color: var(--lynk-color-on-loud);
+      background-color: var(--lynk-color-neutral-0);
+      border-color: var(--lynk-color-border-normal);
+    }
+    @media (hover: hover) {
+      .button:not(.is-disabled):not(.is-thinking):hover {
+        color: var(--lynk-color-primary-900);
+        border-color: var(--lynk-color-primary);
+        background-color: color-mix(in oklab, var(--lynk-color-primary), var(--lynk-color-mix-loud-hover));
+      }
+    }
+    .button:not(.is-disabled):not(.is-thinking):active {
+      color: var(--lynk-color-primary-900);
+      border-color: var(--lynk-color-primary);
+      background-color: color-mix(in oklab, var(--lynk-color-primary), var(--lynk-color-mix-loud-active));
+    }
+  }
+
+  :host([appearance~='text']) {
+    .button {
+      color: var(--lynk-color-on-quiet);
+      background-color: transparent;
+      border-color: transparent;
+      font-family: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      min-height: auto !important;
+      padding: 0 !important;
+    }
+
+    @media (hover: hover) {
+      .button:not(.is-disabled):not(.is-thinking):hover {
+        color: color-mix(in oklab, var(--lynk-color-on-quiet), var(--lynk-color-mix-hover));
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+    .button:not(.is-disabled):not(.is-thinking):active {
+      color: color-mix(in oklab, var(--lynk-color-on-quiet), var(--lynk-color-mix-active));
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  .button::-moz-focus-inner {
+    border: 0;
+  }
+
+  .button:focus {
+    outline: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  .is-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* When disabled, prevent mouse events from bubbling up from children */
+  .is-disabled * {
+    pointer-events: none;
+  }
+
+  .button__prefix,
+  .button__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  .button__label {
+    display: inline-block;
+  }
+
+  .button__label::slotted(lynk-icon) {
+    vertical-align: -2px;
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  :host([size='tiny']) {
+    .button {
+      font-size: var(--lynk-button-font-size-small);
+      height: auto;
+      min-height: var(--lynk-button-height-tiny);
+      line-height: calc(var(--lynk-button-height-tiny) - var(--lynk-button-border-width) * 2);
+      border-radius: var(--lynk-button-border-radius-small);
+    }
+    .button .button__label::slotted(lynk-icon) {
+      font-size: var(--lynk-font-size-small);
+    }
+  }
+
+  :host([size='small']) {
+    .button {
+      font-size: var(--lynk-button-font-size-small);
+      min-height: var(--lynk-button-height-small);
+      height: auto;
+      line-height: calc(var(--lynk-button-height-small) - var(--lynk-button-border-width) * 2);
+      border-radius: var(--lynk-button-border-radius-small);
+    }
+    .button .button__label::slotted(lynk-icon) {
+      font-size: var(--lynk-font-size-medium);
+      vertical-align: -3px;
+    }
+  }
+
+  :host([size='medium']) {
+    .button {
+      font-size: var(--lynk-button-font-size-medium);
+      min-height: var(--lynk-button-height-medium);
+      height: auto;
+      line-height: calc(var(--lynk-button-height-medium) - var(--lynk-button-border-width) * 2);
+      border-radius: var(--lynk-button-border-radius-medium);
+    }
+    .button .button__label::slotted(lynk-icon) {
+      font-size: var(--lynk-font-size-base);
+      vertical-align: -3px;
+    }
+  }
+
+  :host([size='large']) {
+    .button {
+      font-size: var(--lynk-button-font-size-large);
+      min-height: var(--lynk-button-height-large);
+      height: auto;
+      line-height: calc(var(--lynk-button-height-large) - var(--lynk-button-border-width) * 2);
+      border-radius: var(--lynk-button-border-radius-large);
+    }
+    .button .button__label::slotted(lynk-icon) {
+      font-size: var(--lynk-font-size-large);
+      vertical-align: -4px;
+    }
+  }
+
+  /*
+   * Pill modifier
+   */
+
+  :host([pill]),
+  :host([circle]) {
+    .button {
+      border-radius: 3em;
+    }
+  }
+
+  /*
+   * Circle & Square modifiers for icon only buttons
+   */
+
+  :host([circle]),
+  :host([square]) {
+    .button {
+      padding-left: 0;
+      padding-right: 0;
+    }
+    .button__prefix,
+    .button__suffix,
+    .button__caret {
+      display: none;
+    }
+  }
+
+  :host([circle][size='tiny']),
+  :host([square][size='tiny']) {
+    .button {
+      width: var(--lynk-button-height-tiny);
+    }
+  }
+
+  :host([circle][size='small']),
+  :host([square][size='small']) {
+    .button {
+      width: var(--lynk-button-height-small);
+    }
+  }
+
+  :host([circle][size='medium']),
+  :host([square][size='medium']) {
+    .button {
+      width: var(--lynk-button-height-medium);
+    }
+  }
+
+  :host([circle][size='large']),
+  :host([square][size='large']) {
+    .button {
+      width: var(--lynk-button-height-large);
+    }
+  }
+
+  /*
+   * Caret modifier
+   */
+
+  .has-caret .button__suffix {
+    display: none;
+  }
+
+  .has-caret .button__caret {
+    height: auto;
+  }
+
+  .has-caret:not(.has-label) {
+    gap: 0;
+  }
+
+  /*
+   * thinking modifier
+   */
+
+  .is-thinking {
+    position: relative;
+    cursor: wait;
+  }
+
+  .is-thinking .button__prefix,
+  .is-thinking .button__label,
+  .is-thinking .button__suffix,
+  .is-thinking .button__caret {
+    visibility: hidden;
+  }
+
+  .is-thinking lynk-spinner {
+    --indicator-color: currentColor;
+    position: absolute;
+    font-size: 1em;
+    height: 1em;
+    width: 1em;
+    top: calc(50% - 0.5em);
+    left: calc(50% - 0.5em);
+  }
+
+  /*
+   * Badges
+   */
+
+  .button ::slotted(lynk-badge) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translateY(-50%) translateX(50%);
+    pointer-events: none;
+  }
+
+  .button.rtl ::slotted(lynk-badge) {
+    right: auto;
+    left: 0;
+    transform: translateY(-50%) translateX(-50%);
+  }
+
+  /*
+    * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
+    * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
+    * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
+    * buttons and we style them here instead.
+    */
+
+  :host([color='default'][data-lynk-button-group__button--radio]) {
+    .button {
+      color: var(--lynk-color-neutral-900);
+    }
+    .button:not(.is-disabled):not(.is-thinking):hover,
+    .button:not(.is-disabled):not(.is-thinking).is-checked {
+      color: var(--lynk-color-primary-950);
+      border-color: var(--lynk-color-primary);
+      background-color: color-mix(in oklab, var(--lynk-color-primary), var(--lynk-color-mix-loud-hover));
+    }
+  }
+
+  :host([appearance~='plain'][data-lynk-button-group__button--radio]) {
+    .button {
+      color: var(--lynk-color-neutral-900);
+      border-color: transparent;
+    }
+
+    .button:not(.is-disabled):not(.is-thinking):hover,
+    .button:not(.is-disabled):not(.is-thinking).is-checked {
+      color: var(--lynk-color-on-normal);
+      background-color: var(--lynk-color-fill-quiet);
+    }
+
+    button:not(.is-disabled):not(.is-thinking).is-checked {
+      border-color: var(--lynk-color-border-normal);
+    }
+  }
+
+  :host([appearance~='outlined'][data-lynk-button-group__button--radio]) {
+    .button {
+      color: var(--lynk-color-neutral-900);
+      border-color: var(--lynk-color-neutral-400);
+    }
+    .button:not(.is-disabled):not(.is-thinking):hover,
+    .button:not(.is-disabled):not(.is-thinking).is-checked {
+      color: var(--lynk-color-on-normal);
+      border-color: var(--lynk-color-border-normal);
+      background-color: var(--lynk-color-fill-quiet);
+    }
+  }
+
+  :host([appearance~='filled'][data-lynk-button-group__button--radio]) {
+    .button {
+      color: var(--lynk-color-neutral-900);
+      background-color: var(--lynk-color-neutral-100);
+    }
+    .button:not(.is-disabled):not(.is-thinking):hover,
+    .button:not(.is-disabled):not(.is-thinking).is-checked {
+      color: var(--lynk-color-on-normal);
+      border-color: var(--lynk-color-border-normal);
+      background-color: var(--lynk-color-fill-quiet);
+    }
+  }
+
+  :host([appearance~='filled'][color='neutral'][data-lynk-button-group__button--radio]) {
+    .button:not(.is-disabled):not(.is-thinking):hover,
+    .button:not(.is-disabled):not(.is-thinking).is-checked {
+      color: var(--lynk-color-on-normal);
+      border-color: var(--lynk-color-border-loud);
+      background-color: var(--lynk-color-fill-normal);
+    }
+  }
+
+  :host([appearance~='filled'][appearance~='outlined'][color='neutral'][data-lynk-button-group__button--radio]) {
+    .button {
+      color: var(--lynk-color-neutral-900);
+      border-color: var(--lynk-color-neutral-400);
+    }
+
+    .button:not(.is-disabled):not(.is-thinking):hover,
+    .button:not(.is-disabled):not(.is-thinking).is-checked {
+      color: var(--lynk-color-on-normal);
+      border-color: var(--lynk-color-border-loud);
+      background-color: var(--lynk-color-fill-normal);
+    }
+  }
+
+  :host([appearance~='loud'][data-lynk-button-group__button--radio]) {
+    .button {
+      color: var(--lynk-color-neutral-900);
+      background-color: var(--lynk-color-neutral-100);
+    }
+    .button:not(.is-disabled):not(.is-thinking):hover,
+    .button:not(.is-disabled):not(.is-thinking).is-checked {
+      color: var(--lynk-color-on-loud);
+      background-color: var(--lynk-color-fill-loud);
+    }
+  }
+
+  :host([data-lynk-button-group__button--first]:not([data-lynk-button-group__button--last])) .button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([data-lynk-button-group__button--inner]) .button {
+    border-radius: 0;
+  }
+
+  :host([data-lynk-button-group__button--last]:not([data-lynk-button-group__button--first])) .button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  /* All except the first */
+  :host([data-lynk-button-group__button]:not([data-lynk-button-group__button--first])) {
+    margin-inline-start: calc(-1 * var(--lynk-input-border-width));
+  }
+
+  /* Add a visual separator between solid buttons */
+  :host(
+      [data-lynk-button-group__button]:not(
+          [data-lynk-button-group__button--first],
+          [data-lynk-button-group__button--radio],
+          [color='default']
+        ):not(:hover)
+    )
+    .button:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    bottom: 0;
+    border-left: solid 1px rgb(128 128 128 / 33%);
+    mix-blend-mode: multiply;
+  }
+
+  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
+  :host([data-lynk-button-group__button--hover]),
+  :host([data-lynk-button-group__button]) .button:hover {
+    z-index: 1;
+  }
+
+  /* Focus and checked are always on top */
+  :host([data-lynk-button-group__button--focus]),
+  :host([data-lynk-button-group__button][checked]) {
+    z-index: 2;
+  }
+`;export{n as a};

package/cdn/chunks/chunk.R4SMAQAM.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.JPJAPUBG.js";var n=e;e.define("lynk-include");export{n as a};

package/cdn/chunks/chunk.R5IE4E2U.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.OQ4PJZZG.js";import*as t from"react";import{createComponent as n}from"@lit/react";import"@lit/react";var s="lynk-dialog";e.define("lynk-dialog");var o=n({tagName:s,elementClass:e,react:t,events:{EvShow:"ev-show",EvAfterShow:"ev-after-show",EvHide:"ev-hide",EvAfterHide:"ev-after-hide",EvInitialFocus:"ev-initial-focus",EvRequestClose:"ev-request-close"},displayName:"LynkDialog"}),i=o;export{i as a};

package/cdn/chunks/chunk.R6RV2DMG.js

@@ -0,0 +1,19 @@
+import{a as m}from"./chunk.NMQVDZV5.js";import{a as h}from"./chunk.Z7THXULG.js";import{b as f}from"./chunk.UBVFZZFQ.js";import{a as p}from"./chunk.YHSYTTFF.js";import{a as r}from"./chunk.7TAXE2HP.js";import{a as d}from"./chunk.YZSIY5HS.js";import{a as o,b as i,d as a,g as n}from"./chunk.ZAFKTMHG.js";import{e as s}from"./chunk.FI4IKBIW.js";var t=class extends n{constructor(){super(...arguments);this.hasSlotController=new p(this,"[default]","prefix","suffix","label");this.isFirstItem=!1;this.disabled=!1;this.label=""}handleDisableOptions(){let{disabled:l}=this;this.defaultSlot.assignedElements().filter(e=>e.tagName.toLowerCase()==="lynk-option").forEach(e=>{e.disabled=l})}handleDisabledChange(){this.handleDisableOptions()}connectedCallback(){super.connectedCallback(),this.updateFirstItemState()}updateFirstItemState(){if(this.parentElement){let l=[...this.parentElement.children].filter(e=>e.tagName.toLowerCase()!=="slot");this.isFirstItem=l[0]===this}}render(){let{disabled:l}=this,e=this.hasSlotController.test("label"),c=this.label?!0:!!e;return f`
+      <div
+        class=${r({optgroup:!0,"optgroup--has-label":c,"optgroup--has-prefix":this.hasSlotController.test("prefix"),"optgroup--has-suffix":this.hasSlotController.test("suffix"),"optgroup--is-disabled":this.disabled})}
+        role="${l?"presentation":"group"}"
+        part="base"
+      >
+        <lynk-divider class="optgroup__divider" part="divider" ?hidden=${this.isFirstItem}></lynk-divider>
+        <div class="optgroup__label-container" part="label-container">
+          <slot name="prefix" part="prefix" class="optgroup__prefix"></slot>
+          <slot name="label" part="label" class="optgroup__label">
+            <span class="optgroup__label-content"> ${this.label} </span>
+          </slot>
+          <slot name="suffix" part="suffix" class="optgroup__suffix"></slot>
+        </div>
+        <div class="optgroup__options" role="group" part="options">
+          <slot @slotchange=${this.handleDisableOptions}></slot>
+        </div>
+      </div>
+    `}};t.styles=m,t.dependencies={"lynk-divider":h},s([a("slot:not([name])")],t.prototype,"defaultSlot",2),s([i()],t.prototype,"isFirstItem",2),s([o({reflect:!0,type:Boolean})],t.prototype,"disabled",2),s([o()],t.prototype,"label",2),s([d("disabled",{waitUntilFirstUpdate:!0})],t.prototype,"handleDisabledChange",1);export{t as a};

package/cdn/chunks/chunk.RDOHO322.js

@@ -0,0 +1,5 @@
+import{a as h}from"./chunk.MEKW2OXH.js";import{a as t,g as n}from"./chunk.ZAFKTMHG.js";import{d as o}from"./chunk.PINNEFCM.js";import{e as i}from"./chunk.FI4IKBIW.js";var e=class extends n{constructor(){super(...arguments);this.localize=new h(this);this.date=new Date;this.hourFormat="auto"}render(){let r=new Date(this.date),s=this.hourFormat==="auto"?void 0:this.hourFormat==="12";if(!isNaN(r.getMilliseconds()))return o`
+      <time datetime=${r.toISOString()}>
+        ${this.localize.date(r,{weekday:this.weekday,era:this.era,year:this.year,month:this.month,day:this.day,hour:this.hour,minute:this.minute,second:this.second,timeZoneName:this.timeZoneName,timeZone:this.timeZone,hour12:s})}
+      </time>
+    `}};i([t()],e.prototype,"date",2),i([t()],e.prototype,"weekday",2),i([t()],e.prototype,"era",2),i([t()],e.prototype,"year",2),i([t()],e.prototype,"month",2),i([t()],e.prototype,"day",2),i([t()],e.prototype,"hour",2),i([t()],e.prototype,"minute",2),i([t()],e.prototype,"second",2),i([t({attribute:"time-zone-name"})],e.prototype,"timeZoneName",2),i([t({attribute:"time-zone"})],e.prototype,"timeZone",2),i([t({attribute:"hour-format"})],e.prototype,"hourFormat",2);export{e as a};

package/cdn/chunks/chunk.RQ2FKE25.js

@@ -0,0 +1,6 @@
+import{a as s}from"./chunk.NZSCHSZJ.js";import{a as o}from"./chunk.MEKW2OXH.js";import{g as t}from"./chunk.ZAFKTMHG.js";import{a as l}from"./chunk.MXDME6T6.js";import{d as e}from"./chunk.PINNEFCM.js";var r=class extends t{constructor(){super(...arguments);this.localize=new o(this)}render(){return e`
+      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term("loading")}>
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `}};r.styles=[l,s];export{r as a};