@uplynk/lynk-design 1.13.0 → 1.15.0

package/dist/chunks/chunk.ACKYANTB.js

@@ -1,30 +0,0 @@
-import {
-  box_styles_default
-} from "./chunk.D2UJW57T.js";
-import {
-  LynkElement
-} from "./chunk.2MJZWUB2.js";
-
-// src/components/box/box.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-var LynkBox = class extends LynkElement {
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      box: true,
-      "box--overflow": getComputedStyle(this).getPropertyValue("--height") ? true : false
-    })}
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-LynkBox.styles = box_styles_default;
-
-export {
-  LynkBox
-};

package/dist/chunks/chunk.ACUJDUSZ.js

@@ -1,11 +0,0 @@
-import {
-  LynkCalendar
-} from "./chunk.LWTIRWES.js";
-
-// src/components/calendar/calendar.ts
-var calendar_default = LynkCalendar;
-LynkCalendar.define("lynk-calendar");
-
-export {
-  calendar_default
-};

package/dist/chunks/chunk.ADJAYVTL.js

@@ -1,80 +0,0 @@
-import {
-  resize_observer_styles_default
-} from "./chunk.5VKIB4HA.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.2MJZWUB2.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/resize-observer/resize-observer.component.ts
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-var LynkResizeObserver = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.observedElements = [];
-    this.disabled = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.resizeObserver = new ResizeObserver((entries) => {
-      this.emit("ev-resize", { detail: { entries } });
-    });
-    if (!this.disabled) {
-      this.startObserver();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.stopObserver();
-  }
-  handleSlotChange() {
-    if (!this.disabled) {
-      this.startObserver();
-    }
-  }
-  startObserver() {
-    const slot = this.shadowRoot.querySelector("slot");
-    if (slot !== null) {
-      const elements = slot.assignedElements({ flatten: true });
-      this.observedElements.forEach((el) => this.resizeObserver.unobserve(el));
-      this.observedElements = [];
-      elements.forEach((el) => {
-        this.resizeObserver.observe(el);
-        this.observedElements.push(el);
-      });
-    }
-  }
-  stopObserver() {
-    this.resizeObserver.disconnect();
-  }
-  handleDisabledChange() {
-    if (this.disabled) {
-      this.stopObserver();
-    } else {
-      this.startObserver();
-    }
-  }
-  render() {
-    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
-  }
-};
-LynkResizeObserver.styles = [component_styles_default, resize_observer_styles_default];
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkResizeObserver.prototype, "disabled", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], LynkResizeObserver.prototype, "handleDisabledChange", 1);
-
-export {
-  LynkResizeObserver
-};

package/dist/chunks/chunk.AE6KGBKI.js

@@ -1,11 +0,0 @@
-import {
-  LynkCard
-} from "./chunk.JIB3IKXW.js";
-
-// src/components/card/card.ts
-var card_default = LynkCard;
-LynkCard.define("lynk-card");
-
-export {
-  card_default
-};

package/dist/chunks/chunk.AFH3LVK3.js

@@ -1,344 +0,0 @@
-// src/components/range/range.styles.ts
-import { css } from "lit";
-var range_styles_default = css`
-  :host {
-    --thumb-size: 16px;
-    --thumb-color: var(--lynk-color-primary);
-    --thumb-border: 0 0 0 2px var(--lynk-color-neutral-50);
-    --tooltip-offset: 8px;
-    --track-color-active: var(--lynk-color-primary);
-    --track-color-inactive: var(--lynk-color-neutral-200);
-    --track-active-offset: 0%;
-    --track-height: 6px;
-    --tick-color: var(--lynk-color-neutral-200);
-    --tick-label-color: var(--lynk-color-neutral);
-    --tick-width: 2px;
-    --tick-height: 8px;
-    --tick-selected-color: var(--lynk-color-primary);
-    --marker-width: 0.1875em;
-    --marker-height: 0.1875em;
-    display: block;
-  }
-
-  :host([state='error']) {
-    --thumb-color: var(--lynk-color-danger);
-    --track-color-active: var(--lynk-color-danger);
-  }
-
-  :host([state='warning']) {
-    --thumb-color: var(--lynk-color-warning);
-    --track-color-active: var(--lynk-color-warning);
-  }
-
-  :host([state='success']) {
-    --thumb-color: var(--lynk-color-success);
-    --track-color-active: var(--lynk-color-success);
-  }
-
-  :host([size='small']) {
-    --track-height: 4px;
-    --thumb-size: 12px;
-  }
-
-  :host([size='large']) {
-    --track-height: 8px;
-    --thumb-size: 20px;
-  }
-
-  :host([orientation='vertical']) {
-    display: inline-block;
-  }
-
-  :host([orientation='vertical']) lynk-form-field,
-  :host([orientation='vertical']) lynk-form-field::part(base),
-  :host([orientation='vertical']) lynk-form-field::part(control-wrapper),
-  :host([orientation='vertical']) lynk-form-field::part(control) {
-    height: 100%;
-  }
-
-  .range {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .range--vertical {
-    flex-direction: row;
-    justify-content: center;
-    height: 100%;
-  }
-
-  .range__native-input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .range__wrapper {
-    --percent: 0%;
-    position: relative;
-    width: 100%;
-    height: var(--thumb-size);
-    cursor: pointer;
-    touch-action: none;
-  }
-
-  .range--vertical .range__wrapper {
-    width: var(--thumb-size);
-    height: 100%;
-  }
-
-  .range__track {
-    position: absolute;
-    width: 100%;
-    height: var(--track-height);
-    top: 50%;
-    transform: translateY(-50%);
-    background: var(--track-color-inactive);
-    border-radius: 2px;
-  }
-
-  .range--vertical .range__track {
-    width: var(--track-height);
-    height: 100%;
-    left: 50%;
-    top: 0;
-    transform: translateX(-50%);
-  }
-
-  .range__track-active {
-    position: absolute;
-    height: var(--track-height);
-    top: 50%;
-    transform: translateY(-50%);
-    background: var(--track-color-active);
-    border-radius: 2px;
-    left: max(var(--track-active-offset), 0%);
-    width: calc(var(--percent) - max(var(--track-active-offset), 0%));
-    will-change: width, height;
-  }
-
-  .range--rtl .range__track-active {
-    left: auto;
-    right: max(var(--track-active-offset), 0%);
-  }
-
-  .range--vertical .range__track-active {
-    width: var(--track-height);
-    height: calc(var(--percent) - max(var(--track-active-offset), 0%));
-    left: 50%;
-    top: auto;
-    bottom: max(var(--track-active-offset), 0%);
-    transform: translateX(-50%);
-  }
-
-  .range__thumb {
-    position: absolute;
-    z-index: 2;
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    top: 50%;
-    left: var(--percent);
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    background-color: var(--thumb-color);
-    box-shadow: var(--thumb-border);
-    transition:
-      background-color var(--lynk-transition-fast),
-      border-color var(--lynk-transition-fast),
-      box-shadow var(--lynk-transition-fast);
-    cursor: grab;
-    outline: none;
-    will-change: left, bottom;
-  }
-
-  .range--rtl .range__thumb {
-    left: auto;
-    right: var(--percent);
-    transform: translate(50%, -50%);
-  }
-
-  .range--vertical .range__thumb {
-    left: 50%;
-    top: auto;
-    bottom: var(--percent);
-    transform: translate(-50%, 50%);
-  }
-
-  .range__thumb:active {
-    cursor: grabbing;
-  }
-
-  .range:not(.range--disabled) .range__thumb:hover {
-    box-shadow:
-      var(--thumb-border),
-      0 0 0 8px color-mix(in oklab, var(--thumb-color) 25%, transparent);
-  }
-
-  .range:not(.range--disabled) .range__thumb:focus-visible {
-    box-shadow:
-      var(--thumb-border),
-      0 0 0 8px color-mix(in oklab, var(--thumb-color) 50%, transparent);
-  }
-
-  .range:not(.range--disabled) .range__thumb:active {
-    box-shadow:
-      var(--thumb-border),
-      0 0 0 8px color-mix(in oklab, var(--thumb-color) 50%, transparent);
-  }
-
-  .range--disabled .range__wrapper,
-  .range--readonly .range__wrapper {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .range--disabled .range__thumb,
-  .range--readonly .range__thumb {
-    cursor: not-allowed;
-  }
-
-  /* Ticks */
-  .range__ticks {
-    display: flex;
-    position: relative;
-    width: 100%;
-    height: var(--tick-height);
-    margin-top: var(--lynk-spacing-2x-small);
-    pointer-events: none;
-  }
-
-  .range--vertical .range__ticks {
-    flex-direction: column;
-    width: var(--tick-height);
-    height: 100%;
-    margin-top: 0;
-    margin-left: var(--lynk-spacing-2x-small);
-  }
-
-  .range__tick {
-    position: absolute;
-    left: var(--offset);
-    transform: translateX(-50%);
-  }
-
-  .range--rtl .range__tick {
-    left: initial;
-    right: var(--offset);
-  }
-
-  .range--vertical .range__tick {
-    left: 0;
-    bottom: var(--offset);
-    transform: translateY(50%);
-  }
-
-  .range__tick::before {
-    width: var(--tick-width);
-    height: var(--tick-height);
-    border-radius: 1px;
-    background-color: var(--tick-color);
-    content: '';
-    top: calc(var(--tick-height) * -0.5);
-    display: block;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .range--vertical .range__tick::before {
-    width: var(--tick-height);
-    height: var(--tick-width);
-    left: calc(var(--tick-height) * -0.5);
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .range__tick-label {
-    display: block;
-    pointer-events: auto;
-    cursor: pointer;
-    margin-top: 2px;
-    color: var(--tick-label-color);
-    font-family: var(--lynk-tooltip-font-family);
-    font-size: var(--lynk-font-size-small);
-  }
-
-  .range--vertical .range__tick-label {
-    margin-top: 0;
-    margin-left: var(--lynk-spacing-x-small);
-  }
-
-  .range--disabled .range__tick-label {
-    cursor: not-allowed;
-  }
-
-  .range__tick--selected.range__tick::before {
-    background-color: var(--tick-selected-color);
-  }
-
-  .range__tick--selected .range__tick-label {
-    color: var(--tick-selected-color);
-  }
-
-  .range__references {
-    display: flex;
-    justify-content: space-between;
-    margin-top: var(--lynk-spacing-2x-small);
-  }
-
-  .range--vertical .range__references {
-    flex-direction: column;
-    margin-top: 0;
-    margin-left: 4px;
-  }
-
-  .range__references ::slotted(*) {
-    color: var(--lynk-input-help-text-color);
-    font-size: var(--lynk-input-help-text-font-size);
-    line-height: 1;
-  }
-
-  /* Markers */
-  .range__markers {
-    pointer-events: none;
-  }
-
-  .range__marker {
-    z-index: 2;
-    position: absolute;
-    display: inline-block;
-    width: var(--marker-width);
-    height: var(--marker-height);
-    border-radius: 50%;
-    background-color: var(--lynk-color-black);
-  }
-
-  .range__marker:first-of-type,
-  .range__marker:last-of-type {
-    display: none;
-  }
-
-  .range__marker {
-    top: calc(50% - var(--marker-height) / 2);
-    left: calc(var(--position) - var(--marker-width) / 2);
-  }
-
-  .range--vertical .range__marker {
-    top: calc(var(--position) - var(--marker-height) / 2);
-    left: calc(50% - var(--marker-width) / 2);
-  }
-
-  @media (forced-colors: active) {
-    .range__track,
-    .range__track-active,
-    .range__thumb {
-      border: solid 1px transparent;
-    }
-  }
-`;
-
-export {
-  range_styles_default
-};