@lmvz-ds/components 0.18.2 → 0.20.0

package/cjs/{reactive-controller-host-CtaVAiYJ.js → reactive-controller-host-BA4ZhjKA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var ariaLoader = require('./aria-loader-CfFuAbJn.js');
+var ariaLoader = require('./aria-loader-Cec1zR2g.js');
 var index = require('./index-C2yDXRqP.js');
 
 class AriaValidationController {
@@ -158,34 +158,34 @@ class ReactiveControllerHost {
         this.controllers.delete(controller);
     }
     get activeControllers() {
-        return Array.from(this.controllers).filter(controller => !controller.disabled);
+        return Array.from(this.controllers).filter((controller) => !controller.disabled);
     }
     connectedCallback() {
         if (!this.controllers.size) {
             console.warn('ReactiveControllerHost connected with no controllers registered.', this);
         }
-        this.activeControllers.forEach(controller => controller.hostConnected?.());
+        this.activeControllers.forEach((controller) => controller.hostConnected?.());
     }
     disconnectedCallback() {
-        this.activeControllers.forEach(controller => controller.hostDisconnected?.());
+        this.activeControllers.forEach((controller) => controller.hostDisconnected?.());
     }
     componentWillLoad() {
-        this.activeControllers.forEach(controller => controller.hostWillLoad?.());
+        this.activeControllers.forEach((controller) => controller.hostWillLoad?.());
     }
     componentDidLoad() {
-        this.activeControllers.forEach(controller => controller.hostDidLoad?.());
+        this.activeControllers.forEach((controller) => controller.hostDidLoad?.());
     }
     componentWillRender() {
-        this.activeControllers.forEach(controller => controller.hostWillRender?.());
+        this.activeControllers.forEach((controller) => controller.hostWillRender?.());
     }
     componentDidRender() {
-        this.activeControllers.forEach(controller => controller.hostDidRender?.());
+        this.activeControllers.forEach((controller) => controller.hostDidRender?.());
     }
     componentWillUpdate() {
-        this.activeControllers.forEach(controller => controller.hostWillUpdate?.());
+        this.activeControllers.forEach((controller) => controller.hostWillUpdate?.());
     }
     componentDidUpdate() {
-        this.activeControllers.forEach(controller => controller.hostDidUpdate?.());
+        this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
     }
 }
 

package/cjs/svg-BMBduILB.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var logger = require('./logger-DsM6xg6V.js');
+
+/**
+ * This module provides types and utility functions to create and work with branded types,
+ * which are TypeScript types with an added type tag to prevent accidental usage of a value in the wrong context.
+ *
+ * The `refined` and `nominal` functions are both used to create branded types in TypeScript.
+ * The main difference between them is that `refined` allows for validation of the data, while `nominal` does not.
+ *
+ * The `nominal` function is used to create a new branded type that has the same underlying type as the input, but with a different name.
+ * This is useful when you want to distinguish between two values of the same type that have different meanings.
+ * The `nominal` function does not perform any validation of the input data.
+ *
+ * On the other hand, the `refined` function is used to create a new branded type that has the same underlying type as the input,
+ * but with a different name, and it also allows for validation of the input data.
+ * The `refined` function takes a predicate that is used to validate the input data.
+ * If the input data fails the validation, a `BrandErrors` is returned, which provides information about the specific validation failure.
+ *
+ * @since 2.0.0
+ */
+/**
+ * @since 2.0.0
+ * @category symbols
+ */
+const RefinedConstructorsTypeId = /*#__PURE__*/Symbol.for("effect/Brand/Refined");
+/**
+ * Returns a `BrandErrors` that contains a single `RefinementError`.
+ *
+ * @since 2.0.0
+ * @category constructors
+ */
+const error = (message, meta) => [{
+  message,
+  meta
+}];
+function refined(...args) {
+  const either = args.length === 2 ? unbranded => args[0](unbranded) ? logger.right(unbranded) : logger.left(args[1](unbranded)) : unbranded => {
+    return logger.match(args[0](unbranded), {
+      onNone: () => logger.right(unbranded),
+      onSome: logger.left
+    });
+  };
+  return Object.assign(unbranded => logger.getOrThrowWith(either(unbranded), logger.identity), {
+    [RefinedConstructorsTypeId]: RefinedConstructorsTypeId,
+    option: args => logger.getRight(either(args)),
+    either,
+    is: args => logger.isRight(either(args))
+  });
+}
+
+const SVGString = refined(isValidSVG, () => error('SVG data is malformed'));
+class BrandValidationError extends logger.TaggedError('BrandValidationError') {
+    constructor(error, type) {
+        super(new Error(`Brand validation failed for type ${type}.`, { cause: error }));
+    }
+}
+/**
+ * Creates a synchronous Micro effect that validates a string against the branded `SVGString` type.
+ *
+ * @param svg Raw SVG markup to validate.
+ */
+const validateSvg = (svg) => logger.try_({
+    try: () => SVGString(sanitizeSvg(svg)),
+    catch: (error) => new BrandValidationError(error, 'SVGString'),
+});
+/**
+ * Checks whether a string can be parsed into an SVG document.
+ *
+ * @param svg Raw SVG markup to validate.
+ */
+function isValidSVG(svg) {
+    if (typeof svg !== 'string')
+        return false;
+    try {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svg, 'image/svg+xml');
+        return doc.documentElement.nodeName === 'svg';
+    }
+    catch {
+        return false;
+    }
+}
+function sanitizeSvg(svg) {
+    const dataUriPrefix = 'data:image/svg+xml,';
+    const dataUriPrefixWithEncoding = 'data:image/svg+xml;base64,';
+    const base = svg.trim();
+    if (base.startsWith(dataUriPrefixWithEncoding)) {
+        return atob(base.slice(dataUriPrefixWithEncoding.length));
+    }
+    return !base.startsWith(dataUriPrefix) ? base : decodeURIComponent(base.slice(dataUriPrefix.length));
+}
+/**
+ * Returns a valid, empty SVG.
+ */
+const emptyDefaultSvg = () => SVGString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>`);
+/**
+ * Returns a valid SVG string, or a fallback empty SVG if the input is invalid.
+ *
+ * @param value The SVG string to validate.
+ */
+function toValidSvgStringWithFallback(value) {
+    try {
+        return logger.runSync(validateSvg(value));
+    }
+    catch {
+        console.warn('Invalid SVG string:', value);
+        return emptyDefaultSvg();
+    }
+}
+function parseSvgString(value) {
+    try {
+        return logger.runSync(validateSvg(value));
+    }
+    catch {
+        // this will be called by lmvz-icon, which might pass an icon name instead of an SVG string, so we log this at debug level to avoid spamming the console with warnings
+        console.debug('Invalid SVG string:', value);
+        return undefined;
+    }
+}
+
+exports.emptyDefaultSvg = emptyDefaultSvg;
+exports.parseSvgString = parseSvgString;
+exports.toValidSvgStringWithFallback = toValidSvgStringWithFallback;

package/collection/api/ds.constants.js

@@ -5,3 +5,5 @@ export const textSizes = [...sizes, 'xl'];
 export const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'];
 export const iconSizes = [...sizes, 'inherit'];
 export const iconWeights = ['thin', 'medium', 'bold', 'filled'];
+export const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
+export const chipSizes = ['default', 'small'];

package/collection/assets/icons/checkmark.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+    xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+    <path d="M3.75 12.5625L8.83079 17.625L20.4375 6.375" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "components/lmvz-action/lmvz-action.js",
     "components/lmvz-button/lmvz-button.js",
     "components/lmvz-card/lmvz-card.js",
+    "components/lmvz-checkbox/lmvz-checkbox.js",
     "components/lmvz-chip/lmvz-chip.js",
     "components/lmvz-header/lmvz-header.js",
     "components/lmvz-icon/lmvz-icon.js",

package/collection/components/lmvz-button/lmvz-button.css

@@ -91,8 +91,7 @@ button > * {
 }
 
 button:focus-visible {
-  /* outline: var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-status-active-950); */
-  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-active, #f1f9fe);
+  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4);
   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
 }
 

package/collection/components/lmvz-button/lmvz-button.js

@@ -57,7 +57,7 @@ export class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (h(Host, { key: '2897a943aca62561b0e78b5b3f2b7b85d76f4e78', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '92555224e33b00fb2602fdb2d19075145c0d9097', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '637a03a73db84a63bf1e3165d57c474151f87783' }))));
+        return (h(Host, { key: 'ce82e749ffb9172a9421d303e0d7cc02de58dff9', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: 'acd0773f72e76139ec5495eb15fc3a5949029e40', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: 'f519e0f82e68811a8831214e83e609bd9501fed0' }))));
     }
     static get is() { return "lmvz-button"; }
     static get encapsulation() { return "shadow"; }
@@ -188,8 +188,11 @@ export class LmvzButton extends ReactiveControllerHost {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "'button'"
+                        }],
+                    "text": "Native button type forwarded to the internal `<button>` element.\nUse `submit` to trigger form submission."
                 },
                 "getter": false,
                 "setter": false,

package/collection/components/lmvz-card/lmvz-card.css

@@ -92,8 +92,7 @@ button > * {
 }
 
 button:focus-visible {
-  /* outline: var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-status-active-950); */
-  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-active, #f1f9fe);
+  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4);
   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
 }
 

package/collection/components/lmvz-checkbox/lmvz-checkbox.css

@@ -0,0 +1,207 @@
+
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@layer lmvz-ds.theme {
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Book'),
+    url('/assets/fonts/Router-Book.woff') format('woff'),
+    local('Router');
+  font-weight: 400 normal;
+}
+
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Medium'),
+    url('/assets/fonts/Router-Medium.woff') format('woff'),
+    local('Router');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Bold'),
+    url('/assets/fonts/Router-Bold.woff') format('woff'),
+    local('Router');
+  font-weight: 700 bold;
+}
+
+}
+:host {
+  display: inline-block;
+
+  --checkbox-box-size: var(--lmvz-global-s18, 18px); /* TODO: confirm this generic dimension token is intentional for checkbox box sizing */
+  --checkbox-border-radius: var(--lmvz-global-s4, 4px); /* TODO: consider component-specific token for border-radius */
+
+  --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
+  --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
+  --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);
+  --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+
+  --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+  --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f1f9fe);
+
+  --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
+
+  --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc);
+
+  --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
+  --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);
+  --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+
+  --checkbox-easing: var(--lmvz-global-easing-default, ease);
+  --checkbox-duration: 0.2s;
+}
+.pill {
+  display: flex;
+  align-items: center;
+  gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  cursor: pointer;
+  /* WCAG 2.5.5 AAA: 44px minimum touch target */
+  /* min-block-size: 44px;  */
+  text-decoration: none;
+  background-color: transparent;
+  transition: background-color var(--checkbox-duration) var(--checkbox-easing);
+}
+input {
+  position: absolute;
+  opacity: 0;
+  width: var(--checkbox-box-size);
+  height: var(--checkbox-box-size);
+  margin: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkbox-box-size);
+  height: var(--checkbox-box-size);
+  background-color: var(--checkbox-bg);
+  border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color);
+  border-radius: var(--checkbox-border-radius);
+  color: var(--checkbox-checkmark-color);
+  transition:
+    border-color var(--checkbox-duration) var(--checkbox-easing),
+    background-color var(--checkbox-duration) var(--checkbox-easing);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+.indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+label {
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+    Router);
+  color: var(--checkbox-label-color);
+  transition: color var(--checkbox-duration) var(--checkbox-easing);
+}
+.helper-text {
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4
+    Router);
+  /* font-weight: 400 per DS token standard (body-sm). Note: lmvz-input.css [role='status'] incorrectly uses font-weight: 500 — DS inconsistency, see lmvz-input.css line ~153 */
+  color: var(--checkbox-helper-color);
+  margin-block-start: 2px;
+}
+.error-text {
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4
+    Router);
+  color: var(--checkbox-error-color);
+  display: block;
+  margin-block-start: 4px;
+  padding-inline: 10px;
+}
+/* Hover state, guarded to prevent sticky hover on touch devices */
+@media (hover: hover) {
+  .pill:hover {
+    background-color: var(--checkbox-wrapper-bg-hover);
+  }
+
+  .pill:hover .box {
+    border-color: var(--checkbox-border-color-hover);
+  }
+}
+/* Checked state */
+:host([checked]) .pill {
+  background-color: var(--checkbox-wrapper-bg-checked);
+}
+:host([checked]) .box {
+  border-color: var(--checkbox-border-color-checked);
+}
+:host([checked]) label {
+  color: var(--checkbox-label-color-checked);
+  /* Contrast ~4.4:1 on checked wrapper background (#f1f9fe) — exception accepted per DS decision 5.3; approximately at WCAG AA threshold; pending design review for formal verification */
+}
+/* Error state. MUST appear AFTER checked state rules (error takes visual precedence) */
+:host([error]) .box {
+  border-color: var(--checkbox-border-color-error);
+}
+:host([error]) .helper-text {
+  color: var(--checkbox-error-color);
+}
+/* Disabled state */
+:host([disabled]) {
+  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  pointer-events: none;
+}
+:host([disabled]) .pill {
+  cursor: not-allowed;
+}
+:host([disabled]) input {
+  cursor: not-allowed;
+}
+/* Focus ring, applied via sibling combinator on the native input */
+input:focus-visible ~ .box {
+  outline: 2px solid var(--checkbox-focus-color);
+  outline-offset: 2px;
+  /* box-shadow: 0 0 0 3px rgba(15, 138, 204, 0.2); TODO: no design token available for focus shadow color/spread */
+  box-shadow: 0 var(--lmvz-semantic-shadow-l1-1-position-y, 2px) 0 var(--lmvz-semantic-shadow-l1-1-blur, 4px) var(--lmvz-semantic-color-shadow-l1-colored, rgba(175, 223, 249, 0.42));
+}
+/* Forced Colors / Windows High Contrast */
+@media (forced-colors: active) {
+  .box {
+    forced-color-adjust: auto;
+    border-color: ButtonText;
+    background-color: Field;
+  }
+
+  :host([checked]) .box {
+    border-color: Highlight;
+    background-color: Field;
+  }
+
+  .indicator {
+    color: ButtonText;
+  }
+
+  :host([checked]) .indicator {
+    color: HighlightText;
+  }
+
+  input:focus-visible ~ .box {
+    outline-color: Highlight;
+    box-shadow: none;
+  }
+}