@lmvz-ds/components 0.19.0 → 0.20.0

package/cjs/{reactive-controller-host-Bi9eu2bV.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 {

package/cjs/{icons-Tg7ySOh-.js → svg-BMBduILB.js}

@@ -1,41 +1,6 @@
 'use strict';
 
-var logger = require('./logger-Bn2yoZGP.js');
-
-const IconProviderRegistryKey = Symbol.for('LMVZ__iconProviderRegistry');
-const inMemoryRegistry = {};
-function getRegistry() {
-    if (typeof window === 'undefined') {
-        return inMemoryRegistry;
-    }
-    return window[IconProviderRegistryKey] ?? (window[IconProviderRegistryKey] = {});
-}
-function registerIconProvider(id, provider) {
-    const registry = getRegistry();
-    const providerName = id;
-    if (Object.prototype.hasOwnProperty.call(registry, providerName)) {
-        console.warn(`Icon provider with name "${providerName}" is already registered. Overwriting existing provider.`);
-    }
-    registry[providerName] = provider;
-}
-function getRegisteredIconProvider(id) {
-    const registry = getRegistry();
-    if (id) {
-        return registry[id];
-    }
-    const providerNames = Object.keys(registry);
-    if (providerNames.length === 0) {
-        return undefined;
-    }
-    if (providerNames.length > 1) {
-        console.warn(`Multiple icon providers registered (${providerNames.join(', ')}). Using the first one: "${providerNames[0]}".`);
-    }
-    const firstProviderName = providerNames[0];
-    if (!firstProviderName) {
-        return undefined;
-    }
-    return registry[firstProviderName];
-}
+var logger = require('./logger-DsM6xg6V.js');
 
 /**
  * This module provides types and utility functions to create and work with branded types,
@@ -92,11 +57,11 @@ class BrandValidationError extends logger.TaggedError('BrandValidationError') {
     }
 }
 /**
- * Validates an SVG string against the branded `SVGString` type and returns the result effect.
+ * Creates a synchronous Micro effect that validates a string against the branded `SVGString` type.
  *
  * @param svg Raw SVG markup to validate.
  */
-const createValidSVGString = (svg) => logger.try_({
+const validateSvg = (svg) => logger.try_({
     try: () => SVGString(sanitizeSvg(svg)),
     catch: (error) => new BrandValidationError(error, 'SVGString'),
 });
@@ -108,10 +73,9 @@ const createValidSVGString = (svg) => logger.try_({
 function isValidSVG(svg) {
     if (typeof svg !== 'string')
         return false;
-    const sanitizedSvg = sanitizeSvg(svg);
     try {
         const parser = new DOMParser();
-        const doc = parser.parseFromString(sanitizedSvg, 'image/svg+xml');
+        const doc = parser.parseFromString(svg, 'image/svg+xml');
         return doc.documentElement.nodeName === 'svg';
     }
     catch {
@@ -120,60 +84,42 @@ function isValidSVG(svg) {
 }
 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>`);
-async function toValidSvgStringWithFallback(value) {
+/**
+ * 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 await logger.runPromise(createValidSVGString(value));
+        return logger.runSync(validateSvg(value));
     }
     catch {
-        console.error('Invalid SVG string:', value);
+        console.warn('Invalid SVG string:', value);
         return emptyDefaultSvg();
     }
 }
-async function resolveIconSvg(options) {
-    const { icon, iconset } = options;
-    const iconSvg = await (async () => {
-        const provider = getRegisteredIconProvider(iconset);
-        if (!provider) {
-            console.warn(`No icon provider registered. Unable to resolve icon "${icon}"${iconset ? ` from set "${iconset}"` : ''}. Using default icon.`);
-            return;
-        }
-        try {
-            const resolved = await Promise.resolve(provider.resolve(icon));
-            if (!resolved?.svg) {
-                console.warn(`Icon "${icon}"${iconset ? ` from set "${iconset}"` : ''} not found in provider. Using default icon.`);
-                return;
-            }
-            const validated = await toValidSvgStringWithFallback(resolved.svg);
-            if (validated) {
-                return validated;
-            }
-        }
-        catch (error) {
-            console.error(`Error resolving icon "${icon}" with provider:`, error);
-            return;
-        }
-        return;
-    })();
-    if (iconSvg)
-        return iconSvg;
-    console.error(`Icon "${icon}" not found${iconset ? ` in set "${iconset}"` : ''}. Using default icon.`);
-    return emptyDefaultSvg();
-}
-function typedIconFromSet(iconset, icon) {
-    return {
-        iconset,
-        icon,
-    };
+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.createValidSVGString = createValidSVGString;
-exports.getRegisteredIconProvider = getRegisteredIconProvider;
-exports.isValidSVG = isValidSVG;
-exports.registerIconProvider = registerIconProvider;
-exports.resolveIconSvg = resolveIconSvg;
-exports.typedIconFromSet = typedIconFromSet;
+exports.emptyDefaultSvg = emptyDefaultSvg;
+exports.parseSvgString = parseSvgString;
+exports.toValidSvgStringWithFallback = toValidSvgStringWithFallback;

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-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;
+  }
+}