@uplynk/lynk-design 1.13.0 → 1.15.0

package/cdn/chunks/chunk.62RFTP6A.js

@@ -0,0 +1,45 @@
+import{a as r}from"./chunk.OAB62Q2Y.js";var l=r`
+  :host {
+    display: contents;
+    --spacing: var(--lynk-spacing-small);
+    --divider: 1px solid var(--lynk-color-neutral-200);
+  }
+
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing);
+  }
+
+  .accordion--flush {
+    gap: 0;
+  }
+
+  .accordion--flush::slotted(lynk-panel),
+  .accordion--square::slotted(lynk-panel) {
+    --border-radius: 0;
+  }
+
+  .accordion--flush::slotted(lynk-panel:first-child) {
+    --border-radius: var(--lynk-border-radius-large) var(--lynk-border-radius-large) 0 0;
+  }
+
+  .accordion--flush::slotted(lynk-panel:last-child) {
+    --border-radius: 0 0 var(--lynk-border-radius-large) var(--lynk-border-radius-large);
+  }
+
+  .accordion--flush::slotted(lynk-panel) {
+    border-top: var(--divider);
+  }
+  .accordion--flush::slotted(lynk-panel:first-child) {
+    border-top: none;
+  }
+
+  .accordion--compact {
+    gap: var(--lynk-spacing-x-small);
+  }
+
+  .accordion--comfy {
+    gap: var(--lynk-spacing-medium);
+  }
+`;export{l as a};

package/cdn/chunks/chunk.6COQASIO.js

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

package/cdn/chunks/chunk.6ECHUA6M.js

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

package/cdn/chunks/chunk.6GMOJ3NF.js

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

package/cdn/chunks/chunk.6IV433DB.js

@@ -0,0 +1,576 @@
+import{a as o}from"./chunk.OAB62Q2Y.js";var r=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-800);
+    --lynk-color-on-normal: var(--lynk-color-neutral-800);
+    --lynk-color-on-quiet: var(--lynk-color-neutral-800);
+  }
+
+  .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 {
+        color: var(--lynk-color-on-quiet, var(--lynk-color-neutral-on-quiet));
+        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-quiet, var(--lynk-color-neutral-on-quiet));
+      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 {
+        color: var(--lynk-color-on-quiet, var(--lynk-color-neutral-on-quiet));
+        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-quiet, var(--lynk-color-neutral-on-quiet));
+      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 {
+        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-hover)
+        );
+      }
+    }
+    .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-700);
+        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-700);
+      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{r as a};

package/cdn/chunks/chunk.6KT6T467.js

@@ -0,0 +1,46 @@
+import{a as o}from"./chunk.OAB62Q2Y.js";var t=o`
+  :host {
+    --error-color: var(--lynk-color-danger);
+    --success-color: var(--lynk-color-success);
+
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  .copy-button__button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: var(--lynk-border-radius-medium);
+    font-size: var(--lynk-font-size-base);
+    line-height: 1;
+    color: inherit;
+    padding: var(--lynk-spacing-2x-small);
+    cursor: pointer;
+    transition: var(--lynk-transition-x-fast) color;
+  }
+
+  .copy-button--success .copy-button__button {
+    color: var(--success-color);
+  }
+
+  .copy-button--error .copy-button__button {
+    color: var(--error-color);
+  }
+
+  .copy-button__button:focus-visible {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  .copy-button__button[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed !important;
+  }
+
+  slot {
+    display: inline-flex;
+  }
+`;export{t as a};

package/cdn/chunks/chunk.6M35VZW7.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.2NEFR4ZE.js";var d=e;e.define("lynk-badge");export{d as a};

package/cdn/chunks/chunk.6QMT2NK7.js

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

package/cdn/chunks/chunk.6UGEFC7C.js

@@ -0,0 +1,16 @@
+import{a as o}from"./chunk.OAB62Q2Y.js";var i=o`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+`;export{i as a};