@uplynk/lynk-design 1.19.2 → 1.20.1

package/cdn/chunks/chunk.DXNYFBZC.js

@@ -0,0 +1,240 @@
+import{a as r}from"./chunk.3YOH2VPP.js";import{a as e}from"./chunk.PINNEFCM.js";var a=e`
+  ${r}
+
+  :host {
+    display: inline-flex;
+    /*
+     * Align tags by their box, not a content-derived baseline. As an inline-flex element the host
+     * would otherwise expose a baseline that depends on its children — so a checked selectable tag,
+     * which adds a non-text check icon as its first child, would report a different baseline than
+     * its unchecked neighbors and visibly shift up/down relative to them. Pinning vertical-align
+     * keeps adjacent tags on the same line regardless of their contents.
+     */
+    vertical-align: middle;
+    --pulse-speed: 1.5s;
+  }
+
+  :host([color='default']) {
+    --lynk-color-fill-loud: var(--lynk-color-neutral-900);
+    --lynk-color-fill-normal: var(--lynk-color-neutral-0);
+    --lynk-color-fill-quiet: var(--lynk-color-neutral-0);
+    --lynk-color-border-loud: var(--lynk-color-neutral-900);
+    --lynk-color-border-normal: var(--lynk-color-neutral-300);
+    --lynk-color-border-quiet: var(--lynk-color-neutral-300);
+    --lynk-color-on-loud: var(--lynk-color-neutral-0);
+    --lynk-color-on-normal: var(--lynk-color-neutral-900);
+    --lynk-color-on-quiet: var(--lynk-color-neutral-900);
+  }
+
+  /* Appearance modifiers */
+  :host([appearance~='outlined']) {
+    --color: var(--lynk-color-on-quiet);
+    --background-color: transparent;
+    --border-color: var(--lynk-color-border-normal);
+  }
+
+  :host([appearance~='outlined']) .tag__remove:hover {
+    background-color: var(--lynk-color-fill-quiet);
+  }
+
+  :host([appearance~='filled']) {
+    --color: var(--lynk-color-on-normal);
+    --background-color: var(--lynk-color-fill-quiet);
+    --border-color: transparent;
+  }
+
+  :host([appearance~='filled']) .tag__remove:hover {
+    background-color: var(--lynk-color-fill-normal);
+  }
+
+  :host([appearance~='filled'][appearance~='outlined']) {
+    --border-color: var(--lynk-color-border-normal);
+  }
+
+  :host([appearance~='loud']) {
+    --color: var(--lynk-color-on-loud);
+    --background-color: var(--lynk-color-fill-loud);
+    --border-color: transparent;
+  }
+
+  :host([appearance~='loud']) .tag__remove:hover {
+    background-color: var(--lynk-color-fill-normal);
+  }
+
+  :host([color='default']) .tag__remove:hover {
+    background-color: var(--lynk-color-black-a50);
+  }
+
+  /*
+   * Selectable (checkbox-like) behavior. A selectable tag is interactive, so it gets a pointer
+   * cursor and a focus ring. When checked, it adopts the "loud" appearance regardless of the
+   * author's appearance — placed after the appearance rules above so these win — and the author's
+   * appearance is restored automatically when unchecked.
+   */
+  :host([selectable]) .tag {
+    cursor: pointer;
+  }
+
+  :host([selectable]:focus-visible) {
+    outline: none;
+  }
+
+  :host([selectable]:focus-visible) .tag {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  :host([selectable][checked]) {
+    --color: var(--lynk-color-on-loud);
+    --background-color: var(--lynk-color-fill-loud);
+    --border-color: transparent;
+  }
+
+  .tag__checked-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :host([size='tiny']),
+  :host([size='small']) {
+    --border-radius: var(--lynk-input-border-radius-small);
+  }
+
+  :host([size='medium']) {
+    --border-radius: var(--lynk-input-border-radius-medium);
+  }
+
+  :host([size='large']) {
+    --border-radius: var(--lynk-input-border-radius-large);
+  }
+
+  :host([pill]) {
+    --border-radius: var(--lynk-border-radius-pill);
+  }
+
+  :host([removable]) .tag {
+    padding-right: 0;
+  }
+
+  .tag {
+    display: flex;
+    gap: 0.5em;
+    align-items: center;
+    border: solid 1px var(--border-color, var(--lynk-color-border-normal));
+    line-height: 1;
+    white-space: nowrap;
+    user-select: text;
+    color: var(--color, var(--lynk-color-on-normal));
+    background-color: var(--background-color, var(--lynk-color-fill-normal));
+    border-radius: var(--border-radius);
+  }
+
+  .tag__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: inherit;
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--lynk-transition-fast) color;
+    cursor: pointer;
+    height: 100%;
+    font-size: 1.4em;
+    border-radius: calc(var(--border-radius) * 0.8);
+  }
+
+  .tag__remove:hover {
+    color: inherit;
+    background-color: var(--lynk-color-black-a25);
+  }
+
+  .tag__remove:focus {
+    outline: none;
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .tag--tiny {
+    /* 11px sits between the x-small (10px) and small (12px) type steps, so it stays literal. */
+    font-size: 11px;
+    /* Same 0.75 ratio the other tag sizes take from their control height: 24px → 18px. */
+    height: calc(var(--lynk-button-height-tiny) * 0.75);
+    line-height: calc(var(--lynk-button-height-tiny) * 0.75);
+    padding: 0 var(--lynk-spacing-x-small);
+  }
+
+  .tag--tiny .tag__remove {
+    width: 16px;
+  }
+
+  .tag--small {
+    font-size: var(--lynk-button-font-size-small);
+    height: calc(var(--lynk-input-height-small) * 0.75);
+    line-height: calc(var(--lynk-input-height-small) - var(--lynk-input-border-width) * 2);
+    padding: 1px var(--lynk-spacing-x-small);
+  }
+
+  .tag--small .tag__remove {
+    width: calc(var(--lynk-input-height-small) * 0.75);
+  }
+
+  .tag--medium {
+    font-size: var(--lynk-button-font-size-medium);
+    height: calc(var(--lynk-input-height-medium) * 0.75);
+    line-height: calc(var(--lynk-input-height-medium) - var(--lynk-input-border-width) * 2);
+    padding: 0 var(--lynk-spacing-small);
+  }
+
+  .tag--medium .tag__remove {
+    width: calc(var(--lynk-input-height-medium) * 0.75);
+  }
+
+  .tag--large {
+    font-size: var(--lynk-button-font-size-large);
+    height: calc(var(--lynk-input-height-large) * 0.75);
+    line-height: calc(var(--lynk-input-height-large) - var(--lynk-input-border-width) * 2);
+    padding: 0 var(--lynk-spacing-base);
+  }
+
+  .tag--large .tag__remove {
+    width: calc(var(--lynk-input-height-large) * 0.75);
+  }
+
+  /* Pulse modifier */
+  :host([pulse]) .tag {
+    animation: pulse var(--pulse-speed) infinite;
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--lynk-color-border-loud);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  /* Override pulse color when custom border-color is set */
+  :host([style*='--border-color']) .tag {
+    animation-name: pulse-custom;
+  }
+
+  @keyframes pulse-custom {
+    0% {
+      box-shadow: 0 0 0 0 var(--border-color);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+`;export{a};

package/cdn/chunks/chunk.DY7QYG57.js

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

package/cdn/chunks/chunk.E26YZYTJ.js

@@ -0,0 +1,257 @@
+import{a as t}from"./chunk.PINNEFCM.js";var a=t`
+  :host {
+    display: block;
+  }
+
+  /* Block */
+  .tag-input {
+    display: block;
+    width: 100%;
+  }
+
+  /* Control (the box that wraps prefix, tags, input, clear, suffix) */
+  .tag-input__control {
+    flex: 1 1 auto;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: start;
+    font-family: var(--lynk-input-font-family);
+    font-weight: var(--lynk-input-font-weight);
+    letter-spacing: var(--lynk-input-letter-spacing);
+    vertical-align: middle;
+    cursor: text;
+    transition:
+      var(--lynk-transition-fast) color,
+      var(--lynk-transition-fast) border,
+      var(--lynk-transition-fast) box-shadow,
+      var(--lynk-transition-fast) background-color;
+  }
+
+  /* Standard appearance */
+  .tag-input--standard .tag-input__control {
+    background-color: var(--lynk-input-background-color);
+    border: solid var(--lynk-input-border-width) var(--lynk-input-border-color);
+  }
+
+  .tag-input--standard:not(.tag-input--disabled):hover .tag-input__control {
+    background-color: var(--lynk-input-background-color-hover);
+    border-color: var(--lynk-input-border-color-hover);
+  }
+
+  .tag-input--standard.tag-input--disabled .tag-input__control {
+    background-color: var(--lynk-input-background-color-disabled);
+    border-color: var(--lynk-input-border-color-disabled);
+    color: var(--lynk-input-color-disabled);
+    opacity: var(--lynk-opacity-disabled);
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .tag-input--standard.tag-input--focused:not(.tag-input--disabled) .tag-input__control {
+    background-color: var(--lynk-input-background-color-focus);
+    border-color: var(--lynk-input-border-color-focus) !important;
+    box-shadow: 0 0 0 var(--lynk-focus-ring-width) var(--lynk-input-focus-ring-color);
+  }
+
+  /* Text input */
+  .tag-input__input {
+    flex: 1 1 60px;
+    min-width: 60px;
+    width: auto;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--lynk-input-color);
+    cursor: inherit;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .tag-input__input::placeholder {
+    color: var(--lynk-input-placeholder-color);
+  }
+
+  .tag-input__input:focus {
+    outline: none;
+  }
+
+  .tag-input:not(.tag-input--disabled):hover .tag-input__input {
+    color: var(--lynk-input-color-hover);
+  }
+
+  /* Hidden input used for constraint validation */
+  .tag-input__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  /* Tags */
+  .tag-input__tags {
+    display: flex;
+    flex: 0 1 auto;
+    align-items: center;
+    flex-wrap: wrap;
+    /* Leading gap so chips sit close to the edge (matches lynk-select), plus a trailing gap
+       so the input cursor has a little breathing room after the last chip. */
+    margin-inline-start: var(--lynk-spacing-2x-small);
+    margin-inline-end: var(--lynk-spacing-2x-small);
+  }
+
+  .tag-input__tag-wrapper {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  .tag-input__tags lynk-tag {
+    cursor: default;
+  }
+
+  .tag-input--disabled .tag-input__tags lynk-tag {
+    cursor: not-allowed;
+  }
+
+  /* Prefix and suffix */
+  .tag-input__prefix,
+  .tag-input__suffix {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    color: var(--lynk-input-help-text-color);
+  }
+
+  /* Clear button */
+  .tag-input__clear {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--lynk-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--lynk-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .tag-input__clear:hover {
+    color: var(--lynk-input-icon-color-hover);
+  }
+
+  .tag-input__clear:focus {
+    outline: none;
+  }
+
+  /* Readonly */
+  .tag-input--readonly .tag-input__control {
+    border-color: var(--lynk-color-neutral-200);
+    cursor: default;
+  }
+
+  .tag-input--readonly.tag-input--focused .tag-input__control {
+    border-color: var(--lynk-color-neutral-400);
+    box-shadow: none;
+  }
+
+  /* Sizes */
+  .tag-input--small .tag-input__control {
+    border-radius: var(--lynk-input-border-radius-small);
+    font-size: var(--lynk-input-font-size-small);
+    min-height: var(--lynk-input-height-small);
+    padding-block: 2px;
+    padding-inline: var(--lynk-input-spacing-small);
+  }
+
+  .tag-input--medium .tag-input__control {
+    border-radius: var(--lynk-input-border-radius-medium);
+    font-size: var(--lynk-input-font-size-medium);
+    min-height: var(--lynk-input-height-medium);
+    padding-block: 3px;
+    padding-inline: var(--lynk-input-spacing-medium);
+  }
+
+  .tag-input--large .tag-input__control {
+    border-radius: var(--lynk-input-border-radius-large);
+    font-size: var(--lynk-input-font-size-large);
+    min-height: var(--lynk-input-height-large);
+    padding-block: 4px;
+    padding-inline: var(--lynk-input-spacing-large);
+  }
+
+  /* Per-size internal gap between chips */
+  .tag-input--small .tag-input__tags {
+    gap: 2px;
+  }
+
+  .tag-input--medium .tag-input__tags {
+    gap: 3px;
+  }
+
+  .tag-input--large .tag-input__tags {
+    gap: 4px;
+  }
+
+  /* Remove the control's leading padding when tags are present so the tags' own start margin
+     provides the gap (mirrors lynk-select). Defined after the size rules so it wins the cascade. */
+  .tag-input--has-tags.tag-input--small .tag-input__control,
+  .tag-input--has-tags.tag-input--medium .tag-input__control,
+  .tag-input--has-tags.tag-input--large .tag-input__control {
+    padding-inline-start: 0;
+  }
+
+  /* Pill */
+  .tag-input--pill.tag-input--small .tag-input__control {
+    border-radius: var(--lynk-input-height-small);
+  }
+
+  .tag-input--pill.tag-input--medium .tag-input__control {
+    border-radius: var(--lynk-input-height-medium);
+  }
+
+  .tag-input--pill.tag-input--large .tag-input__control {
+    border-radius: var(--lynk-input-height-large);
+  }
+
+  .tag-input--small .tag-input__clear {
+    margin-inline-start: var(--lynk-input-spacing-small);
+  }
+
+  .tag-input--medium .tag-input__clear {
+    margin-inline-start: var(--lynk-input-spacing-medium);
+  }
+
+  .tag-input--large .tag-input__clear {
+    margin-inline-start: var(--lynk-input-spacing-large);
+  }
+
+  .tag-input__prefix::slotted(*) {
+    margin-inline-end: var(--lynk-input-spacing-small);
+  }
+
+  .tag-input__suffix::slotted(*) {
+    margin-inline-start: var(--lynk-input-spacing-small);
+  }
+
+  /* Invalid user data */
+  :host([data-user-invalid]) .tag-input--standard .tag-input__control {
+    border-color: var(--lynk-color-danger);
+  }
+
+  :host([data-user-invalid]) .tag-input--standard.tag-input--focused:not(.tag-input--disabled) .tag-input__control {
+    border-color: var(--lynk-color-danger);
+    box-shadow: 0 0 0 var(--lynk-focus-ring-width) color-mix(in oklab, var(--lynk-color-danger) 50%, transparent);
+  }
+`;export{a};

package/cdn/chunks/chunk.E3NBUMCP.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.SQCZLEHP.js";import*as t from"react";import{createComponent as n}from"@lit/react";import"@lit/react";var o="lynk-splitter-pane";e.define("lynk-splitter-pane");var r=n({tagName:o,elementClass:e,react:t,events:{EvShow:"ev-show",EvHide:"ev-hide"},displayName:"LynkSplitterPane"}),v=r;export{v as a};

package/cdn/chunks/chunk.E7LDJYHY.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.7WL5KJVV.js";var m=e;e.define("lynk-format-number");export{m as a};

package/cdn/chunks/chunk.EB253RIF.js

@@ -0,0 +1,97 @@
+import{a as _}from"./chunk.EM3EF5UE.js";import{a as g}from"./chunk.73NAUWZV.js";import{a as $}from"./chunk.BG6N3PAS.js";import{a as y}from"./chunk.SH54CIFE.js";import{a as C}from"./chunk.IPMWK5EL.js";import{a as b}from"./chunk.J532R3NG.js";import{b as v}from"./chunk.V7E6ITFP.js";import{a as f}from"./chunk.KTC4GWAL.js";import{a as m}from"./chunk.O4ZRZ3HV.js";import{a as c}from"./chunk.LQLSWU3G.js";import{a as o}from"./chunk.TETFNMKN.js";import{a as u}from"./chunk.YHSYTTFF.js";import{a as s}from"./chunk.YZSIY5HS.js";import{a as d}from"./chunk.7TAXE2HP.js";import{a as i,b as n,d as r,g as h}from"./chunk.XKOYU7QD.js";import{a as p}from"./chunk.MXDME6T6.js";import{d as a}from"./chunk.PINNEFCM.js";import{e as l}from"./chunk.FI4IKBIW.js";var t=class extends h{constructor(){super(...arguments);this.formControlController=new v(this);this.hasSlotController=new u(this,"help-text","help-tip","label","label-end","help-text-end");this.localize=new m(this);this.isOpen=!1;this.name="";this.value="";this.defaultValue="";this.label="";this.placeholder="";this.helpText="";this.labelEnd="";this.helpTextEnd="";this.helpTip="";this.disabled=!1;this.readonly=!1;this.required=!1;this.optional=!1;this.dirty=!1;this.inline=!1;this.size="medium";this.hoist=!1;this.clearable=!1;this.handleDocumentClick=e=>{this.contains(e.target)||this.hide()};this.handleKeyDown=e=>{let I=e.metaKey||e.ctrlKey||e.shiftKey||e.altKey;e.key==="Enter"&&!e.isComposing&&!I&&(this.isOpen&&this.calendar.value?(e.preventDefault(),this.value=this.calendar.value,this.updateInputFromValue(),this.emit("ev-change"),this.hide()):this.isOpen||setTimeout(()=>{e.defaultPrevented||this.emit("ev-change")})),e.key==="Escape"&&this.isOpen&&(e.preventDefault(),e.stopPropagation(),this.hide())}}get validity(){return this.dateInput.validity}get validationMessage(){return this.dateInput.validationMessage}connectedCallback(){super.connectedCallback(),this.handleDocumentClick=this.handleDocumentClick.bind(this),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown)}firstUpdated(){this.formControlController.updateValidity(),this.updateInputFromValue()}handleDateInput(){this.value=this.dateInput.value,this.updatePickerFromInput(),this.emit("ev-input")}handleDateChange(){this.value=this.dateInput.value,this.updatePickerFromInput(),this.emit("ev-change")}handleDateInputClick(e){e.preventDefault()}handleCalendarChange(){this.calendar.value&&(this.value=this.calendar.value,this.updateInputFromValue(),this.emit("ev-change"))}handleClearClick(e){e.preventDefault(),e.stopPropagation(),this.value!==""&&(this.value="",this.updateInputFromValue(),this.updatePickerFromValue(),this.emit("ev-clear"),this.emit("ev-input"),this.emit("ev-change")),this.dateInput.focus()}handleTriggerClick(e){e.stopPropagation(),!(this.disabled||this.readonly)&&(this.isOpen?this.hide():this.show())}updateInputFromValue(){this.dateInput&&(this.dateInput.value=this.value)}updatePickerFromValue(){this.calendar&&(this.calendar.value=this.value)}updatePickerFromInput(){var e;this.calendar&&(this.calendar.value=((e=this.dateInput)==null?void 0:e.value)||"")}show(){this.isOpen||this.disabled||this.readonly||(this.isOpen=!0,this.updatePickerFromValue(),this.dropdown.show(),document.addEventListener("click",this.handleDocumentClick))}hide(){this.isOpen&&(this.isOpen=!1,this.dropdown.hide(),document.removeEventListener("click",this.handleDocumentClick))}focus(e){this.dateInput.focus(e)}blur(){this.dateInput.blur()}checkValidity(){return this.dateInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.dateInput.reportValidity()}setCustomValidity(e){this.dateInput.setCustomValidity(e),this.formControlController.updateValidity()}handleValueChange(){this.updateInputFromValue()}handleDisabledChange(){this.formControlController.setValidity(this.disabled?!0:this.checkValidity())}render(){return a`
+      <lynk-form-field
+        .size=${this.size}
+        .label=${this.hasSlotController.test("label")?"":this.label}
+        .helpText=${this.hasSlotController.test("help-text")?"":this.helpText}
+        .helpTip=${this.hasSlotController.test("help-tip")?"":this.helpTip}
+        .labelEnd=${this.hasSlotController.test("label-end")?"":this.labelEnd}
+        .helpTextEnd=${this.hasSlotController.test("help-text-end")?"":this.helpTextEnd}
+        .required=${this.required}
+        .optional=${this.optional}
+        .readonly=${this.readonly}
+        .dirty=${this.dirty}
+        .inline=${this.inline}
+        ?data-user-invalid=${this.hasAttribute("data-user-invalid")}
+        ?data-user-valid=${this.hasAttribute("data-user-valid")}
+        ?data-invalid=${this.hasAttribute("data-invalid")}
+        ?data-valid=${this.hasAttribute("data-valid")}
+      >
+        ${this.hasSlotController.test("label")?a`<slot name="label" slot="label"></slot>`:""}
+        ${this.hasSlotController.test("help-text")?a`<slot name="help-text" slot="help-text"></slot>`:""}
+        ${this.hasSlotController.test("help-tip")?a`<slot name="help-tip" slot="help-tip"></slot>`:""}
+        ${this.hasSlotController.test("label-end")?a`<slot name="label-end" slot="label-end"></slot>`:""}
+        ${this.hasSlotController.test("help-text-end")?a`<slot name="help-text-end" slot="help-text-end"></slot>`:""}
+        <lynk-dropdown
+          class="date-picker__dropdown"
+          part="dropdown"
+          ?disabled=${this.disabled||this.readonly}
+          .open=${this.isOpen}
+          .hoist=${this.hoist}
+          placement="bottom-start"
+          distance="2"
+        >
+          <div
+            slot="trigger"
+            part="input-group"
+            role="group"
+            class=${d({"date-picker__input-group":!0,"date-picker__input-group--small":this.size==="small","date-picker__input-group--medium":this.size==="medium","date-picker__input-group--large":this.size==="large","date-picker__input-group--disabled":this.disabled,"date-picker__input-group--readonly":this.readonly})}
+          >
+            ${this.placeholder&&!this.value?a`<div part="placeholder" class="date-picker__placeholder">${this.placeholder}</div>`:""}
+            <input
+              part="date-input"
+              class="date-picker__date-input"
+              type="date"
+              role="combobox"
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              ?required=${this.required}
+              ?hidden=${this.placeholder&&!this.value}
+              min=${o(this.min)}
+              max=${o(this.max)}
+              .value=${y(this.value)}
+              aria-label=${this.label||"Date"}
+              aria-readonly=${this.readonly?"true":"false"}
+              aria-haspopup="dialog"
+              aria-expanded=${this.isOpen?"true":"false"}
+              @click=${this.handleDateInputClick}
+              @input=${this.handleDateInput}
+              @change=${this.handleDateChange}
+            />
+            ${this.clearable&&!this.disabled&&!this.readonly&&this.value?a`
+                    <button
+                      part="clear-button"
+                      class="date-picker__clear"
+                      type="button"
+                      aria-label=${this.localize.term("clearEntry")||"Clear entry"}
+                      @click=${this.handleClearClick}
+                      tabindex="-1"
+                    >
+                      <slot name="clear-icon">
+                        <lynk-icon name="x-circle-fill" library="system"></lynk-icon>
+                      </slot>
+                    </button>
+                  `:""}
+
+            <lynk-icon-button
+              part="trigger"
+              class="date-picker__trigger"
+              name="calendar"
+              library="system"
+              label="Open calendar"
+              ?disabled=${this.disabled}
+              @click=${this.handleTriggerClick}
+            ></lynk-icon-button>
+          </div>
+
+          <div class="date-picker__panel" id="calendar-panel">
+            <lynk-calendar
+              part="calendar"
+              class="date-picker__calendar"
+              .min=${this.min}
+              .max=${this.max}
+              @ev-change=${this.handleCalendarChange}
+            ></lynk-calendar>
+          </div>
+        </lynk-dropdown>
+      </lynk-form-field>
+    `}};t.styles=[p,_],t.dependencies={"lynk-calendar":b,"lynk-dropdown":g,"lynk-form-field":$,"lynk-icon":c,"lynk-icon-button":f},l([r(".date-picker__dropdown")],t.prototype,"dropdown",2),l([r(".date-picker__calendar")],t.prototype,"calendar",2),l([r(".date-picker__date-input")],t.prototype,"dateInput",2),l([n()],t.prototype,"isOpen",2),l([i()],t.prototype,"name",2),l([i()],t.prototype,"value",2),l([C()],t.prototype,"defaultValue",2),l([i()],t.prototype,"label",2),l([i()],t.prototype,"placeholder",2),l([i({attribute:"help-text"})],t.prototype,"helpText",2),l([i({attribute:"label-end"})],t.prototype,"labelEnd",2),l([i({attribute:"help-text-end"})],t.prototype,"helpTextEnd",2),l([i({attribute:"help-tip"})],t.prototype,"helpTip",2),l([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),l([i({type:Boolean,reflect:!0})],t.prototype,"readonly",2),l([i({type:Boolean,reflect:!0})],t.prototype,"required",2),l([i({type:Boolean,reflect:!0})],t.prototype,"optional",2),l([i({type:Boolean,reflect:!0})],t.prototype,"dirty",2),l([i({type:Boolean,reflect:!0})],t.prototype,"inline",2),l([i({reflect:!0})],t.prototype,"size",2),l([i()],t.prototype,"min",2),l([i()],t.prototype,"max",2),l([i({type:Boolean})],t.prototype,"hoist",2),l([i({type:Boolean})],t.prototype,"clearable",2),l([s("value")],t.prototype,"handleValueChange",1),l([s("disabled",{waitUntilFirstUpdate:!0})],t.prototype,"handleDisabledChange",1);export{t as a};

package/cdn/chunks/chunk.EBLO5CIK.js

@@ -0,0 +1,16 @@
+import{a as n}from"./chunk.NIGPLJXZ.js";import{a as p}from"./chunk.5I5F2IHR.js";import{a as s}from"./chunk.O4ZRZ3HV.js";import{a as m}from"./chunk.TETFNMKN.js";import{a as l}from"./chunk.7TAXE2HP.js";import{a as r,g as a}from"./chunk.XKOYU7QD.js";import{a as o}from"./chunk.MXDME6T6.js";import{d as i}from"./chunk.PINNEFCM.js";import{e as t}from"./chunk.FI4IKBIW.js";var e=class extends a{constructor(){super(...arguments);this.localize=new s(this);this.value=0;this.indeterminate=!1;this.label=""}render(){return i`
+      <div
+        part="base"
+        class=${l({"progress-bar":!0,"progress-bar--indeterminate":this.indeterminate,"progress-bar--rtl":this.localize.dir()==="rtl"})}
+        role="progressbar"
+        title=${m(this.title)}
+        aria-label=${this.label.length>0?this.label:this.localize.term("progress")}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${this.indeterminate?0:this.value}
+      >
+        <div part="indicator" class="progress-bar__indicator" style=${p({width:`${this.value}%`})}>
+          ${this.indeterminate?"":i` <slot part="label" class="progress-bar__label"></slot> `}
+        </div>
+      </div>
+    `}};e.styles=[o,n],t([r({type:Number,reflect:!0})],e.prototype,"value",2),t([r({type:Boolean,reflect:!0})],e.prototype,"indeterminate",2),t([r()],e.prototype,"label",2);export{e as a};

package/cdn/chunks/chunk.EHARXK5X.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.IQPKUAAG.js";import*as t from"react";import{createComponent as n}from"@lit/react";import"@lit/react";var o="lynk-radio-button";e.define("lynk-radio-button");var r=n({tagName:o,elementClass:e,react:t,events:{EvBlur:"ev-blur",EvFocus:"ev-focus"},displayName:"LynkRadioButton"}),a=r;export{a};

package/cdn/chunks/chunk.EIOQLLSZ.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.7HSPTFRO.js";import*as t from"react";import{createComponent as o}from"@lit/react";import"@lit/react";var n="lynk-copy-button";e.define("lynk-copy-button");var r=o({tagName:n,elementClass:e,react:t,events:{EvCopy:"ev-copy",EvError:"ev-error"},displayName:"LynkCopyButton"}),v=r;export{v as a};

package/cdn/chunks/chunk.ELVCV4A5.js

@@ -0,0 +1,14 @@
+import{a as d}from"./chunk.AS5H5OFO.js";import{a as h}from"./chunk.O4ZRZ3HV.js";import{a as c}from"./chunk.LQLSWU3G.js";import{a as n,d as s,g as p}from"./chunk.XKOYU7QD.js";import{a as m}from"./chunk.MXDME6T6.js";import{d as i}from"./chunk.PINNEFCM.js";import{e as r}from"./chunk.FI4IKBIW.js";var e=class extends p{constructor(){super(...arguments);this.localize=new h(this);this.separatorDir=this.localize.dir();this.label=""}getSeparator(){let t=this.separatorSlot.assignedElements({flatten:!0})[0].cloneNode(!0);return[t,...t.querySelectorAll("[id]")].forEach(o=>o.removeAttribute("id")),t.setAttribute("data-default",""),t.slot="separator",t}handleSlotChange(){let a=[...this.defaultSlot.assignedElements({flatten:!0})].filter(t=>t.tagName.toLowerCase()==="lynk-breadcrumb-item");a.forEach((t,o)=>{let l=t.querySelector('[slot="separator"]');l===null?t.append(this.getSeparator()):l.hasAttribute("data-default")&&l.replaceWith(this.getSeparator()),o===a.length-1?t.setAttribute("aria-current","page"):t.removeAttribute("aria-current")})}render(){return this.separatorDir!==this.localize.dir()&&(this.separatorDir=this.localize.dir(),this.updateComplete.then(()=>this.handleSlotChange())),i`
+      <nav part="base" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <span hidden aria-hidden="true">
+        <slot name="separator">
+          <lynk-icon
+            name=${this.localize.dir()==="rtl"?"chevron-left":"chevron-right"}
+            library="system"
+          ></lynk-icon>
+        </slot>
+      </span>
+    `}};e.styles=[m,d],e.dependencies={"lynk-icon":c},r([s("slot")],e.prototype,"defaultSlot",2),r([s('slot[name="separator"]')],e.prototype,"separatorSlot",2),r([n()],e.prototype,"label",2);export{e as a};