@uplynk/lynk-design 1.14.0 → 1.15.0

package/cdn/chunks/chunk.3XR57SDQ.js

@@ -0,0 +1,292 @@
+import{a as r}from"./chunk.OAB62Q2Y.js";var o=r`
+  :host {
+    --border-color: var(--lynk-color-neutral-200);
+    --border-radius: var(--lynk-border-radius-large);
+    --border-width: 1px;
+    --padding: var(--lynk-spacing-base);
+    --pulse-speed: 1.5s;
+    --state-color: var(--lynk-color-primary);
+    --background-color: var(--lynk-color-neutral-50);
+
+    display: inline-block;
+  }
+
+  /* Appearance modifiers */
+  :host([appearance~='plain']) .card {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  :host([appearance~='outlined']) .card {
+    border-color: var(--border-color);
+  }
+
+  :host([appearance~='filled']) .card {
+    background-color: var(--background-color);
+    border-color: transparent;
+  }
+
+  :host([appearance~='filled'][appearance~='outlined']) .card {
+    border-color: var(--border-color);
+    background-color: var(--background-color);
+  }
+
+  :host([appearance~='accent']) .card {
+    color: var(--lynk-color-black);
+    background-color: var(--lynk-color-white);
+    border-color: transparent;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    font-size: inherit;
+    line-height: var(--lynk-line-height-dense);
+    background-color: transparent;
+    box-shadow: var(--lynk-shadow-x-small);
+    border: solid var(--border-width) var(--border-color);
+    border-radius: var(--border-radius);
+    line-height: var(--lynk-line-height-dense);
+    transition:
+      var(--lynk-transition-fast) border,
+      var(--lynk-transition-fast) box-shadow,
+      var(--lynk-transition-fast) transform,
+      var(--lynk-transition-fast) background;
+  }
+
+  .card--stealth {
+    --border-color: transparent;
+  }
+
+  .card--small {
+    --padding: var(--lynk-spacing-x-small);
+    font-size: var(--lynk-font-size-small);
+  }
+
+  .card--medium {
+    font-size: var(--lynk-font-size-medium);
+  }
+
+  .card--large {
+    --padding: var(--lynk-spacing-large);
+    font-size: var(--lynk-font-size-large);
+  }
+
+  /* Primary State */
+  .card--primary {
+    --state-color: var(--lynk-color-primary);
+    border: solid var(--border-width) var(--state-color) !important;
+  }
+
+  /* Accent State */
+  .card--accent {
+    --state-color: var(--lynk-color-accent);
+    border: solid var(--border-width) var(--state-color) !important;
+  }
+
+  /* Danger State */
+  .card--danger {
+    --state-color: var(--lynk-color-danger);
+    border: solid var(--border-width) var(--state-color) !important;
+  }
+
+  /* Warning State */
+  .card--warning {
+    --state-color: var(--lynk-color-warning);
+    border: solid var(--border-width) var(--state-color) !important;
+  }
+
+  /* Success State */
+  .card--success {
+    --state-color: var(--lynk-color-success);
+    border: solid var(--border-width) var(--state-color) !important;
+  }
+
+  /* Info State */
+  .card--info {
+    --state-color: var(--lynk-color-info);
+    border: solid var(--border-width) var(--state-color) !important;
+  }
+
+  /* Neutral State */
+  .card--neutral {
+    --state-color: var(--lynk-color-neutral);
+    border: solid var(--border-width) var(--state-color) !important;
+  }
+
+  .card--pulse {
+    animation: pulse var(--pulse-speed) infinite;
+  }
+
+  .card--pulse.card--interactive:hover {
+    animation: none;
+  }
+
+  .card--interactive:hover {
+    cursor: pointer;
+    border: solid var(--border-width) var(--state-color) !important;
+    box-shadow: var(--lynk-shadow-medium);
+  }
+  .card--interactive:active {
+    transform: translateY(-4px);
+    box-shadow: var(--lynk-shadow-large);
+  }
+
+  .card--active {
+    border: solid var(--border-width) var(--state-color) !important;
+    box-shadow: var(--lynk-shadow-large);
+  }
+
+  .card--image-only .card__image {
+    border-radius: var(--border-radius);
+  }
+
+  .card__image-block {
+    position: relative;
+    border: 1px solid transparent;
+  }
+
+  .card__image {
+    display: flex;
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+    margin: calc(-1 * var(--border-width));
+    background-color: var(--lynk-color-black);
+    overflow: hidden;
+  }
+
+  .card__image-block.aspect--1-1 .card__image {
+    aspect-ratio: 1 / 1;
+  }
+
+  .card__image-block.aspect--16-9 .card__image {
+    aspect-ratio: 16 / 9;
+  }
+
+  .card__image-block.aspect--21-9 .card__image {
+    aspect-ratio: 21 / 9;
+  }
+
+  .card__image-block.aspect--4-3 .card__image {
+    aspect-ratio: 4 / 3;
+  }
+
+  .card__image-block.aspect--3-4 .card__image {
+    aspect-ratio: 3 / 4;
+  }
+
+  .card__image-block.aspect--9-16 .card__image {
+    aspect-ratio: 9 / 16;
+  }
+
+  .card__image ::slotted(img) {
+    display: block;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  .card:not(.card--has-image) .card__image {
+    display: none;
+  }
+
+  .card__image-top-start,
+  .card__image-top-end,
+  .card__image-bottom-start,
+  .card__image-bottom-end {
+    position: absolute;
+    display: inline-flex;
+  }
+
+  .card__image-top-start {
+    top: var(--padding);
+    left: var(--padding);
+  }
+
+  .card__image-top-end {
+    top: var(--padding);
+    right: var(--padding);
+  }
+
+  .card__image-bottom-start {
+    bottom: var(--padding);
+    left: var(--padding);
+  }
+
+  .card__image-bottom-end {
+    bottom: var(--padding);
+    right: var(--padding);
+  }
+
+  .card__header {
+    display: block;
+    border-bottom: solid var(--border-width) var(--border-color);
+    padding: calc(var(--padding) / 2) var(--padding);
+  }
+
+  .card:not(.card--has-header) .card__header {
+    display: none;
+  }
+
+  .card:not(.card--has-image) .card__header {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+  }
+
+  .card__body {
+    display: block;
+    padding: var(--padding);
+  }
+
+  .card--has-footer .card__footer {
+    display: block;
+    border-top: solid var(--border-width) var(--border-color);
+    padding: var(--padding);
+  }
+
+  .card:not(.card--has-footer) .card__footer {
+    display: none;
+  }
+
+  .card--stealth {
+    background-color: transparent;
+    border-color: transparent;
+    gap: var(--padding);
+  }
+
+  .card--stealth.card--interactive {
+    padding: var(--padding);
+  }
+
+  .card--stealth .card__image {
+    border-radius: var(--border-radius);
+  }
+
+  .card--stealth .card__footer,
+  .card--stealth .card__header,
+  .card--stealth .card__body {
+    padding: 0;
+  }
+
+  .card--stealth.card--interactive:hover {
+    background-color: var(--lynk-panel-background-color) !important;
+    border-color: var(--border-color) !important;
+  }
+
+  .card--stealth.card--active,
+  .card--stealth.card--active:hover {
+    border-color: var(--state-color) !important;
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--state-color);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+`;export{o as a};

package/cdn/chunks/chunk.4352QCNJ.js

@@ -0,0 +1 @@
+import{c as m,d as h,e as D,f as b,g as y}from"./chunk.HAL4HZQO.js";import{a as w,b as V,c as A}from"./chunk.N5VZIW5Z.js";import{g as k}from"./chunk.OAB62Q2Y.js";var j=(s,f,c)=>{let p=new Map;for(let e=f;e<=c;e++)p.set(s[e],e);return p},L=V(class extends A{constructor(s){if(super(s),s.type!==w.CHILD)throw Error("repeat() can only be used in text expressions")}dt(s,f,c){let p;c===void 0?c=f:f!==void 0&&(p=f);let e=[],n=[],o=0;for(let a of s)e[o]=p?p(a,o):o,n[o]=c(a,o),o++;return{values:n,keys:e}}render(s,f,c){return this.dt(s,f,c).values}update(s,[f,c,p]){var C;let e=b(s),{values:n,keys:o}=this.dt(f,c,p);if(!Array.isArray(e))return this.ut=o,n;let a=(C=this.ut)!=null?C:this.ut=[],u=[],v,g,t=0,l=e.length-1,r=0,i=n.length-1;for(;t<=l&&r<=i;)if(e[t]===null)t++;else if(e[l]===null)l--;else if(a[t]===o[r])u[r]=h(e[t],n[r]),t++,r++;else if(a[l]===o[i])u[i]=h(e[l],n[i]),l--,i--;else if(a[t]===o[i])u[i]=h(e[t],n[i]),m(s,u[i+1],e[t]),t++,i--;else if(a[l]===o[r])u[r]=h(e[l],n[r]),m(s,e[t],e[l]),l--,r++;else if(v===void 0&&(v=j(o,r,i),g=j(a,t,l)),v.has(a[t]))if(v.has(a[l])){let d=g.get(o[r]),x=d!==void 0?e[d]:null;if(x===null){let P=m(s,e[t]);h(P,n[r]),u[r]=P}else u[r]=h(x,n[r]),m(s,e[t],x),e[d]=null;r++}else y(e[l]),l--;else y(e[t]),t++;for(;r<=i;){let d=m(s,u[i+1]);h(d,n[r]),u[r++]=d}for(;t<=l;){let d=e[t++];d!==null&&y(d)}return this.ut=o,D(s,u),k}});export{L as a};

package/cdn/chunks/chunk.4352QCNJ.js.LEGAL.txt

@@ -0,0 +1,8 @@
+Bundled license information:
+
+lit-html/directives/repeat.js:
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */

package/cdn/chunks/chunk.4BFHZIHL.js

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

package/cdn/chunks/chunk.4BMTALKR.js

@@ -0,0 +1,182 @@
+import{a as o}from"./chunk.OAB62Q2Y.js";var e=o`
+  :host {
+    display: inline-block;
+  }
+
+  .checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-start;
+    font-family: var(--lynk-input-font-family);
+    font-weight: var(--lynk-input-font-weight);
+    color: var(--lynk-input-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .checkbox--small {
+    --toggle-size: var(--lynk-toggle-size-small);
+    font-size: var(--lynk-input-label-font-size-small);
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--lynk-toggle-size-medium);
+    font-size: var(--lynk-input-label-font-size-medium);
+  }
+
+  .checkbox--large {
+    --toggle-size: var(--lynk-toggle-size-large);
+    font-size: var(--lynk-input-label-font-size-large);
+  }
+
+  .checkbox__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+    border: solid var(--lynk-input-border-width) var(--lynk-input-border-color);
+    border-radius: 2px;
+    background-color: var(--lynk-input-background-color);
+    color: var(--lynk-color-neutral-0);
+    transition:
+      var(--lynk-transition-fast) border-color,
+      var(--lynk-transition-fast) background-color,
+      var(--lynk-transition-fast) color,
+      var(--lynk-transition-fast) box-shadow;
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .checkbox__checked-icon,
+  .checkbox__indeterminate-icon {
+    display: inline-flex;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+  }
+
+  /* Hover */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--lynk-input-border-color-hover);
+    background-color: var(--lynk-input-background-color-hover);
+  }
+
+  /* Focus */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox--checked .checkbox__control,
+  .checkbox--indeterminate .checkbox__control {
+    border-color: var(--lynk-color-primary-600);
+    background-color: var(--lynk-color-primary-600);
+  }
+
+  /* Checked/indeterminate + hover */
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--lynk-color-primary-500);
+    background-color: var(--lynk-color-primary-500);
+  }
+
+  /* Checked/indeterminate + focus */
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  /* Disabled */
+  .checkbox--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .checkbox--has-label .checkbox__label {
+    margin-inline-start: 0.5em;
+  }
+
+  .checkbox__label {
+    display: inline-block;
+    color: var(--lynk-input-label-color);
+    font-size: inherit;
+    line-height: var(--toggle-size);
+    user-select: none;
+  }
+
+  :host([required]) .checkbox__label::after {
+    content: var(--lynk-input-required-content);
+    margin-inline-start: var(--lynk-input-required-content-offset);
+  }
+
+  /*
+   * Error & Warning States
+   */
+
+  .checkbox--has-error .checkbox__control,
+  .checkbox--has-error:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--lynk-color-danger-500);
+  }
+
+  .checkbox--has-error.checkbox--focused:not(.checkbox--disabled) .checkbox__control {
+    border-color: var(--lynk-color-danger-500);
+    box-shadow: 0 0 2px var(--lynk-focus-ring-width) var(--lynk-color-danger-a50);
+  }
+
+  .checkbox--has-error .checkbox__label {
+    color: var(--lynk-color-danger-500);
+  }
+
+  .checkbox--has-error.checkbox--checked .checkbox__control {
+    background-color: var(--lynk-color-success-500);
+    outline: none;
+  }
+
+  .checkbox--has-warning .checkbox__control,
+  .checkbox--has-warning:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--lynk-color-warning-500);
+  }
+
+  .checkbox--has-warning.checkbox--focused:not(.checkbox--disabled) .checkbox__control {
+    border-color: var(--lynk-color-warning-500);
+    box-shadow: 0 0 2px var(--lynk-focus-ring-width) var(--lynk-color-warning-a50);
+  }
+
+  .checkbox--has-warning .checkbox__label {
+    color: var(--lynk-color-warning-500);
+  }
+
+  .checkbox--has-warning.checkbox--checked .checkbox__control {
+    background-color: var(--lynk-color-warning-500);
+    outline: none;
+  }
+
+  .checkbox--has-success .checkbox__control,
+  .checkbox--has-success:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--lynk-color-success-500);
+  }
+
+  .checkbox--has-success.checkbox--focused:not(.checkbox--disabled) .checkbox__control {
+    border-color: var(--lynk-color-success-500);
+    box-shadow: 0 0 2px var(--lynk-focus-ring-width) var(--lynk-color-success-a50);
+  }
+
+  .checkbox--has-success .checkbox__label {
+    color: var(--lynk-color-success-500);
+  }
+
+  .checkbox--has-success.checkbox--checked .checkbox__control {
+    background-color: var(--lynk-color-success-500);
+    outline: none;
+  }
+`;export{e as a};

package/cdn/chunks/chunk.4JSXOS5P.js

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

package/cdn/chunks/chunk.4KNLNO2M.js

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

package/cdn/chunks/chunk.4KRQKHY7.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.RQMH5M6H.js";import*as t from"react";import{createComponent as n}from"@lit/react";import"@lit/react";var o="lynk-popover";e.define("lynk-popover");var v=n({tagName:o,elementClass:e,react:t,events:{EvShow:"ev-show",EvAfterShow:"ev-after-show",EvHide:"ev-hide",EvAfterHide:"ev-after-hide"},displayName:"LynkPopover"}),m=v;export{m as a};

package/cdn/chunks/chunk.4KWVPALS.js

@@ -0,0 +1,13 @@
+import{a as t}from"./chunk.OAB62Q2Y.js";var h=t`
+  :host {
+    display: block;
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  ::slotted(lynk-splitter) {
+    width: 100%;
+    height: 100%;
+  }
+`;export{h as a};

package/cdn/chunks/chunk.4M2E6JJO.js

@@ -0,0 +1,141 @@
+import{a as o}from"./chunk.OAB62Q2Y.js";var t=o`
+  :host {
+    display: inline-block;
+    --max-width: fit-content(20em);
+    --padding: var(--lynk-spacing-x-small);
+  }
+
+  .icon-button {
+    flex: 0 0 auto;
+    display: flex;
+    max-width: var(--max-width);
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: var(--lynk-border-radius-medium);
+    font-size: inherit;
+    color: var(--lynk-color-neutral-600);
+    padding: var(--padding);
+    cursor: pointer;
+    transition: var(--lynk-transition-medium) color;
+    -webkit-appearance: none;
+  }
+
+  .icon-button:hover:not(.icon-button--disabled),
+  .icon-button:focus:not(.icon-button--disabled) {
+    color: var(--lynk-color-primary-600);
+  }
+
+  .icon-button:active:not(.icon-button--disabled) {
+    color: var(--lynk-color-primary-700);
+  }
+
+  .icon-button:focus {
+    outline: none;
+  }
+
+  .icon-button--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .icon-button:focus-visible {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  .icon-button__icon {
+    pointer-events: none;
+  }
+
+  /* Primary */
+  .icon-button.icon-button--primary {
+    color: var(--lynk-color-primary-600);
+  }
+
+  .icon-button.icon-button--primary:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--primary:focus:not(.icon-button--disabled) {
+    color: var(--lynk-color-primary-500);
+  }
+
+  .icon-button.icon-button--primary:active:not(.icon-button--disabled) {
+    color: var(--lynk-color-primary-700);
+  }
+
+  /* Success */
+  .icon-button.icon-button--success {
+    color: var(--lynk-color-success-600);
+  }
+
+  .icon-button.icon-button--success:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--success:focus:not(.icon-button--disabled) {
+    color: var(--lynk-color-success-500);
+  }
+
+  .icon-button.icon-button--success:active:not(.icon-button--disabled) {
+    color: var(--lynk-color-success-700);
+  }
+
+  /* Neutral */
+  .icon-button.icon-button--neutral {
+    color: var(--lynk-color-neutral-600);
+  }
+
+  .icon-button.icon-button--neutral:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--neutral:focus:not(.icon-button--disabled) {
+    color: var(--lynk-color-neutral-500);
+  }
+
+  .icon-button.icon-button--neutral:active:not(.icon-button--disabled) {
+    color: var(--lynk-color-neutral-700);
+  }
+
+  /* Warning */
+  .icon-button.icon-button--warning {
+    color: var(--lynk-color-warning-600);
+  }
+
+  .icon-button.icon-button--warning:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--warning:focus:not(.icon-button--disabled) {
+    color: var(--lynk-color-warning-500);
+  }
+
+  .icon-button.icon-button--warning:active:not(.icon-button--disabled) {
+    color: var(--lynk-color-warning-700);
+  }
+
+  /* Danger */
+  .icon-button.icon-button--danger {
+    color: var(--lynk-color-danger-600);
+  }
+
+  .icon-button.icon-button--danger:hover:not(.icon-button--disabled),
+  .icon-button.icon-button--danger:focus:not(.icon-button--disabled) {
+    color: var(--lynk-color-danger-500);
+  }
+
+  .icon-button.icon-button--danger:active:not(.icon-button--disabled) {
+    color: var(--lynk-color-danger-700);
+  }
+
+  .icon-button--has-prefix .icon-button__prefix {
+    display: inline;
+  }
+
+  .icon-button--has-suffix .icon-button__suffix {
+    display: inline;
+  }
+
+  .icon-button__prefix,
+  .icon-button__suffix {
+    padding: var(--padding);
+    min-width: 0;
+    flex: 1;
+    display: none;
+    align-items: center;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;export{t as a};