@uplynk/lynk-design 1.17.0 → 1.18.0

package/cdn/chunks/chunk.KKOSNC6J.js

@@ -0,0 +1,110 @@
+import{a as g}from"./chunk.OXXCDPOK.js";import{a as C}from"./chunk.DLBRTSPN.js";import{a as y}from"./chunk.H732WUXS.js";import{a as $}from"./chunk.ZSJ54B7U.js";import{b as v}from"./chunk.V7E6ITFP.js";import{a as s}from"./chunk.ZP7BBHMJ.js";import{a as c}from"./chunk.YHSYTTFF.js";import{a as f}from"./chunk.Q3J7P2MZ.js";import{a as b}from"./chunk.Q5QEEGB3.js";import{a as n}from"./chunk.YZSIY5HS.js";import{a as p}from"./chunk.3RH6CRTR.js";import{a as i,b as h,d as u,g as d}from"./chunk.4D6MBWSA.js";import{a as m}from"./chunk.45RIPFQU.js";import{d as a}from"./chunk.QRMWQQRW.js";import{e}from"./chunk.FI4IKBIW.js";var t=class extends d{constructor(){super(...arguments);this.formControlController=new v(this,{assumeInteractionOn:["ev-blur","ev-input"]});this.localize=new f(this);this.hasSlotController=new c(this,"help-text","help-tip","label","label-end","help-text-end");this.hasFocus=!1;this.title="";this.__numberInput=Object.assign(document.createElement("input"),{type:"number"});this.__dateInput=Object.assign(document.createElement("input"),{type:"date"});this.type="text";this.name="";this.value="";this.defaultValue="";this.state="default";this.size="medium";this.filled=!1;this.pill=!1;this.label="";this.helpText="";this.labelEnd="";this.helpTextEnd="";this.helpTip="";this.clearable=!1;this.disabled=!1;this.placeholder="";this.readonly=!1;this.restricted=!1;this.passwordToggle=!1;this.passwordVisible=!1;this.noSpinButtons=!1;this.autoPicker=!1;this.form="";this.required=!1;this.optional=!1;this.dirty=!1;this.inline=!1;this.autocomplete="off";this.spellcheck=!0}get valueAsDate(){var l;return this.__dateInput.type=this.type,this.__dateInput.value=this.value,((l=this.input)==null?void 0:l.valueAsDate)||this.__dateInput.valueAsDate}set valueAsDate(l){this.__dateInput.type=this.type,this.__dateInput.valueAsDate=l,this.value=this.__dateInput.value}get valueAsNumber(){var l;return this.__numberInput.value=this.value,((l=this.input)==null?void 0:l.valueAsNumber)||this.__numberInput.valueAsNumber}set valueAsNumber(l){this.__numberInput.valueAsNumber=l,this.value=this.__numberInput.value}get validity(){return this.input.validity}get validationMessage(){return this.input.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("ev-blur")}handleChange(){this.value=this.input.value,this.emit("ev-change")}handleClearClick(l){l.preventDefault(),this.value!==""&&(this.value="",this.emit("ev-clear"),this.emit("ev-input"),this.emit("ev-change")),this.input.focus()}handleFocus(){this.hasFocus=!0,this.emit("ev-focus"),this.autoPicker&&this.showPicker()}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("ev-input")}handleInvalid(l){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(l)}handleKeyDown(l){let r=l.metaKey||l.ctrlKey||l.shiftKey||l.altKey;l.key==="Enter"&&!r&&setTimeout(()=>{!l.defaultPrevented&&!l.isComposing&&(this.formControlController.submit(),this.emit("ev-enter"))})}handlePasswordToggle(){this.passwordVisible=!this.passwordVisible}handleDisabledChange(){(this.disabled||this.restricted)&&this.formControlController.setValidity(!0)}handleStepChange(){this.input.step=String(this.step),this.formControlController.updateValidity()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(l){this.input.focus(l)}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(l,r,o="none"){this.input.setSelectionRange(l,r,o)}setRangeText(l,r,o,w="preserve"){let x=r!=null?r:this.input.selectionStart,_=o!=null?o:this.input.selectionEnd;this.input.setRangeText(l,x,_,w),this.value!==this.input.value&&(this.value=this.input.value)}showPicker(){"showPicker"in HTMLInputElement.prototype&&this.input.showPicker()}stepUp(){this.input.stepUp(),this.value!==this.input.value&&(this.value=this.input.value)}stepDown(){this.input.stepDown(),this.value!==this.input.value&&(this.value=this.input.value)}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(l){this.input.setCustomValidity(l),this.formControlController.updateValidity()}render(){let r=this.clearable&&!this.disabled&&!this.readonly&&(typeof this.value=="number"||this.value&&this.value.length>0);return a`
+      <lynk-form-field
+        .size=${this.size}
+        .state=${this.state}
+        .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}
+        .focused=${this.hasFocus}
+        .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>`:""}
+
+        <div
+          part="base"
+          class=${p({input:!0,"input--small":this.size==="small","input--medium":this.size==="medium","input--large":this.size==="large","input--pill":this.pill,"input--standard":!this.filled,"input--filled":this.filled,"input--disabled":this.disabled,"input--restricted":this.restricted,"input--focused":this.hasFocus,"input--empty":!this.value,"input--no-spin-buttons":this.noSpinButtons})}
+        >
+          <span part="prefix" class="input__prefix">
+            <slot name="prefix"></slot>
+          </span>
+
+          ${this.restricted?a` <div part="input" class="input__control-preview">${this.value||"None"}</div> `:""}
+
+          <input
+            part="input"
+            class="input__control"
+            type=${this.type==="password"&&this.passwordVisible?"text":this.type}
+            title=${this.title}
+            name=${s(this.name)}
+            ?disabled=${this.disabled||this.restricted}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            placeholder=${s(this.placeholder)}
+            minlength=${s(this.minlength)}
+            maxlength=${s(this.maxlength)}
+            min=${s(this.min)}
+            max=${s(this.max)}
+            step=${s(this.step)}
+            .value=${y(this.value)}
+            autocapitalize=${s(this.autocapitalize)}
+            autocomplete=${s(this.autocomplete)||"off"}
+            ?autofocus=${this.autofocus}
+            spellcheck=${this.spellcheck}
+            pattern=${s(this.pattern)}
+            enterkeyhint=${s(this.enterkeyhint)}
+            inputmode=${s(this.inputmode)}
+            aria-label=${this.label||"Input"}
+            @change=${this.handleChange}
+            @input=${this.handleInput}
+            @invalid=${this.handleInvalid}
+            @keydown=${this.handleKeyDown}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+          />
+
+          ${r?a`
+                  <button
+                    part="clear-button"
+                    class="input__clear"
+                    type="button"
+                    aria-label=${this.localize.term("clearEntry")}
+                    @click=${this.handleClearClick}
+                    tabindex="-1"
+                  >
+                    <slot name="clear-icon">
+                      <lynk-icon name="x-circle-fill" library="system"></lynk-icon>
+                    </slot>
+                  </button>
+                `:""}
+          ${this.passwordToggle&&!this.disabled?a`
+                  <button
+                    part="password-toggle-button"
+                    class="input__password-toggle"
+                    type="button"
+                    aria-label=${this.localize.term(this.passwordVisible?"hidePassword":"showPassword")}
+                    @click=${this.handlePasswordToggle}
+                    tabindex="-1"
+                  >
+                    ${this.passwordVisible?a`
+                            <slot name="show-password-icon">
+                              <lynk-icon name="eye-slash" library="system"></lynk-icon>
+                            </slot>
+                          `:a`
+                            <slot name="hide-password-icon">
+                              <lynk-icon name="eye" library="system"></lynk-icon>
+                            </slot>
+                          `}
+                  </button>
+                `:""}
+
+          <span part="suffix" class="input__suffix">
+            <slot name="suffix"></slot>
+          </span>
+        </div>
+        <slot name="action"></slot>
+      </lynk-form-field>
+    `}};t.styles=[m,g],t.dependencies={"lynk-form-field":C,"lynk-icon":b},e([u(".input__control")],t.prototype,"input",2),e([h()],t.prototype,"hasFocus",2),e([i()],t.prototype,"title",2),e([i({reflect:!0})],t.prototype,"type",2),e([i()],t.prototype,"name",2),e([i()],t.prototype,"value",2),e([$()],t.prototype,"defaultValue",2),e([i({reflect:!0})],t.prototype,"state",2),e([i({reflect:!0})],t.prototype,"size",2),e([i({type:Boolean,reflect:!0})],t.prototype,"filled",2),e([i({type:Boolean,reflect:!0})],t.prototype,"pill",2),e([i()],t.prototype,"label",2),e([i({attribute:"help-text"})],t.prototype,"helpText",2),e([i({attribute:"label-end"})],t.prototype,"labelEnd",2),e([i({attribute:"help-text-end"})],t.prototype,"helpTextEnd",2),e([i({attribute:"help-tip"})],t.prototype,"helpTip",2),e([i({type:Boolean})],t.prototype,"clearable",2),e([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([i()],t.prototype,"placeholder",2),e([i({type:Boolean,reflect:!0})],t.prototype,"readonly",2),e([i({type:Boolean,reflect:!0})],t.prototype,"restricted",2),e([i({attribute:"password-toggle",type:Boolean})],t.prototype,"passwordToggle",2),e([i({attribute:"password-visible",type:Boolean})],t.prototype,"passwordVisible",2),e([i({attribute:"no-spin-buttons",type:Boolean})],t.prototype,"noSpinButtons",2),e([i({attribute:"auto-picker",type:Boolean})],t.prototype,"autoPicker",2),e([i({reflect:!0})],t.prototype,"form",2),e([i({type:Boolean,reflect:!0})],t.prototype,"required",2),e([i({type:Boolean,reflect:!0})],t.prototype,"optional",2),e([i({type:Boolean,reflect:!0})],t.prototype,"dirty",2),e([i({type:Boolean,reflect:!0})],t.prototype,"inline",2),e([i()],t.prototype,"pattern",2),e([i({type:Number})],t.prototype,"minlength",2),e([i({type:Number})],t.prototype,"maxlength",2),e([i({type:Number})],t.prototype,"min",2),e([i({type:Number})],t.prototype,"max",2),e([i()],t.prototype,"step",2),e([i()],t.prototype,"autocapitalize",2),e([i({type:String})],t.prototype,"autocomplete",2),e([i({type:Boolean})],t.prototype,"autofocus",2),e([i()],t.prototype,"enterkeyhint",2),e([i({type:Boolean,converter:{fromAttribute:l=>!(!l||l==="false"),toAttribute:l=>l?"true":"false"}})],t.prototype,"spellcheck",2),e([i()],t.prototype,"inputmode",2),e([n(["disabled","restricted"],{waitUntilFirstUpdate:!0})],t.prototype,"handleDisabledChange",1),e([n("step",{waitUntilFirstUpdate:!0})],t.prototype,"handleStepChange",1),e([n("value",{waitUntilFirstUpdate:!0})],t.prototype,"handleValueChange",1);export{t as a};

package/cdn/chunks/chunk.KL2QJAL5.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.2ON4HDAW.js";import*as t from"react";import{createComponent as r}from"@lit/react";import"@lit/react";var n="lynk-splitter";e.define("lynk-splitter");var s=r({tagName:n,elementClass:e,react:t,events:{EvReady:"ev-ready",EvSplitterResize:"ev-splitter-resize",EvAfterSplitterResize:"ev-after-splitter-resize"},displayName:"LynkSplitter"}),o=s;export{o as a};

package/cdn/chunks/chunk.KPFG76XC.js

@@ -0,0 +1,46 @@
+import{a as T}from"./chunk.LPG3MWZP.js";import{a as S}from"./chunk.I2G2IAR5.js";import{a as h,b as p}from"./chunk.HUMDDNNQ.js";import{a as E}from"./chunk.5MZQ7XT5.js";import{a as u}from"./chunk.KLRPP4NQ.js";import{a as n,c as d}from"./chunk.VDJQBFEB.js";import{a,c as l}from"./chunk.DCN42ZX4.js";import{a as v}from"./chunk.ZP7BBHMJ.js";import{a as k}from"./chunk.YHSYTTFF.js";import{a as _}from"./chunk.Q3J7P2MZ.js";import{a as y}from"./chunk.YZSIY5HS.js";import{a as b}from"./chunk.3RH6CRTR.js";import{a as s,d as c,g}from"./chunk.4D6MBWSA.js";import{a as C}from"./chunk.45RIPFQU.js";import{d as f}from"./chunk.QRMWQQRW.js";import{e as i}from"./chunk.FI4IKBIW.js";function w(m){return m.charAt(0).toUpperCase()+m.slice(1)}var t=class extends g{constructor(){super(...arguments);this.hasSlotController=new k(this,"footer");this.localize=new _(this);this.modal=new S(this);this.open=!1;this.label="";this.placement="end";this.contained=!1;this.noHeader=!1;this.handleDocumentKeyDown=e=>{this.contained||e.key==="Escape"&&this.modal.isActive()&&this.open&&(e.stopImmediatePropagation(),this.requestClose("keyboard"))}}firstUpdated(){this.drawer.hidden=!this.open,this.open&&(this.addOpenListeners(),this.contained||(this.modal.activate(),h(this)))}disconnectedCallback(){super.disconnectedCallback(),p(this),this.removeOpenListeners()}requestClose(e){if(this.emit("ev-request-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){let o=l(this,"drawer.denyClose",{dir:this.localize.dir()});n(this.panel,o.keyframes,o.options);return}this.hide()}addOpenListeners(){var e;"CloseWatcher"in window?((e=this.closeWatcher)==null||e.destroy(),this.contained||(this.closeWatcher=new CloseWatcher,this.closeWatcher.onclose=()=>this.requestClose("keyboard"))):document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){var e;document.removeEventListener("keydown",this.handleDocumentKeyDown),(e=this.closeWatcher)==null||e.destroy()}async handleOpenChange(){if(this.open){this.emit("ev-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.contained||(this.modal.activate(),h(this));let e=this.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await Promise.all([d(this.drawer),d(this.overlay)]),this.drawer.hidden=!1,requestAnimationFrame(()=>{this.emit("ev-initial-focus",{cancelable:!0}).defaultPrevented||(e?e.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),e&&e.setAttribute("autofocus","")});let r=l(this,`drawer.show${w(this.placement)}`,{dir:this.localize.dir()}),o=l(this,"drawer.overlay.show",{dir:this.localize.dir()});await Promise.all([n(this.panel,r.keyframes,r.options),n(this.overlay,o.keyframes,o.options)]),this.emit("ev-after-show")}else{this.emit("ev-hide"),this.removeOpenListeners(),this.contained||(this.modal.deactivate(),p(this)),await Promise.all([d(this.drawer),d(this.overlay)]);let e=l(this,`drawer.hide${w(this.placement)}`,{dir:this.localize.dir()}),r=l(this,"drawer.overlay.hide",{dir:this.localize.dir()});await Promise.all([n(this.overlay,r.keyframes,r.options).then(()=>{this.overlay.hidden=!0}),n(this.panel,e.keyframes,e.options).then(()=>{this.panel.hidden=!0})]),this.drawer.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1;let o=this.originalTrigger;typeof(o==null?void 0:o.focus)=="function"&&setTimeout(()=>o.focus()),this.emit("ev-after-hide")}}handleNoModalChange(){this.open&&!this.contained&&(this.modal.activate(),h(this)),this.open&&this.contained&&(this.modal.deactivate(),p(this))}async show(){if(!this.open)return this.open=!0,await u(this,"ev-after-show")}async hide(){var r;if(!this.open)return;let{activeElement:e}=document;return e&&this.contains(e)&&((r=document.activeElement)==null||r.blur()),this.open=!1,await u(this,"ev-after-hide")}render(){return f`
+      <div
+        part="base"
+        class=${b({drawer:!0,"drawer--open":this.open,"drawer--top":this.placement==="top","drawer--end":this.placement==="end","drawer--bottom":this.placement==="bottom","drawer--start":this.placement==="start","drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--rtl":this.localize.dir()==="rtl","drawer--has-footer":this.hasSlotController.test("footer")})}
+      >
+        <div part="overlay" class="drawer__overlay" @click=${()=>this.requestClose("overlay")} tabindex="-1"></div>
+
+        <div
+          part="panel"
+          class="drawer__panel"
+          role="dialog"
+          aria-modal="true"
+          aria-hidden=${this.open?"false":"true"}
+          aria-label=${v(this.noHeader?this.label:void 0)}
+          aria-labelledby=${v(this.noHeader?void 0:"title")}
+          tabindex="0"
+        >
+          ${this.noHeader?"":f`
+                  <header part="header" class="drawer__header">
+                    <h2 part="title" class="drawer__title" id="title">
+                      <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
+                      <slot name="label"> ${this.label.length>0?this.label:"\uFEFF"} </slot>
+                    </h2>
+                    <div part="header-actions" class="drawer__header-actions">
+                      <slot name="header-actions"></slot>
+                      <lynk-icon-button
+                        part="close-button"
+                        exportparts="base:close-button__base"
+                        class="drawer__close"
+                        name="x-lg"
+                        label=${this.localize.term("close")}
+                        library="system"
+                        @click=${()=>this.requestClose("close-button")}
+                      ></lynk-icon-button>
+                    </div>
+                  </header>
+                `}
+
+          <slot part="body" class="drawer__body"></slot>
+
+          <footer part="footer" class="drawer__footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `}};t.styles=[C,T],t.dependencies={"lynk-icon-button":E},i([c(".drawer")],t.prototype,"drawer",2),i([c(".drawer__panel")],t.prototype,"panel",2),i([c(".drawer__overlay")],t.prototype,"overlay",2),i([s({type:Boolean,reflect:!0})],t.prototype,"open",2),i([s({reflect:!0})],t.prototype,"label",2),i([s({reflect:!0})],t.prototype,"placement",2),i([s({type:Boolean,reflect:!0})],t.prototype,"contained",2),i([s({attribute:"no-header",type:Boolean,reflect:!0})],t.prototype,"noHeader",2),i([y("open",{waitUntilFirstUpdate:!0})],t.prototype,"handleOpenChange",1),i([y("contained",{waitUntilFirstUpdate:!0})],t.prototype,"handleNoModalChange",1);a("drawer.showTop",{keyframes:[{opacity:0,translate:"0 -100%"},{opacity:1,translate:"0 0"}],options:{duration:250,easing:"ease"}});a("drawer.hideTop",{keyframes:[{opacity:1,translate:"0 0"},{opacity:0,translate:"0 -100%"}],options:{duration:250,easing:"ease"}});a("drawer.showEnd",{keyframes:[{opacity:0,translate:"100%"},{opacity:1,translate:"0"}],rtlKeyframes:[{opacity:0,translate:"-100%"},{opacity:1,translate:"0"}],options:{duration:250,easing:"ease"}});a("drawer.hideEnd",{keyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"100%"}],rtlKeyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"-100%"}],options:{duration:250,easing:"ease"}});a("drawer.showBottom",{keyframes:[{opacity:0,translate:"0 100%"},{opacity:1,translate:"0 0"}],options:{duration:250,easing:"ease"}});a("drawer.hideBottom",{keyframes:[{opacity:1,translate:"0 0"},{opacity:0,translate:"0 100%"}],options:{duration:250,easing:"ease"}});a("drawer.showStart",{keyframes:[{opacity:0,translate:"-100%"},{opacity:1,translate:"0"}],rtlKeyframes:[{opacity:0,translate:"100%"},{opacity:1,translate:"0"}],options:{duration:250,easing:"ease"}});a("drawer.hideStart",{keyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"-100%"}],rtlKeyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"100%"}],options:{duration:250,easing:"ease"}});a("drawer.denyClose",{keyframes:[{scale:1},{scale:1.01},{scale:1}],options:{duration:250}});a("drawer.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:250}});a("drawer.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:250}});export{t as a};

package/cdn/chunks/chunk.KSPRATXR.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.MMWL43VX.js";import*as n from"react";import{createComponent as t}from"@lit/react";import"@lit/react";var v="lynk-number-input";e.define("lynk-number-input");var s=t({tagName:v,elementClass:e,react:n,events:{EvBlur:"ev-blur",EvChange:"ev-change",EvFocus:"ev-focus",EvInput:"ev-input",EvInvalid:"ev-invalid"},displayName:"LynkNumberInput"}),m=s;export{m as a};

package/cdn/chunks/chunk.L64QPZXF.js

@@ -0,0 +1,421 @@
+import{a as e}from"./chunk.QRMWQQRW.js";var t=e`
+  :host {
+    display: block;
+    /* Prevent inheriting --border-color from parent components */
+    --border-color: initial;
+  }
+
+  :host([data-user-invalid]:not([disabled])),
+  :host([state='error']:not([disabled])) {
+    --border-color: var(--lynk-color-danger);
+    --focus-color: color-mix(in oklab, var(--lynk-color-danger) 50%, transparent);
+  }
+
+  :host([state='warning']) {
+    --border-color: var(--lynk-color-warning);
+    --focus-color: color-mix(in oklab, var(--lynk-color-warning) 50%, transparent);
+  }
+
+  :host([state='success']) {
+    --border-color: var(--lynk-color-success);
+    --focus-color: color-mix(in oklab, var(--lynk-color-success) 50%, transparent);
+  }
+
+  :host([readonly]) {
+    --border-color: var(--lynk-color-neutral-200);
+    --focus-color: transparent;
+  }
+
+  :host([readonly]) .select--standard.select--focused .select__combobox {
+    --border-color: var(--lynk-color-neutral-400);
+    box-shadow: none;
+  }
+
+  /** The popup */
+  .select {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .select::part(popup) {
+    z-index: var(--lynk-z-index-dropdown);
+  }
+
+  .select[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .select[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  ::slotted(lynk-input) {
+    padding: 0 var(--lynk-spacing-x-small);
+    margin-bottom: var(--lynk-spacing-x-small);
+  }
+
+  ::slotted(lynk-spinner) {
+    display: block;
+    margin: var(--lynk-spacing-x-small) auto;
+  }
+
+  /* Combobox */
+  .select__combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    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;
+    overflow: hidden;
+    cursor: pointer;
+    transition:
+      var(--lynk-transition-fast) color,
+      var(--lynk-transition-fast) border,
+      var(--lynk-transition-fast) box-shadow,
+      var(--lynk-transition-fast) background-color;
+  }
+
+  .select__display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--lynk-input-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .select__display-input::placeholder {
+    color: var(--lynk-input-placeholder-color);
+  }
+
+  .select:not(.select--disabled):hover .select__display-input {
+    color: var(--lynk-input-color-hover);
+  }
+
+  .select__display-input:focus {
+    outline: none;
+  }
+
+  /* Visually hide the display input when multiple is enabled */
+  .select--multiple:not(.select--placeholder-visible) .select__display-input {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  .select__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .select__tags {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-inline-start: var(--lynk-spacing-2x-small);
+  }
+
+  .select__tags::slotted(lynk-tag) {
+    cursor: pointer !important;
+  }
+
+  .select--disabled .select__tags,
+  .select--disabled .select__tags::slotted(lynk-tag) {
+    cursor: not-allowed !important;
+  }
+
+  /* Standard selects */
+  .select--standard .select__combobox {
+    background-color: var(--lynk-input-background-color);
+    border: solid var(--lynk-input-border-width) var(--border-color, var(--lynk-input-border-color));
+  }
+
+  .select--standard.select--disabled .select__combobox {
+    background-color: var(--lynk-input-background-color-disabled);
+    border-color: var(--lynk-input-border-color-disabled);
+    color: var(--lynk-input-color-disabled);
+    opacity: 0.75;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .select--standard:not(.select--disabled).select--open .select__combobox,
+  .select--standard:not(.select--disabled).select--focused .select__combobox {
+    background-color: var(--lynk-input-background-color-focus);
+    border-color: var(--border-color, var(--lynk-input-border-color-focus));
+    box-shadow: 0 0 0 var(--lynk-focus-ring-width) var(--focus-color, var(--lynk-input-focus-ring-color));
+  }
+
+  /* Filled selects */
+  .select--filled .select__combobox {
+    border: none;
+    background-color: var(--lynk-input-filled-background-color);
+    color: var(--lynk-input-color);
+  }
+
+  .select--filled:hover:not(.select--disabled) .select__combobox {
+    background-color: var(--lynk-input-filled-background-color-hover);
+  }
+
+  .select--filled.select--disabled .select__combobox {
+    background-color: var(--lynk-input-filled-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .select--filled:not(.select--disabled).select--open .select__combobox,
+  .select--filled:not(.select--disabled).select--focused .select__combobox {
+    background-color: var(--lynk-input-filled-background-color-focus);
+    outline: var(--lynk-focus-ring);
+  }
+
+  /* Sizes */
+  .select--small .select__combobox {
+    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: 0;
+    padding-inline: var(--lynk-input-spacing-small);
+  }
+
+  .select--small .select__clear {
+    margin-inline-start: var(--lynk-input-spacing-small);
+  }
+
+  .select--small .select__prefix::slotted(*) {
+    margin-inline-end: var(--lynk-input-spacing-small);
+  }
+  .select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
+    margin-inline-start: var(--lynk-input-spacing-small);
+  }
+
+  .select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
+    padding-block: 2px;
+    padding-inline-start: 0;
+  }
+
+  .select--small .select__tags {
+    gap: 2px;
+  }
+
+  .select--medium .select__combobox {
+    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: 0;
+    padding-inline: var(--lynk-input-spacing-medium);
+  }
+
+  .select--medium .select__clear {
+    margin-inline-start: var(--lynk-input-spacing-medium);
+  }
+
+  .select--medium .select__prefix::slotted(*) {
+    margin-inline-end: var(--lynk-input-spacing-medium);
+  }
+
+  .select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
+    margin-inline-start: var(--lynk-input-spacing-medium);
+  }
+
+  .select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
+    padding-inline-start: 0;
+    padding-block: 3px;
+  }
+
+  .select--medium .select__tags {
+    gap: 3px;
+  }
+
+  .select--large .select__combobox {
+    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: 0;
+    padding-inline: var(--lynk-input-spacing-large);
+  }
+
+  .select--large .select__clear {
+    margin-inline-start: var(--lynk-input-spacing-large);
+  }
+
+  .select--large .select__prefix::slotted(*) {
+    margin-inline-end: var(--lynk-input-spacing-large);
+  }
+
+  .select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
+    margin-inline-start: var(--lynk-input-spacing-large);
+  }
+
+  .select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
+    padding-inline-start: 0;
+    padding-block: 4px;
+  }
+
+  .select--large .select__tags {
+    gap: 4px;
+  }
+
+  /* Pills */
+  .select--pill.select--small .select__combobox {
+    border-radius: var(--lynk-input-height-small);
+  }
+
+  .select--pill.select--medium .select__combobox {
+    border-radius: var(--lynk-input-height-medium);
+  }
+
+  .select--pill.select--large .select__combobox {
+    border-radius: var(--lynk-input-height-large);
+  }
+
+  /* Prefix and Suffix */
+  .select__prefix,
+  .select__suffix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--lynk-input-placeholder-color);
+  }
+
+  .select__suffix::slotted(*) {
+    margin-inline-start: var(--lynk-spacing-small);
+  }
+
+  /* Clear button */
+  .select__clear {
+    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;
+  }
+
+  .select__clear:hover {
+    color: var(--lynk-input-icon-color-hover);
+  }
+
+  .select__clear:focus {
+    outline: none;
+  }
+
+  /* Expand icon */
+  .select__expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--lynk-transition-medium) rotate ease;
+    rotate: 0;
+    margin-inline-start: var(--lynk-spacing-small);
+  }
+
+  .select--open .select__expand-icon {
+    rotate: -180deg;
+  }
+
+  .select--readonly .select__combobox {
+    cursor: default;
+  }
+
+  .select--readonly .select__expand-icon {
+    color: var(--lynk-color-neutral-300);
+  }
+
+  /* Listbox */
+  .select__listbox {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    position: relative;
+    font-family: var(--lynk-font-sans);
+    font-size: var(--lynk-font-size-medium);
+    font-weight: var(--lynk-font-weight-normal);
+    box-shadow: var(--lynk-shadow-large);
+    background: var(--lynk-panel-background-color);
+    border: solid var(--lynk-panel-border-width) var(--lynk-panel-border-color);
+    border-radius: var(--lynk-border-radius-medium);
+    padding: var(--lynk-spacing-2x-small);
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+  }
+
+  .select__listbox ::slotted(lynk-divider) {
+    --spacing: var(--lynk-spacing-x-small);
+  }
+
+  .select__listbox ::slotted(small) {
+    font-size: var(--lynk-font-size-small);
+    font-weight: var(--lynk-font-weight-semibold);
+    color: var(--lynk-color-neutral-500);
+    padding-block: var(--lynk-spacing-x-small);
+    padding-inline: var(--lynk-spacing-x-large);
+  }
+
+  /*
+   * Restricted
+   */
+  .select--restricted {
+    opacity: 1 !important;
+  }
+
+  .select--restricted .select__combobox {
+    border-color: transparent;
+    cursor: initial;
+    gap: 0;
+  }
+
+  .select--restricted .select__combobox,
+  .select--restricted .select__tags {
+    padding: 0;
+    margin-inline-start: 0;
+    user-select: text;
+  }
+
+  .select--restricted .select__expand-icon {
+    display: none;
+  }
+
+  .select--restricted .select__expand-icon {
+    display: none;
+  }
+
+  .select--restricted lynk-tag::part(base) {
+    cursor: text;
+    user-select: text;
+  }
+`;export{t as a};

package/cdn/chunks/chunk.LBWOOW5Q.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.DZOU3KX7.js";import*as t from"react";import{createComponent as n}from"@lit/react";import"@lit/react";var o="lynk-tree";e.define("lynk-tree");var r=n({tagName:o,elementClass:e,react:t,events:{EvSelectionChange:"ev-selection-change"},displayName:"LynkTree"}),s=r;export{s as a};