@uplynk/lynk-design 1.18.0 → 1.19.0

package/dist/chunks/chunk.3K5NR5DK.js

@@ -1,118 +0,0 @@
-// src/components/radio/radio.styles.ts
-import { css } from "lit";
-var radio_styles_default = css`
-  :host {
-    display: inline-block;
-  }
-
-  :host(:focus-visible) {
-    outline: 0px;
-  }
-
-  .radio {
-    display: inline-flex;
-    align-items: top;
-    font-family: var(--lynk-input-font-family);
-    font-size: var(--lynk-input-font-size);
-    font-weight: var(--lynk-input-font-weight);
-    color: var(--lynk-input-color);
-    vertical-align: middle;
-    cursor: pointer;
-  }
-
-  .radio--small {
-    --toggle-size: var(--lynk-toggle-size-small);
-    font-size: var(--lynk-input-label-font-size);
-  }
-
-  .radio--medium {
-    --toggle-size: var(--lynk-toggle-size-medium);
-    font-size: var(--lynk-input-label-font-size);
-  }
-
-  .radio--large {
-    --toggle-size: var(--lynk-toggle-size-large);
-    font-size: var(--lynk-input-label-font-size);
-  }
-
-  .radio__checked-icon {
-    display: inline-flex;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
-  }
-
-  .radio__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: 50%;
-    background-color: var(--lynk-input-background-color);
-    color: transparent;
-    transition:
-      var(--lynk-transition-fast) border-color,
-      var(--lynk-transition-fast) background-color,
-      var(--lynk-transition-fast) color,
-      var(--lynk-transition-fast) box-shadow;
-  }
-
-  .radio__input {
-    position: absolute;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    pointer-events: none;
-  }
-
-  /* Hover */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-    border-color: var(--lynk-input-border-color-hover);
-    background-color: var(--lynk-input-background-color-hover);
-  }
-
-  /* Checked */
-  .radio--checked .radio__control {
-    color: var(--lynk-color-neutral-0);
-    border-color: var(--lynk-color-primary-600);
-    background-color: var(--lynk-color-primary-600);
-  }
-
-  /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
-    border-color: var(--lynk-color-primary-500);
-    background-color: var(--lynk-color-primary-500);
-  }
-
-  /* Checked + focus */
-  :host(:focus-visible) .radio__control {
-    outline: var(--lynk-focus-ring);
-    outline-offset: var(--lynk-focus-ring-offset);
-  }
-
-  /* Disabled */
-  .radio--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
-  .radio:not(.radio--checked) svg circle {
-    opacity: 0;
-  }
-
-  .radio__label {
-    display: inline-block;
-    color: var(--lynk-input-label-color);
-    line-height: var(--toggle-size);
-    margin-inline-start: 0.5em;
-    user-select: none;
-  }
-`;
-
-export {
-  radio_styles_default
-};

package/dist/chunks/chunk.3N4UQYD3.js

@@ -1,211 +0,0 @@
-import {
-  animation_styles_default
-} from "./chunk.XVVDUPMB.js";
-import {
-  animations
-} from "./chunk.TJOP7HQP.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.XVGZ4RY7.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/animation/animation.component.ts
-import { html } from "lit";
-import { property, queryAsync } from "lit/decorators.js";
-var LynkAnimation = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.hasStarted = false;
-    this.name = "none";
-    this.play = false;
-    this.delay = 0;
-    this.direction = "normal";
-    this.duration = 1e3;
-    this.easing = "linear";
-    this.endDelay = 0;
-    this.fill = "auto";
-    this.iterations = Infinity;
-    this.iterationStart = 0;
-    this.playbackRate = 1;
-    this.handleAnimationFinish = () => {
-      this.play = false;
-      this.hasStarted = false;
-      this.emit("ev-finish");
-    };
-    this.handleAnimationCancel = () => {
-      this.play = false;
-      this.hasStarted = false;
-      this.emit("ev-cancel");
-    };
-  }
-  /** Gets and sets the current animation time. */
-  get currentTime() {
-    var _a, _b;
-    return (_b = (_a = this.animation) == null ? void 0 : _a.currentTime) != null ? _b : 0;
-  }
-  set currentTime(time) {
-    if (this.animation) {
-      this.animation.currentTime = time;
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.createAnimation();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.destroyAnimation();
-  }
-  handleSlotChange() {
-    this.destroyAnimation();
-    this.createAnimation();
-  }
-  async createAnimation() {
-    var _a, _b;
-    const easing = (_a = animations.easings[this.easing]) != null ? _a : this.easing;
-    const keyframes = (_b = this.keyframes) != null ? _b : animations[this.name];
-    const slot = await this.defaultSlot;
-    const element = slot.assignedElements()[0];
-    if (!element || !keyframes) {
-      return false;
-    }
-    this.destroyAnimation();
-    this.animation = element.animate(keyframes, {
-      delay: this.delay,
-      direction: this.direction,
-      duration: this.duration,
-      easing,
-      endDelay: this.endDelay,
-      fill: this.fill,
-      iterationStart: this.iterationStart,
-      iterations: this.iterations
-    });
-    this.animation.playbackRate = this.playbackRate;
-    this.animation.addEventListener("cancel", this.handleAnimationCancel);
-    this.animation.addEventListener("finish", this.handleAnimationFinish);
-    if (this.play) {
-      this.hasStarted = true;
-      this.emit("ev-start");
-    } else {
-      this.animation.pause();
-    }
-    return true;
-  }
-  destroyAnimation() {
-    if (this.animation) {
-      this.animation.cancel();
-      this.animation.removeEventListener("cancel", this.handleAnimationCancel);
-      this.animation.removeEventListener("finish", this.handleAnimationFinish);
-      this.hasStarted = false;
-    }
-  }
-  handleAnimationChange() {
-    if (!this.hasUpdated) {
-      return;
-    }
-    this.createAnimation();
-  }
-  handlePlayChange() {
-    if (this.animation) {
-      if (this.play && !this.hasStarted) {
-        this.hasStarted = true;
-        this.emit("ev-start");
-      }
-      if (this.play) {
-        this.animation.play();
-      } else {
-        this.animation.pause();
-      }
-      return true;
-    }
-    return false;
-  }
-  handlePlaybackRateChange() {
-    if (this.animation) {
-      this.animation.playbackRate = this.playbackRate;
-    }
-  }
-  /** Clears all KeyframeEffects caused by this animation and aborts its playback. */
-  cancel() {
-    var _a;
-    (_a = this.animation) == null ? void 0 : _a.cancel();
-  }
-  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
-  finish() {
-    var _a;
-    (_a = this.animation) == null ? void 0 : _a.finish();
-  }
-  render() {
-    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
-  }
-};
-LynkAnimation.styles = [component_styles_default, animation_styles_default];
-__decorateClass([
-  queryAsync("slot")
-], LynkAnimation.prototype, "defaultSlot", 2);
-__decorateClass([
-  property()
-], LynkAnimation.prototype, "name", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkAnimation.prototype, "play", 2);
-__decorateClass([
-  property({ type: Number })
-], LynkAnimation.prototype, "delay", 2);
-__decorateClass([
-  property()
-], LynkAnimation.prototype, "direction", 2);
-__decorateClass([
-  property({ type: Number })
-], LynkAnimation.prototype, "duration", 2);
-__decorateClass([
-  property()
-], LynkAnimation.prototype, "easing", 2);
-__decorateClass([
-  property({ attribute: "end-delay", type: Number })
-], LynkAnimation.prototype, "endDelay", 2);
-__decorateClass([
-  property()
-], LynkAnimation.prototype, "fill", 2);
-__decorateClass([
-  property({ type: Number })
-], LynkAnimation.prototype, "iterations", 2);
-__decorateClass([
-  property({ attribute: "iteration-start", type: Number })
-], LynkAnimation.prototype, "iterationStart", 2);
-__decorateClass([
-  property({ attribute: false })
-], LynkAnimation.prototype, "keyframes", 2);
-__decorateClass([
-  property({ attribute: "playback-rate", type: Number })
-], LynkAnimation.prototype, "playbackRate", 2);
-__decorateClass([
-  watch("name"),
-  watch("delay"),
-  watch("direction"),
-  watch("duration"),
-  watch("easing"),
-  watch("endDelay"),
-  watch("fill"),
-  watch("iterations"),
-  watch("iterationsStart"),
-  watch("keyframes")
-], LynkAnimation.prototype, "handleAnimationChange", 1);
-__decorateClass([
-  watch("play")
-], LynkAnimation.prototype, "handlePlayChange", 1);
-__decorateClass([
-  watch("playbackRate")
-], LynkAnimation.prototype, "handlePlaybackRateChange", 1);
-
-export {
-  LynkAnimation
-};

package/dist/chunks/chunk.3ORTBADN.js

@@ -1,83 +0,0 @@
-import {
-  nav_group_styles_default
-} from "./chunk.EYEMGZM7.js";
-import {
-  HasSlotController
-} from "./chunk.OW5NIGGX.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.XVGZ4RY7.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/nav-group/nav-group.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, state } from "lit/decorators.js";
-var LynkNavGroup = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "heading");
-    this.squished = false;
-    this.heading = "";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "group");
-  }
-  firstUpdated() {
-    this.handleSquished();
-  }
-  handleSquished() {
-    if (this.squished) {
-      this.setAttribute("squished", this.squished ? "true" : "false");
-    } else {
-      this.removeAttribute("squished");
-    }
-  }
-  render() {
-    const hasHeadingSlot = this.hasSlotController.test("heading");
-    const hasHeading = this.heading ? true : !!hasHeadingSlot;
-    return html`
-      <div
-        id="heading"
-        part="base"
-        class=${classMap({
-      "nav-group__heading": true
-    })}
-        aria-hidden=${hasHeading ? "false" : "true"}
-      >
-        <slot name="heading">${this.heading}</slot>
-      </div>
-
-      <slot
-        part="children"
-        class=${classMap({
-      "nav-group": true,
-      "nav-group--squished": this.squished
-    })}
-      ></slot>
-    `;
-  }
-};
-LynkNavGroup.styles = [component_styles_default, nav_group_styles_default];
-__decorateClass([
-  state()
-], LynkNavGroup.prototype, "squished", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkNavGroup.prototype, "heading", 2);
-__decorateClass([
-  watch("squished", { waitUntilFirstUpdate: true })
-], LynkNavGroup.prototype, "handleSquished", 1);
-
-export {
-  LynkNavGroup
-};

package/dist/chunks/chunk.3OVE6WNT.js

@@ -1,26 +0,0 @@
-import {
-  LynkIconButton
-} from "./chunk.MPNWXWG5.js";
-
-// src/react/icon-button/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-icon-button";
-LynkIconButton.define("lynk-icon-button");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkIconButton,
-  react: React,
-  events: {
-    EvBlur: "ev-blur",
-    EvClick: "ev-click",
-    EvFocus: "ev-focus"
-  },
-  displayName: "LynkIconButton"
-});
-var icon_button_default = reactWrapper;
-
-export {
-  icon_button_default
-};

package/dist/chunks/chunk.3TEGIRTK.js

@@ -1,161 +0,0 @@
-// src/components/alert/alert.styles.ts
-import { css } from "lit";
-var alert_styles_default = css`
-  :host {
-    display: contents;
-
-    --padding: var(--lynk-spacing-base);
-
-    /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: 0;
-  }
-
-  .alert {
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    background-color: var(--lynk-panel-background-color);
-    border: solid var(--lynk-panel-border-width) var(--lynk-panel-border-color);
-    border-left-width: calc(var(--lynk-panel-border-width) * 4);
-    border-right-width: calc(var(--lynk-panel-border-width) * 4);
-    border-radius: var(--lynk-border-radius-medium);
-    box-shadow: var(--box-shadow);
-    font-family: var(--lynk-font-sans);
-    font-size: var(--lynk-font-size-medium);
-    font-weight: var(--lynk-font-weight-normal);
-    line-height: 1.6;
-    color: var(--lynk-color-neutral-900);
-    margin: inherit;
-  }
-
-  .alert:not(.alert--has-icon) .alert__icon,
-  .alert:not(.alert--closable) .alert__close-button {
-    display: none;
-  }
-
-  .alert__icon {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--lynk-font-size-x-large);
-    padding-inline-start: var(--lynk-spacing-medium);
-  }
-
-  .alert--has-countdown {
-    border-bottom: none;
-  }
-
-  .alert--primary {
-    border-left-color: var(--lynk-color-primary-600);
-    border-right-color: var(--lynk-color-primary-600);
-  }
-
-  .alert--primary .alert__icon {
-    color: var(--lynk-color-primary-600);
-  }
-
-  .alert--success {
-    border-left-color: var(--lynk-color-success-600);
-    border-right-color: var(--lynk-color-success-600);
-  }
-
-  .alert--success .alert__icon {
-    color: var(--lynk-color-success-600);
-  }
-
-  .alert--neutral {
-    border-left-color: var(--lynk-color-neutral-600);
-    border-right-color: var(--lynk-color-neutral-600);
-  }
-
-  .alert--neutral .alert__icon {
-    color: var(--lynk-color-neutral-600);
-  }
-
-  .alert--warning {
-    border-left-color: var(--lynk-color-warning-600);
-    border-right-color: var(--lynk-color-warning-600);
-  }
-
-  .alert--warning .alert__icon {
-    color: var(--lynk-color-warning-600);
-  }
-
-  .alert--danger {
-    border-left-color: var(--lynk-color-danger-600);
-    border-right-color: var(--lynk-color-danger-600);
-  }
-
-  .alert--danger .alert__icon {
-    color: var(--lynk-color-danger-600);
-  }
-
-  .alert__message {
-    flex: 1 1 auto;
-    display: block;
-    padding: var(--padding) var(--lynk-spacing-medium);
-    overflow: hidden;
-  }
-
-  .alert__close-button {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--lynk-font-size-large);
-    padding-inline-end: var(--lynk-spacing-base);
-  }
-
-  .alert__countdown {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: calc(var(--lynk-panel-border-width) * 3);
-    background-color: var(--lynk-panel-border-color);
-    display: flex;
-  }
-
-  .alert__countdown--ltr {
-    justify-content: flex-end;
-  }
-
-  .alert__countdown .alert__countdown-elapsed {
-    height: 100%;
-    width: 0;
-  }
-
-  .alert--primary .alert__countdown-elapsed {
-    background-color: var(--lynk-color-primary-600);
-  }
-
-  .alert--success .alert__countdown-elapsed {
-    background-color: var(--lynk-color-success-600);
-  }
-
-  .alert--neutral .alert__countdown-elapsed {
-    background-color: var(--lynk-color-neutral-600);
-  }
-
-  .alert--warning .alert__countdown-elapsed {
-    background-color: var(--lynk-color-warning-600);
-  }
-
-  .alert--danger .alert__countdown-elapsed {
-    background-color: var(--lynk-color-danger-600);
-  }
-
-  .alert__timer {
-    display: none;
-  }
-
-  .alert__action {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    padding-inline-end: var(--lynk-spacing-base);
-  }
-`;
-
-export {
-  alert_styles_default
-};

package/dist/chunks/chunk.3TH7PKXI.js

@@ -1,63 +0,0 @@
-import {
-  th_styles_default
-} from "./chunk.B2F4ADSX.js";
-import {
-  LynkElement
-} from "./chunk.XVGZ4RY7.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/th/th.component.ts
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-var LynkTh = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.sortDirection = 0 /* NONE */;
-    this.sortable = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", this.handleClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this.handleClick);
-  }
-  handleClick() {
-    if (this.sortable) {
-      this.emit("ev-table-sort", {
-        detail: {
-          key: this.key
-        }
-      });
-    }
-  }
-  render() {
-    return html`
-      <slot part="base" class="lynk-th__label"></slot>
-      ${this.sortable ? html`<lynk-icon
-              library="system"
-              name="${this.sortDirection === -1 /* ASC */ ? "arrow-up-short" : this.sortDirection === 1 /* DESC */ ? "arrow-down-short" : "arrow-up-down-short"}"
-            ></lynk-icon>` : ``}
-    `;
-  }
-};
-LynkTh.styles = [component_styles_default, th_styles_default];
-__decorateClass([
-  property()
-], LynkTh.prototype, "key", 2);
-__decorateClass([
-  property({ attribute: "sort-direction", reflect: true })
-], LynkTh.prototype, "sortDirection", 2);
-__decorateClass([
-  property({ attribute: "sortable", type: Boolean, reflect: true })
-], LynkTh.prototype, "sortable", 2);
-
-export {
-  LynkTh
-};

package/dist/chunks/chunk.45O76OFG.js

@@ -1,11 +0,0 @@
-import {
-  LynkIntersectionObserver
-} from "./chunk.THMNLTAS.js";
-
-// src/components/intersection-observer/intersection-observer.ts
-var intersection_observer_default = LynkIntersectionObserver;
-LynkIntersectionObserver.define("lynk-intersection-observer");
-
-export {
-  intersection_observer_default
-};