@uplynk/lynk-design 1.19.1 → 1.20.0

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.DYCL37U7.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.GHLBTKYK.js";var a=e;e.define("lynk-date-time-picker");export{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.E5U4XEEL.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.UIOYXRMK.js";import*as o from"react";import{createComponent as t}from"@lit/react";var a="lynk-page-footer";e.define("lynk-page-footer");var r=t({tagName:a,elementClass:e,react:o,events:{},displayName:"LynkPageFooter"}),p=r;export{p as a};

package/cdn/chunks/chunk.EDQTGCOX.js

@@ -0,0 +1 @@
+import{a as n}from"./chunk.WMI47UCV.js";var t=n;n.define("lynk-icon-button");export{t as a};

package/cdn/chunks/chunk.EGPDKWMG.js

@@ -0,0 +1,31 @@
+import{a as v}from"./chunk.SDWDHYVV.js";import{a as f}from"./chunk.TYF5DW4J.js";import{a as m}from"./chunk.SH54CIFE.js";import{a as p}from"./chunk.IPMWK5EL.js";import{b as c}from"./chunk.V7E6ITFP.js";import{a as u}from"./chunk.TETFNMKN.js";import{a as r}from"./chunk.YZSIY5HS.js";import{a as n}from"./chunk.7TAXE2HP.js";import{a as l,b as a,d as o,g as h}from"./chunk.R5OGGX5Y.js";import{a as d}from"./chunk.MXDME6T6.js";import{d as s}from"./chunk.PINNEFCM.js";import{e as i}from"./chunk.FI4IKBIW.js";var e=class extends h{constructor(){super(...arguments);this.formControlController=new c(this,{value:t=>t.checked?t.value||"on":void 0,defaultValue:t=>t.defaultChecked,setValue:(t,C)=>t.checked=C});this.hasFocus=!1;this.title="";this.name="";this.size="medium";this.color="default";this.disabled=!1;this.checked=!1;this.defaultChecked=!1;this.form="";this.required=!1}get validity(){return this.input.validity}get validationMessage(){return this.input.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("ev-blur")}handleInput(){this.emit("ev-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}handleClick(){this.checked=!this.checked,this.emit("ev-change")}handleFocus(){this.hasFocus=!0,this.emit("ev-focus")}handleKeyDown(t){t.key==="ArrowLeft"&&(t.preventDefault(),this.checked=!1,this.emit("ev-change"),this.emit("ev-input")),t.key==="ArrowRight"&&(t.preventDefault(),this.checked=!0,this.emit("ev-change"),this.emit("ev-input"))}handleCheckedChange(){this.input.checked=this.checked,this.formControlController.updateValidity()}handleDisabledChange(){this.formControlController.setValidity(!0)}click(){this.input.click()}focus(t){this.input.focus(t)}blur(){this.input.blur()}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}render(){return s`
+      <label
+        part="base"
+        class=${n({switch:!0,"switch--checked":this.checked,"switch--disabled":this.disabled,"switch--focused":this.hasFocus,"switch--success":this.color==="success","switch--warning":this.color==="warning","switch--danger":this.color==="danger","switch--small":this.size==="small","switch--medium":this.size==="medium","switch--large":this.size==="large"})}
+      >
+        <input
+          class="switch__input"
+          type="checkbox"
+          title=${this.title}
+          name=${this.name}
+          value=${u(this.value)}
+          .checked=${m(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          role="switch"
+          aria-checked=${this.checked?"true":"false"}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @keydown=${this.handleKeyDown}
+        />
+
+        <span part="control" class="switch__control">
+          <span part="thumb" class="switch__thumb"></span>
+        </span>
+
+        <slot part="label" class="switch__label"></slot>
+      </label>
+    `}};e.styles=[d,f,v],i([o('input[type="checkbox"]')],e.prototype,"input",2),i([a()],e.prototype,"hasFocus",2),i([l()],e.prototype,"title",2),i([l()],e.prototype,"name",2),i([l()],e.prototype,"value",2),i([l({reflect:!0})],e.prototype,"size",2),i([l({reflect:!0})],e.prototype,"color",2),i([l({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([l({type:Boolean,reflect:!0})],e.prototype,"checked",2),i([p("checked")],e.prototype,"defaultChecked",2),i([l({reflect:!0})],e.prototype,"form",2),i([l({type:Boolean,reflect:!0})],e.prototype,"required",2),i([r("checked",{waitUntilFirstUpdate:!0})],e.prototype,"handleCheckedChange",1),i([r("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1);export{e as a};