@lmvz-ds/components 0.37.0 → 0.39.0

package/cjs/public-DTgpEs1_.js

@@ -0,0 +1,206 @@
+'use strict';
+
+var icons = require('./icons-snv0hyf1.js');
+
+const PRIORITY_MAP = {
+    low: 0,
+    normal: 1,
+    high: 2,
+};
+const STATUS_DURATION = {
+    success: 5000,
+    warning: 5000,
+    error: 8000,
+};
+let idCounter = 0;
+function nextId() {
+    idCounter += 1;
+    return `snackbar-${idCounter}`;
+}
+function resolveHostElement() {
+    if (typeof document === 'undefined') {
+        return undefined;
+    }
+    const existing = document.querySelector('[data-snackbar-host]');
+    if (existing) {
+        return existing;
+    }
+    const el = document.createElement('lmvz-snackbar');
+    el.setAttribute('data-snackbar-host', '');
+    document.body.appendChild(el);
+    return el;
+}
+class SnackbarController {
+    hostEl = undefined;
+    active = undefined;
+    getHost() {
+        if (this.hostEl !== undefined && !this.hostEl.isConnected) {
+            this.hostEl = undefined;
+        }
+        if (this.hostEl === undefined) {
+            this.hostEl = resolveHostElement();
+        }
+        return this.hostEl;
+    }
+    clearTimer(entry) {
+        if (entry.timerId !== undefined) {
+            clearTimeout(entry.timerId);
+            entry.timerId = undefined;
+        }
+    }
+    scheduleTimer(entry, delayMs) {
+        if (delayMs <= 0) {
+            return;
+        }
+        entry.timerStartedAt = Date.now();
+        entry.timerId = setTimeout(() => {
+            if (this.active !== undefined && this.active.id === entry.id) {
+                this.dismissActive(entry, 'timeout');
+            }
+        }, delayMs);
+    }
+    dismissActive(entry, reason) {
+        this.clearTimer(entry);
+        const host = entry.hostEl;
+        host.removeEventListener('pointerenter', entry.onPointerEnter);
+        host.removeEventListener('pointerleave', entry.onPointerLeave);
+        host.removeEventListener('focusin', entry.onFocusIn);
+        host.removeEventListener('focusout', entry.onFocusOut);
+        if (entry.onActionListener) {
+            host.removeEventListener('lmvzAction', entry.onActionListener);
+        }
+        host.hide?.();
+        if (this.active?.id === entry.id) {
+            this.active = undefined;
+        }
+        if (reason !== 'action') {
+            host.dispatchEvent(new CustomEvent('lmvzClose', { detail: { reason }, bubbles: true, composed: true }));
+        }
+        entry.resolve({ reason });
+    }
+    pauseTimer(entry) {
+        entry.pauseCount += 1;
+        if (entry.pauseCount > 1 || entry.timerId === undefined) {
+            return;
+        }
+        const elapsed = entry.timerStartedAt !== undefined ? Date.now() - entry.timerStartedAt : 0;
+        entry.remaining = Math.max(0, entry.remaining - elapsed);
+        entry.timerStartedAt = undefined;
+        this.clearTimer(entry);
+    }
+    resumeTimer(entry) {
+        if (entry.pauseCount > 0) {
+            entry.pauseCount -= 1;
+        }
+        if (entry.pauseCount > 0) {
+            return;
+        }
+        if (entry.remaining > 0) {
+            this.scheduleTimer(entry, entry.remaining);
+        }
+    }
+    applyToHost(host, options) {
+        host.setAttribute('status', options.status ?? 'success');
+        if (options.actionLabel !== undefined) {
+            host.setAttribute('action-label', options.actionLabel);
+        }
+        else {
+            host.removeAttribute('action-label');
+        }
+    }
+    open(options) {
+        const incomingPriority = PRIORITY_MAP[options.priority ?? 'normal'];
+        if (this.active !== undefined && incomingPriority < this.active.priority) {
+            let swallowResolve;
+            const closed = new Promise((resolve) => {
+                swallowResolve = resolve;
+            });
+            swallowResolve({ reason: 'swallowed' });
+            const id = nextId();
+            return {
+                id,
+                closed,
+                dismiss() {
+                },
+            };
+        }
+        if (this.active !== undefined) {
+            this.dismissActive(this.active, 'overridden');
+        }
+        const host = this.getHost();
+        if (host === undefined) {
+            const id = nextId();
+            let ssrResolve;
+            const closed = new Promise((resolve) => {
+                ssrResolve = resolve;
+            });
+            ssrResolve({ reason: 'swallowed' });
+            return { id, closed, dismiss() { } };
+        }
+        const id = nextId();
+        const status = options.status ?? 'success';
+        const durationMs = options.duration === 0 ? 0 : (options.duration ?? STATUS_DURATION[status]);
+        let entryResolve;
+        const closed = new Promise((resolve) => {
+            entryResolve = resolve;
+        });
+        const entry = {
+            id,
+            priority: incomingPriority,
+            resolve: entryResolve,
+            timerId: undefined,
+            remaining: durationMs,
+            timerStartedAt: undefined,
+            pauseCount: 0,
+            hostEl: host,
+            onPointerEnter: () => this.pauseTimer(entry),
+            onPointerLeave: () => this.resumeTimer(entry),
+            onFocusIn: () => this.pauseTimer(entry),
+            onFocusOut: () => this.resumeTimer(entry),
+        };
+        this.active = entry;
+        host.addEventListener('pointerenter', entry.onPointerEnter);
+        host.addEventListener('pointerleave', entry.onPointerLeave);
+        host.addEventListener('focusin', entry.onFocusIn);
+        host.addEventListener('focusout', entry.onFocusOut);
+        this.applyToHost(host, options);
+        const onAction = () => {
+            if (this.active !== undefined && this.active.id === id) {
+                options.onAction?.();
+                this.dismissActive(entry, 'action');
+            }
+        };
+        entry.onActionListener = onAction;
+        host.addEventListener('lmvzAction', onAction, { once: true });
+        host.show?.();
+        queueMicrotask(() => host.setAttribute('message', options.message));
+        if (durationMs > 0) {
+            this.scheduleTimer(entry, durationMs);
+        }
+        return {
+            id,
+            closed,
+            dismiss: () => {
+                if (this.active?.id === id) {
+                    this.dismissActive(entry, 'manual');
+                }
+            },
+        };
+    }
+    dismiss(id) {
+        if (!this.active) {
+            return;
+        }
+        if (!id || this.active.id === id) {
+            this.dismissActive(this.active, 'manual');
+        }
+    }
+}
+
+window.LmvzApi ??= {};
+window.LmvzApi.SnackbarController = SnackbarController;
+
+window.LmvzApi ??= {};
+window.LmvzApi.typedIconFromSet = icons.typedIconFromSet;
+
+exports.SnackbarController = SnackbarController;

package/collection/components/lmvz-action-list/lmvz-action-list.css

@@ -47,14 +47,27 @@ legend {
   gap: 0;
   min-width: 15vw;
 
-  /* * the (invalid nested) import will be handled by postcss */
-  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+  /* re-import button styles for nested <button/>s */
   button {
-  /* secondary styling is default, primary is explicit */
-  /* --lmvz-button-background, --lmvz-button-color, --lmvz-button-radius are declared on :host
+    /* the (invalid nested) import will be handled by postcss */
+    /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+    /* stylelint-disable nesting-selector-no-missing-scoping-root */
+
+/**
+ * This fragment is meant to be reusable in multiple component types.
+ * CAUTION: always wrap the import in a tag selector (ususally button)!
+ */
+& {
+  /* the (invalid nested) import will be handled by postcss */
+  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+  /* stylelint-disable nesting-selector-no-missing-scoping-root */
+& {
+  /* variables are declared on :host
      so that outer ::slotted(lmvz-button) overrides are inherited correctly via shadow inheritance.
-     They are also declared here so that non-shadow consumers (e.g. @lmvz-ds/styles buttons.css
-     bundle and lmvz-card) have the default values in scope. */
+     They are also declared here so that non-shadow consumers have the default values in scope. */
+
+  /* secondary styling is default, primary is explicit */
+
   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
   --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));
@@ -69,19 +82,20 @@ legend {
 
   display: inline-flex;
   align-items: center;
-  justify-content: var(--lmvz-button-content-justification-override, center);
-  gap: var(--lmvz-button-gap);
-  padding-block: var(--lmvz-button-padding-block);
-  padding-inline: var(--lmvz-button-padding-inline);
-  min-height: var(--lmvz-button-min-height);
-  min-width: var(--lmvz-button-min-height);
-  border-radius: var(--lmvz-button-radius);
-  border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
+  justify-content: var(--lmvz-button-content-justification, center);
+  gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
+
+  box-sizing: border-box; /* to inlclude paddings & border in min-height */
+  padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
+  border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent);
+  border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px));
+
   background-color: var(--lmvz-button-background);
   color: var(--lmvz-button-color);
   cursor: pointer;
   font: var(--lmvz-button-font);
-  /* text-align: center; */
   text-decoration: none;
   white-space: nowrap;
   transition:
@@ -91,116 +105,94 @@ legend {
     box-shadow 0.15s ease;
 }
 
-button > * {
-  font: inherit;
-  color: inherit;
-}
-
-button:focus-visible {
-  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
-  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
-  position: relative;
-  z-index: 1;
-}
-
-button:is([disabled], .disabled) {
-  cursor: not-allowed;
-  pointer-events: none;
-  /* } */
-
-  /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
-  /* button:is([disabled], .disabled) { */
-  /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
-  /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
-  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
-}
-
-button:not([disabled]):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
-}
-
-button:not([disabled]):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
-}
 
-button.primary {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
-  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
-  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
-}
-
-button.primary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
-}
-
-button.primary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
-}
-
-button.danger {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
-  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.danger:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.danger:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.tertiary {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
-}
+  & > * {
+    font: inherit;
+    color: inherit;
+  }
+  &:focus-visible {
+    outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+    outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+    position: relative;
+    z-index: 1;
+  }
+  &:is([disabled], .disabled) {
+    cursor: not-allowed;
+    pointer-events: none;
+    /* } */
+
+    /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
+    /* button:is([disabled], .disabled) { */
+    /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
+    /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
+    opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  }
+  &:not([disabled]):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
+  }
+  &:not([disabled]):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
+  }
 
-button.tertiary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
-}
+  /* secondary styling is default, primary is explicit */
 
-button.tertiary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
-}
+  &.primary {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
+    --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+    --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+  }
+  &.primary:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
+  }
+  &.primary:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
+  }
+  &.danger {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+    --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.danger:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.danger:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.tertiary {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
+  }
+  &.tertiary:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
+  }
+  &.tertiary:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
+  }
 
-button.small {
-  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
-  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
-  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
-  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
+  &.small {
+    --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
+    --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
+    --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
+    --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
+    --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
     Router));
-}
-
-button.large {
-  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
-  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
-  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
-  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+  }
+  &.large {
+    --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
+    --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
+    --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
+    --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
+    --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
     Router));
+  }
 }
 
 
-  lmvz-button,
-  button {
-    --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);
-    --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
-    --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
-    --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
-    --lmvz-button-content-justification-override: normal;
-
-    width: 100%;
-    display: block;
-  }
-
-  button {
     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
     --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
 
@@ -214,4 +206,15 @@ button.large {
       --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
     }
   }
+
+  lmvz-button,
+  button {
+    --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);
+    --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+    --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+    --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
+    --lmvz-button-content-justification: normal;
+
+    width: 100%;
+  }
 }