@uplynk/lynk-design 1.19.1 → 1.19.2

package/dist/chunks/chunk.42IA4SOA.js

@@ -0,0 +1,155 @@
+// src/components/menu-item/menu-item.styles.ts
+import { css } from "lit";
+var menu_item_styles_default = css`
+  :host {
+    display: block;
+    --submenu-offset: -2px;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    font-family: var(--lynk-font-sans);
+    font-size: var(--lynk-font-size-medium);
+    font-weight: var(--lynk-font-weight-normal);
+    line-height: var(--lynk-line-height-normal);
+    letter-spacing: var(--lynk-letter-spacing-normal);
+    color: var(--lynk-color-text-quieter);
+    padding: var(--lynk-spacing-2x-small) var(--lynk-spacing-2x-small);
+    transition: var(--lynk-transition-fast) fill;
+    user-select: none;
+    -webkit-user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .menu-item.menu-item--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-item.menu-item--loading {
+    outline: none;
+    cursor: wait;
+  }
+
+  .menu-item.menu-item--loading *:not(lynk-spinner) {
+    opacity: 0.5;
+  }
+
+  .menu-item--loading lynk-spinner {
+    --indicator-color: currentColor;
+    --track-width: 1px;
+    position: absolute;
+    font-size: 0.75em;
+    top: calc(50% - 0.5em);
+    left: 0.65rem;
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .menu-item .menu-item__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--lynk-spacing-x-small);
+  }
+
+  .menu-item .menu-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--lynk-spacing-x-small);
+  }
+
+  /* Safe triangle */
+  .menu-item--submenu-expanded::after {
+    content: '';
+    position: fixed;
+    z-index: calc(var(--lynk-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
+    );
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true'])) .menu-item,
+  :host(:focus-visible) .menu-item,
+  :host(:focus-visible:hover:not([aria-disabled='true'])) .menu-item,
+  .menu-item--submenu-expanded {
+    outline: none;
+    background-color: var(--lynk-color-neutral-200);
+    color: var(--lynk-color-text);
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    visibility: hidden;
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  /* Add elevation and z-index to submenus */
+  lynk-popup::part(popup) {
+    box-shadow: var(--lynk-shadow-large);
+    z-index: var(--lynk-z-index-dropdown);
+    margin-left: var(--submenu-offset);
+  }
+
+  .menu-item--rtl lynk-popup::part(popup) {
+    margin-left: calc(-1 * var(--submenu-offset));
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+
+  ::slotted(lynk-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`;
+
+export {
+  menu_item_styles_default
+};

package/dist/chunks/chunk.43JJHRLX.js

@@ -0,0 +1,11 @@
+import {
+  LynkAvatar
+} from "./chunk.2GSAOENB.js";
+
+// src/components/avatar/avatar.ts
+var avatar_default = LynkAvatar;
+LynkAvatar.define("lynk-avatar");
+
+export {
+  avatar_default
+};

package/dist/chunks/chunk.473E76BB.js

@@ -0,0 +1,60 @@
+import {
+  flank_styles_default
+} from "./chunk.BMKWBL3U.js";
+import {
+  watch
+} from "./chunk.SPANRPKG.js";
+import {
+  LynkElement
+} from "./chunk.QEGXVYYA.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.O6LH3WX2.js";
+
+// src/components/flank/flank.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkFlank = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.start = true;
+    this.end = false;
+    this.align = "center";
+    this.gap = "var(--lynk-spacing-small)";
+  }
+  handleRowChange() {
+    if (this.start) this.end = false;
+  }
+  handleColumnChange() {
+    if (this.end) this.start = false;
+  }
+  render() {
+    return html` <slot part="base" class="flank" style="--gap: ${this.gap};"></slot> `;
+  }
+};
+LynkFlank.styles = [component_styles_default, flank_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkFlank.prototype, "start", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkFlank.prototype, "end", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkFlank.prototype, "align", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LynkFlank.prototype, "gap", 2);
+__decorateClass([
+  watch("start")
+], LynkFlank.prototype, "handleRowChange", 1);
+__decorateClass([
+  watch("end")
+], LynkFlank.prototype, "handleColumnChange", 1);
+
+export {
+  LynkFlank
+};

package/dist/chunks/chunk.4F6WZTG7.js

@@ -0,0 +1,11 @@
+import {
+  LynkSpinner
+} from "./chunk.T6PXGZBC.js";
+
+// src/components/spinner/spinner.ts
+var spinner_default = LynkSpinner;
+LynkSpinner.define("lynk-spinner");
+
+export {
+  spinner_default
+};

package/dist/chunks/chunk.4U2EJ7TH.js

@@ -0,0 +1,11 @@
+import {
+  LynkNavItem
+} from "./chunk.DCC5GSY7.js";
+
+// src/components/nav-item/nav-item.ts
+var nav_item_default = LynkNavItem;
+LynkNavItem.define("lynk-nav-item");
+
+export {
+  nav_item_default
+};

package/dist/chunks/chunk.4WTFBPDV.js

@@ -0,0 +1,196 @@
+// src/components/tree-item/tree-item.styles.ts
+import { css } from "lit";
+var tree_item_styles_default = css`
+  :host {
+    display: block;
+    outline: 0;
+    z-index: 0;
+    --border-radius: var(--lynk-border-radius-medium);
+    --selected-indicator-color: var(--lynk-color-primary);
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  slot:not([name])::slotted(lynk-icon) {
+    margin-inline-end: var(--lynk-spacing-x-small);
+  }
+
+  .tree-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    padding: var(--padding);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .tree-item::before {
+    position: absolute;
+    width: 4px;
+    bottom: -2px;
+    top: -2px;
+    left: -8px;
+    content: '';
+    pointer-events: none;
+    border-radius: var(--border-radius);
+  }
+
+  .tree-item__checkbox {
+    pointer-events: none;
+    margin-inline-end: var(--lynk-spacing-x-small);
+  }
+
+  .tree-item__expand-button,
+  .tree-item__checkbox,
+  .tree-item__label,
+  .tree-item__suffix {
+    font-family: var(--lynk-font-sans);
+    font-size: var(--lynk-font-size-medium);
+    font-weight: var(--lynk-font-weight-normal);
+    line-height: var(--lynk-line-height-dense);
+    letter-spacing: var(--lynk-letter-spacing-normal);
+  }
+
+  .tree-item__checkbox::part(base) {
+    display: flex;
+    align-items: center;
+  }
+
+  .tree-item__indentation {
+    display: block;
+    width: 1em;
+    flex-shrink: 0;
+  }
+
+  .tree-item__expand-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    color: var(--lynk-color-neutral-500);
+    padding: var(--lynk-spacing-x-small) var(--lynk-spacing-2x-small);
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  .tree-item__expand-button {
+    transition: var(--lynk-transition-medium) rotate ease;
+  }
+
+  .tree-item--expanded .tree-item__expand-button {
+    rotate: 90deg;
+  }
+
+  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {
+    rotate: -90deg;
+  }
+
+  .tree-item--expanded slot[name='expand-icon'],
+  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {
+    display: none;
+  }
+
+  .tree-item__expand-button--visible {
+    cursor: pointer;
+  }
+
+  .tree-item__item {
+    display: flex;
+    align-items: center;
+    border-radius: var(--border-radius);
+    margin: var(--gap-size) 0;
+  }
+
+  .tree-item--disabled .tree-item__item {
+    opacity: 0.5;
+    outline: none;
+    cursor: not-allowed;
+  }
+
+  .tree-item--readonly .tree-item__item {
+    cursor: default;
+  }
+
+  :host(:focus-visible) .tree-item__item {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+    z-index: 2;
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+    background-color: var(--lynk-color-neutral-100);
+    border-inline-start-color: var(--lynk-color-primary-600);
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item--selected::before {
+    background-color: var(--selected-indicator-color);
+    display: block;
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item__expand-button {
+    color: var(--lynk-color-neutral-600);
+  }
+
+  .tree-item__label {
+    display: flex;
+    align-items: center;
+    transition: var(--lynk-transition-fast) color;
+  }
+
+  .tree-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    margin-inline-start: auto;
+    margin-inline-end: var(--lynk-spacing-2x-small);
+  }
+
+  .tree-item__suffix::slotted(*) {
+    margin-inline-start: var(--lynk-spacing-x-small);
+  }
+
+  .tree-item__children {
+    display: block;
+    font-size: calc(1em + var(--indent-size, var(--lynk-spacing-medium)));
+  }
+
+  /* Indentation lines */
+  .tree-item__children {
+    position: relative;
+  }
+
+  .tree-item__children::before {
+    content: '';
+    position: absolute;
+    top: var(--indent-guide-offset);
+    bottom: var(--indent-guide-offset);
+    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);
+    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);
+    z-index: 1;
+  }
+
+  .tree-item--rtl .tree-item__children::before {
+    left: auto;
+    right: 1em;
+  }
+
+  @media (forced-colors: active) {
+    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+      outline: dashed 1px SelectedItem;
+    }
+  }
+`;
+
+export {
+  tree_item_styles_default
+};

package/dist/chunks/chunk.4ZD2WJOU.js

@@ -0,0 +1,25 @@
+import {
+  LynkTabGroup
+} from "./chunk.XNYUO23W.js";
+
+// src/react/tab-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-tab-group";
+LynkTabGroup.define("lynk-tab-group");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTabGroup,
+  react: React,
+  events: {
+    EvTabShow: "ev-tab-show",
+    EvTabHide: "ev-tab-hide"
+  },
+  displayName: "LynkTabGroup"
+});
+var tab_group_default = reactWrapper;
+
+export {
+  tab_group_default
+};

package/dist/chunks/chunk.54AZ333K.js

@@ -0,0 +1,21 @@
+import {
+  LynkTd
+} from "./chunk.57QX6N6D.js";
+
+// src/react/td/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "lynk-td";
+LynkTd.define("lynk-td");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTd,
+  react: React,
+  events: {},
+  displayName: "LynkTd"
+});
+var td_default = reactWrapper;
+
+export {
+  td_default
+};

package/dist/chunks/chunk.553J5NW7.js

@@ -0,0 +1,24 @@
+import {
+  LynkClock
+} from "./chunk.VHJTXB5K.js";
+
+// src/react/clock/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-clock";
+LynkClock.define("lynk-clock");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkClock,
+  react: React,
+  events: {
+    EvChange: "ev-change"
+  },
+  displayName: "LynkClock"
+});
+var clock_default = reactWrapper;
+
+export {
+  clock_default
+};

package/dist/chunks/chunk.57QX6N6D.js

@@ -0,0 +1,36 @@
+import {
+  td_styles_default
+} from "./chunk.UFMIOYLT.js";
+import {
+  LynkElement
+} from "./chunk.QEGXVYYA.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.O6LH3WX2.js";
+
+// src/components/td/td.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkTd = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.barberpole = false;
+  }
+  render() {
+    return html` <slot part="base"></slot> `;
+  }
+};
+LynkTd.styles = [component_styles_default, td_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], LynkTd.prototype, "state", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTd.prototype, "barberpole", 2);
+
+export {
+  LynkTd
+};