@reliability-design/web 1.4.8 → 1.4.10

package/dist/{vars-DXX6QOAG.css → vars-E22LYFMV.css}

@@ -8,9 +8,9 @@
   --rel-colors-gray-50: #F7F7F7;
   --rel-colors-gray-100: #E5E5E5;
   --rel-colors-gray-200: #C2C2C2;
-  --rel-colors-gray-300: #A3A3A3;
-  --rel-colors-gray-400: #7D7D7D;
-  --rel-colors-gray-500: #525252;
+  --rel-colors-gray-300: #989898;
+  --rel-colors-gray-400: #707070;
+  --rel-colors-gray-500: #575757;
   --rel-colors-gray-600: #404040;
   --rel-colors-gray-700: #2B2B2B;
   --rel-colors-gray-800: #1B1B1B;
@@ -22,7 +22,7 @@
   --rel-colors-green-50: #EDF8F4;
   --rel-colors-green-100: #D5F1E7;
   --rel-colors-green-200: #91D9BF;
-  --rel-colors-green-300: #30B887;
+  --rel-colors-green-300: #60C9A3;
   --rel-colors-green-400: #30B887;
   --rel-colors-green-500: #00A86B;
   --rel-colors-green-600: #008655;
@@ -378,8 +378,6 @@
   --rel-shadows-lg: 0 8px 16px rgba(11,11,11,0.10);
   --rel-shadows-xl: 0 0 1px rgba(11,11,11,0.30), 0 16px 24px rgba(11,11,11,0.10);
   --rel-shadows-2xl: 0 0 1px rgba(11,11,11,0.30), 0 24px 40px rgba(11,11,11,0.10);
-  /* --- shadow colour (ADDED: no Figma variable; drop-shadow() needs a bare color) --- */
-  --rel-shadow-color: rgba(11,11,11,0.10);
   /* --- overlay (DEPRECATED alias — bind --rel-bg-overlay-scrim) --- */
   --rel-overlay-scrim: var(--rel-bg-overlay-scrim);
 
@@ -401,16 +399,16 @@
   --rel-bg-neutral-inverse-2: var(--rel-colors-gray-950);
   --rel-bg-brand: var(--rel-colors-brand-500);
   --rel-bg-danger-light: var(--rel-colors-red-50);
-  --rel-bg-danger: var(--rel-colors-red-500);
+  --rel-bg-danger: var(--rel-colors-red-600);
   --rel-bg-danger-strong: var(--rel-colors-red-800);
   --rel-bg-warning-light: var(--rel-colors-yellow-100);
   --rel-bg-warning: var(--rel-colors-yellow-400);
   --rel-bg-warning-strong: var(--rel-colors-yellow-800);
   --rel-bg-info-light: var(--rel-colors-blue-50);
-  --rel-bg-info: var(--rel-colors-blue-500);
+  --rel-bg-info: var(--rel-colors-blue-700);
   --rel-bg-info-strong: var(--rel-colors-blue-800);
   --rel-bg-success-light: var(--rel-colors-green-50);
-  --rel-bg-success: var(--rel-colors-green-500);
+  --rel-bg-success: var(--rel-colors-green-600);
   --rel-bg-success-strong: var(--rel-colors-green-800);
   --rel-bg-overlay-scrim: var(--rel-colors-dark-alpha-8);
 
@@ -421,18 +419,18 @@
   --rel-text-label: var(--rel-colors-gray-700);
   --rel-text-body: var(--rel-colors-gray-600);
   --rel-text-caption: var(--rel-colors-gray-500);
-  --rel-text-placeholder: var(--rel-colors-gray-300);
+  --rel-text-placeholder: var(--rel-colors-gray-400);
   --rel-text-disabled: var(--rel-colors-gray-200);
   --rel-text-inverse: var(--rel-colors-gray-0);
-  --rel-text-danger: var(--rel-colors-red-600);
+  --rel-text-danger: var(--rel-colors-red-700);
   --rel-text-warning: var(--rel-colors-yellow-800);
-  --rel-text-info: var(--rel-colors-blue-500);
-  --rel-text-success: var(--rel-colors-green-600);
+  --rel-text-info: var(--rel-colors-blue-700);
+  --rel-text-success: var(--rel-colors-green-700);
 
   /* --- border --- */
-  --rel-border-default: var(--rel-colors-gray-100);
-  --rel-border-subtle: var(--rel-colors-gray-50);
-  --rel-border-accent: var(--rel-colors-gray-200);
+  --rel-border-default: var(--rel-colors-gray-400);
+  --rel-border-subtle: var(--rel-colors-gray-100);
+  --rel-border-accent: var(--rel-colors-gray-500);
   --rel-border-strong: var(--rel-colors-gray-950);
   --rel-border-inverse: var(--rel-colors-gray-0);
   --rel-border-brand: var(--rel-colors-brand-500);
@@ -440,7 +438,7 @@
   --rel-border-success: var(--rel-colors-green-500);
   --rel-border-success-strong: var(--rel-colors-green-800);
   --rel-border-danger-subtle: var(--rel-colors-red-100);
-  --rel-border-danger: var(--rel-colors-red-500);
+  --rel-border-danger: var(--rel-colors-red-600);
   --rel-border-danger-strong: var(--rel-colors-red-800);
   --rel-border-warning-subtle: var(--rel-colors-yellow-100);
   --rel-border-warning: var(--rel-colors-yellow-500);
@@ -449,6 +447,7 @@
   --rel-border-focus-static: var(--rel-colors-gray-100);
   --rel-border-focus-subtle: var(--rel-colors-gray-100);
   --rel-border-focus-inner: var(--rel-colors-gray-0);
+  --rel-border-info: var(--rel-colors-blue-500);
 
   /* --- action --- */
   --rel-action-overlay-hover: var(--rel-colors-dark-alpha-1);
@@ -458,8 +457,8 @@
   --rel-action-overlay-hover-inverse: var(--rel-colors-light-alpha-4);
   --rel-action-neutral-static-hover: var(--rel-colors-light-alpha-1);
   --rel-action-neutral-fill: var(--rel-colors-gray-950);
-  --rel-action-neutral-fill-hover: var(--rel-colors-gray-700);
-  --rel-action-neutral-fill-dragged: var(--rel-colors-gray-600);
+  --rel-action-neutral-fill-hover: var(--rel-colors-gray-600);
+  --rel-action-neutral-fill-dragged: var(--rel-colors-gray-700);
   --rel-action-neutral-subtle: var(--rel-colors-gray-50);
   --rel-action-neutral-subtle-hover: var(--rel-colors-gray-50);
   --rel-action-neutral-subtle-dragged: var(--rel-colors-gray-100);
@@ -472,35 +471,35 @@
   --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-600);
   --rel-action-neutral-border-subtle-hover: var(--rel-colors-gray-100);
   --rel-action-neutral-border-subtle-dragged: var(--rel-colors-gray-200);
-  --rel-action-neutral-border-outline: var(--rel-colors-gray-300);
+  --rel-action-neutral-border-outline: var(--rel-colors-gray-400);
   --rel-action-neutral-border-outline-hover: var(--rel-colors-gray-950);
   --rel-action-brand-fill: var(--rel-colors-brand-500);
   --rel-action-brand-fill-hover: var(--rel-colors-brand-600);
   --rel-action-brand-fill-disabled: var(--rel-colors-gray-200);
   --rel-action-brand-label-icons-primary: var(--rel-colors-gray-950);
-  --rel-action-danger-fill: var(--rel-colors-red-500);
-  --rel-action-danger-fill-hover: var(--rel-colors-red-600);
-  --rel-action-danger-fill-dragged: var(--rel-colors-red-400);
+  --rel-action-danger-fill: var(--rel-colors-red-600);
+  --rel-action-danger-fill-hover: var(--rel-colors-red-700);
+  --rel-action-danger-fill-dragged: var(--rel-colors-red-800);
   --rel-action-danger-subtle: var(--rel-colors-red-50);
   --rel-action-danger-subtle-hover: var(--rel-colors-red-50);
   --rel-action-danger-subtle-dragged: var(--rel-colors-red-100);
   --rel-action-danger-outline-hover: var(--rel-colors-red-50);
   --rel-action-danger-ghost-hover: var(--rel-colors-red-50);
   --rel-action-danger-label-icons-fill: var(--rel-colors-gray-0);
-  --rel-action-danger-label-icons-subtle: var(--rel-colors-red-600);
-  --rel-action-danger-label-icons-subtle-hover: var(--rel-colors-red-600);
-  --rel-action-danger-label-icons-subtle-dragged: var(--rel-colors-red-700);
-  --rel-action-danger-label-icons-outline: var(--rel-colors-red-600);
-  --rel-action-danger-label-icons-ghost: var(--rel-colors-red-600);
-  --rel-action-danger-label-icons-link: var(--rel-colors-red-600);
-  --rel-action-danger-label-icons-link-hover: var(--rel-colors-red-600);
+  --rel-action-danger-label-icons-subtle: var(--rel-colors-red-700);
+  --rel-action-danger-label-icons-subtle-hover: var(--rel-colors-red-700);
+  --rel-action-danger-label-icons-subtle-dragged: var(--rel-colors-red-800);
+  --rel-action-danger-label-icons-outline: var(--rel-colors-red-700);
+  --rel-action-danger-label-icons-ghost: var(--rel-colors-red-700);
+  --rel-action-danger-label-icons-link: var(--rel-colors-red-700);
+  --rel-action-danger-label-icons-link-hover: var(--rel-colors-red-800);
   --rel-action-danger-border-subtle-hover: var(--rel-colors-red-100);
   --rel-action-danger-border-subtle-dragged: var(--rel-colors-red-200);
   --rel-action-danger-border-outline: var(--rel-colors-red-100);
   --rel-action-danger-border-outline-hover: var(--rel-colors-red-600);
   --rel-action-warning-fill: var(--rel-colors-yellow-400);
-  --rel-action-warning-fill-hover: var(--rel-colors-yellow-500);
-  --rel-action-warning-fill-dragged: var(--rel-colors-yellow-300);
+  --rel-action-warning-fill-hover: var(--rel-colors-yellow-300);
+  --rel-action-warning-fill-dragged: var(--rel-colors-yellow-500);
   --rel-action-warning-subtle: var(--rel-colors-yellow-100);
   --rel-action-warning-subtle-hover: var(--rel-colors-yellow-100);
   --rel-action-warning-subtle-dragged: var(--rel-colors-yellow-200);
@@ -510,23 +509,23 @@
   --rel-action-warning-label-icons-subtle-dragged: var(--rel-colors-yellow-900);
   --rel-action-warning-border-subtle-hover: var(--rel-colors-yellow-300);
   --rel-action-warning-border-subtle-dragged: var(--rel-colors-yellow-300);
-  --rel-action-success-fill: var(--rel-colors-green-500);
-  --rel-action-success-fill-hover: var(--rel-colors-green-600);
-  --rel-action-success-fill-dragged: var(--rel-colors-green-400);
+  --rel-action-success-fill: var(--rel-colors-green-600);
+  --rel-action-success-fill-hover: var(--rel-colors-green-700);
+  --rel-action-success-fill-dragged: var(--rel-colors-green-800);
   --rel-action-success-subtle: var(--rel-colors-green-50);
   --rel-action-success-subtle-hover: var(--rel-colors-green-50);
   --rel-action-success-subtle-dragged: var(--rel-colors-green-100);
   --rel-action-success-outline-hover: var(--rel-colors-green-300);
   --rel-action-success-ghost-hover: var(--rel-colors-green-50);
   --rel-action-success-label-icons-fill: var(--rel-colors-gray-0);
-  --rel-action-success-label-icons-subtle: var(--rel-colors-green-600);
-  --rel-action-success-label-icons-subtle-hover: var(--rel-colors-green-600);
-  --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-700);
+  --rel-action-success-label-icons-subtle: var(--rel-colors-green-700);
+  --rel-action-success-label-icons-subtle-hover: var(--rel-colors-green-700);
+  --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-800);
   --rel-action-success-border-subtle-hover: var(--rel-colors-green-200);
   --rel-action-success-border-subtle-dragged: var(--rel-colors-green-200);
-  --rel-action-info-fill: var(--rel-colors-blue-500);
-  --rel-action-info-fill-hover: var(--rel-colors-blue-600);
-  --rel-action-info-fill-dragged: var(--rel-colors-blue-400);
+  --rel-action-info-fill: var(--rel-colors-blue-700);
+  --rel-action-info-fill-hover: var(--rel-colors-blue-800);
+  --rel-action-info-fill-dragged: var(--rel-colors-blue-900);
   --rel-action-info-subtle: var(--rel-colors-blue-50);
   --rel-action-info-subtle-hover: var(--rel-colors-blue-50);
   --rel-action-info-subtle-dragged: var(--rel-colors-blue-100);
@@ -537,8 +536,8 @@
   --rel-action-info-border-subtle-hover: var(--rel-colors-blue-200);
   --rel-action-info-border-subtle-dragged: var(--rel-colors-blue-300);
 
-  /* --- additions --- */
-  --rel-border-info: var(--rel-colors-blue-500); /* ADDED: no V2 borders/info — aligned to info fill */
+  /* --- shadow --- */
+  --rel-shadow-color: var(--rel-colors-dark-alpha-3);
 }
 
 :root[data-theme="dark"], .dark {
@@ -555,12 +554,12 @@
   --rel-bg-page: var(--rel-colors-gray-900);
   --rel-bg-page-inverse: var(--rel-colors-gray-0);
   --rel-bg-surface: var(--rel-colors-gray-800);
-  --rel-bg-surface-elevated: var(--rel-colors-gray-900);
+  --rel-bg-surface-elevated: var(--rel-colors-gray-700);
   --rel-bg-surface-inverse: var(--rel-colors-gray-0);
   --rel-bg-neutral: var(--rel-colors-gray-800);
   --rel-bg-neutral-elevated-1: var(--rel-colors-gray-700);
   --rel-bg-neutral-elevated-2: var(--rel-colors-gray-600);
-  --rel-bg-neutral-elevated-3: var(--rel-colors-gray-400);
+  --rel-bg-neutral-elevated-3: var(--rel-colors-gray-500);
   --rel-bg-neutral-inverse-1: var(--rel-colors-gray-100);
   --rel-bg-neutral-inverse-2: var(--rel-colors-gray-0);
   --rel-bg-danger-light: var(--rel-colors-red-900);
@@ -568,25 +567,23 @@
   --rel-bg-warning-light: var(--rel-colors-yellow-900);
   --rel-bg-warning-strong: var(--rel-colors-yellow-100);
   --rel-bg-info-light: var(--rel-colors-blue-900);
-  --rel-bg-info: var(--rel-colors-blue-400);
   --rel-bg-info-strong: var(--rel-colors-blue-100);
   --rel-bg-success-light: var(--rel-colors-green-900);
   --rel-bg-success-strong: var(--rel-colors-green-100);
   --rel-bg-overlay-scrim: var(--rel-colors-dark-alpha-10);
   --rel-text-default: var(--rel-colors-gray-0);
-  --rel-text-label: var(--rel-colors-gray-200);
-  --rel-text-body: var(--rel-colors-gray-200);
-  --rel-text-caption: var(--rel-colors-gray-300);
-  --rel-text-placeholder: var(--rel-colors-gray-400);
+  --rel-text-label: var(--rel-colors-gray-50);
+  --rel-text-body: var(--rel-colors-gray-100);
+  --rel-text-caption: var(--rel-colors-gray-200);
+  --rel-text-placeholder: var(--rel-colors-gray-300);
   --rel-text-disabled: var(--rel-colors-gray-500);
   --rel-text-inverse: var(--rel-colors-gray-950);
   --rel-text-danger: var(--rel-colors-red-300);
   --rel-text-warning: var(--rel-colors-yellow-400);
   --rel-text-info: var(--rel-colors-blue-400);
   --rel-text-success: var(--rel-colors-green-300);
-  --rel-border-default: var(--rel-colors-gray-700);
-  --rel-border-subtle: var(--rel-colors-gray-800);
-  --rel-border-accent: var(--rel-colors-gray-500);
+  --rel-border-subtle: var(--rel-colors-gray-700);
+  --rel-border-accent: var(--rel-colors-gray-300);
   --rel-border-strong: var(--rel-colors-gray-0);
   --rel-border-inverse: var(--rel-colors-gray-950);
   --rel-border-success-subtle: var(--rel-colors-green-800);
@@ -601,6 +598,7 @@
   --rel-border-focus: var(--rel-colors-gray-0);
   --rel-border-focus-subtle: var(--rel-colors-gray-700);
   --rel-border-focus-inner: var(--rel-colors-gray-900);
+  --rel-border-info: var(--rel-colors-blue-400);
   --rel-action-overlay-hover: var(--rel-colors-light-alpha-1);
   --rel-action-overlay-hover-strong: var(--rel-colors-light-alpha-2);
   --rel-action-overlay-pressed: var(--rel-colors-light-alpha-3);
@@ -618,10 +616,9 @@
   --rel-action-neutral-label-icons-outline: var(--rel-colors-gray-0);
   --rel-action-neutral-label-icons-ghost: var(--rel-colors-gray-0);
   --rel-action-neutral-label-icons-link: var(--rel-colors-gray-0);
-  --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-0);
+  --rel-action-neutral-label-icons-link-hover: var(--rel-colors-gray-200);
   --rel-action-neutral-border-subtle-hover: var(--rel-colors-gray-600);
   --rel-action-neutral-border-subtle-dragged: var(--rel-colors-gray-500);
-  --rel-action-neutral-border-outline: var(--rel-colors-gray-400);
   --rel-action-neutral-border-outline-hover: var(--rel-colors-gray-0);
   --rel-action-brand-fill-disabled: var(--rel-colors-gray-600);
   --rel-action-danger-subtle: var(--rel-colors-red-900);
@@ -641,7 +638,8 @@
   --rel-action-danger-border-outline: var(--rel-colors-red-700);
   --rel-action-danger-border-outline-hover: var(--rel-colors-red-400);
   --rel-action-warning-fill: var(--rel-colors-yellow-500);
-  --rel-action-warning-fill-dragged: var(--rel-colors-yellow-400);
+  --rel-action-warning-fill-hover: var(--rel-colors-yellow-400);
+  --rel-action-warning-fill-dragged: var(--rel-colors-yellow-600);
   --rel-action-warning-subtle: var(--rel-colors-yellow-900);
   --rel-action-warning-subtle-hover: var(--rel-colors-yellow-900);
   --rel-action-warning-subtle-dragged: var(--rel-colors-yellow-800);
@@ -650,9 +648,6 @@
   --rel-action-warning-label-icons-subtle-dragged: var(--rel-colors-yellow-50);
   --rel-action-warning-border-subtle-hover: var(--rel-colors-yellow-800);
   --rel-action-warning-border-subtle-dragged: var(--rel-colors-yellow-700);
-  --rel-action-success-fill: var(--rel-colors-green-600);
-  --rel-action-success-fill-hover: var(--rel-colors-green-700);
-  --rel-action-success-fill-dragged: var(--rel-colors-green-500);
   --rel-action-success-subtle: var(--rel-colors-green-900);
   --rel-action-success-subtle-hover: var(--rel-colors-green-900);
   --rel-action-success-subtle-dragged: var(--rel-colors-green-800);
@@ -663,9 +658,6 @@
   --rel-action-success-label-icons-subtle-dragged: var(--rel-colors-green-50);
   --rel-action-success-border-subtle-hover: var(--rel-colors-green-800);
   --rel-action-success-border-subtle-dragged: var(--rel-colors-green-700);
-  --rel-action-info-fill: var(--rel-colors-blue-600);
-  --rel-action-info-fill-hover: var(--rel-colors-blue-700);
-  --rel-action-info-fill-dragged: var(--rel-colors-blue-500);
   --rel-action-info-subtle: var(--rel-colors-blue-900);
   --rel-action-info-subtle-hover: var(--rel-colors-blue-900);
   --rel-action-info-subtle-dragged: var(--rel-colors-blue-800);
@@ -674,8 +666,6 @@
   --rel-action-info-label-icons-subtle-dragged: var(--rel-colors-blue-50);
   --rel-action-info-border-subtle-hover: var(--rel-colors-blue-800);
   --rel-action-info-border-subtle-dragged: var(--rel-colors-blue-700);
-
-  --rel-border-info: var(--rel-colors-blue-400); /* ADDED */
 }
 
 /* ==================== V1 COMPAT — DEPRECATED ALIAS BLOCK ====================
@@ -890,3 +880,37 @@
   --rel-color-text-link: #66B3FF;
   --rel-color-text-link-hover: #99CCFF;
 }
+
+/* MOTION FOUNDATION START */
+/* AUTO-GENERATED from motion.tokens.json by packages/web/scripts/build-motion.mjs — do not edit. */
+/* Motion v1 (new in 1.5.0): opt-in tokens; no component timing reads them yet. */
+:root {
+  --rel-motion-duration-instant: 0ms;
+  --rel-motion-duration-fast: 100ms;
+  --rel-motion-duration-standard: 150ms;
+  --rel-motion-duration-moderate: 200ms;
+  --rel-motion-duration-slow: 250ms;
+  --rel-motion-duration-extended: 300ms;
+  --rel-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --rel-motion-easing-enter: cubic-bezier(0, 0, 0, 1);
+  --rel-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+  --rel-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+  --rel-motion-feedback-duration: var(--rel-motion-duration-standard);
+  --rel-motion-feedback-easing: var(--rel-motion-easing-standard);
+  --rel-motion-disclosure-duration: var(--rel-motion-duration-slow);
+  --rel-motion-disclosure-easing: var(--rel-motion-easing-standard);
+  --rel-motion-overlay-enter-duration: var(--rel-motion-duration-moderate);
+  --rel-motion-overlay-enter-easing: var(--rel-motion-easing-enter);
+  --rel-motion-overlay-exit-duration: var(--rel-motion-duration-standard);
+  --rel-motion-overlay-exit-easing: var(--rel-motion-easing-exit);
+  --rel-motion-loading-cycle: 1500ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --rel-motion-feedback-duration: 0ms;
+    --rel-motion-disclosure-duration: 0ms;
+    --rel-motion-overlay-enter-duration: 0ms;
+    --rel-motion-overlay-exit-duration: 0ms;
+  }
+}
+/* MOTION FOUNDATION END */

package/package.json

@@ -1,37 +1,60 @@
-{
-  "name": "@reliability-design/web",
-  "version": "1.4.8",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "sideEffects": true,
-  "scripts": {
-    "build": "tsup",
-    "test": "tsx --test src/components/rel-date-picker/date-format.test.ts src/components/rel-date-picker/date-parse.test.ts src/components/rel-time-picker/time-parse.test.ts"
-  },
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./vars.css": "./dist/styles/vars.css"
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "CHANGELOG.md"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@reliability-design/icons": "*",
-    "lit": "^3.1.0"
-  },
-  "devDependencies": {
-    "fs-extra": "^11.0.0",
-    "tiny-glob": "^0.2.9",
-    "tsup": "^8.0.0"
-  }
-}
+{
+  "name": "@reliability-design/web",
+  "version": "1.4.10",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "sideEffects": true,
+  "scripts": {
+    "prebuild": "node scripts/assert-dist.mjs icons && node scripts/build-motion.mjs",
+    "build": "tsup",
+    "postbuild": "node scripts/assert-dist.mjs web",
+    "prepublishOnly": "npm run build",
+    "motion:build": "node scripts/build-motion.mjs --write",
+    "readme:generate": "node scripts/readme/readme-generate.mjs --all",
+    "readme:check": "node scripts/readme/readme-generate.mjs --all --check",
+    "readme:audit": "node scripts/readme/readme-audit.mjs --check",
+    "test": "tsx --test scripts/build-motion.test.mjs src/core/rel-element.test.ts src/components/rel-date-picker/date-format.test.ts src/components/rel-date-picker/date-parse.test.ts src/components/rel-time-picker/time-parse.test.ts",
+    "cem:generate": "node scripts/cem/cem.mjs",
+    "cem:check": "node scripts/cem/cem.mjs --check",
+    "cem:angular": "node scripts/cem/cem-angular-check.mjs",
+    "cem:live": "node scripts/cem/cem-validate-live.mjs",
+    "cem:docs": "node scripts/cem/cem-docs-props.mjs"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./vars.css": "./dist/styles/vars.css",
+    "./motion.css": "./dist/styles/motion.css",
+    "./motion.tokens.json": "./dist/styles/motion.tokens.json",
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "custom-elements.json",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@reliability-design/icons": "*",
+    "lit": "^3.1.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "fs-extra": "^11.0.0",
+    "tiny-glob": "^0.2.9",
+    "tsup": "^8.0.0"
+  },
+  "customElements": "custom-elements.json"
+}

package/dist/styles/focus-ring.ts

@@ -1,84 +0,0 @@
-import { css } from "lit";
-
-/**
- * The composed focus ring (S1).
- *
- * Figma draws focus as up to two concentric strokes, and several components
- * also draw a hover / dragged stroke on the same edge. Implementing those as
- * per-component `outline` + `box-shadow` pairs does not work: `box-shadow` is
- * a single property, so a `:hover` rule that sets it wipes the focus ring a
- * `:focus-visible` rule set, and specificity decides the winner rather than
- * intent. rel-chip hit exactly this (its subtle tones set `border-color` on
- * hover, and moving that to an inset shadow clobbered the inner focus ring).
- *
- * So the layers are composed ONCE here, and every state rule contributes by
- * setting a custom property instead of re-declaring `box-shadow`. Widths
- * default to `0px`, so a layer costs nothing until a state turns it on, and
- * hover / dragged / focus can all be active at the same time.
- *
- *   --_rel-ring-w / -c          outer ring  (Figma strokeAlign=OUTSIDE)
- *   --_rel-ring-inner-w / -c    inner ring  (Figma strokeAlign=INSIDE)
- *   --_rel-ring-stroke-w / -c   hover / dragged stroke, also INSIDE
- *   --_rel-ring-elevation       the element's own box-shadow, if it has one
- *
- * ## Why the outer ring is an `outline` and not another shadow layer
- *
- * `box-shadow` is not painted in forced-colors mode (Windows High Contrast),
- * but `outline` is, and the UA forces it to the user's highlight colour. A
- * ring built entirely from shadows therefore disappears for exactly the users
- * who most depend on it — a WCAG 2.4.11 failure. Keeping the OUTER ring on
- * `outline` means focus stays visible there even though the inner ring and the
- * hover stroke (both decorative refinements) drop out. `outline` also never
- * affects layout, and at `outline-offset: 0` it sits flush against the border
- * box, which is precisely what strokeAlign=OUTSIDE means.
- *
- * ## Usage
- *
- *   static styles = [focusRing, css`…`];
- *
- * Put `class="rel-ring"` on the element that carries the ring, then drive it
- * from state rules:
- *
- *   .chip:has(.chip-action:focus-visible) { --_rel-ring-w: 1.5px; --_rel-ring-inner-w: 1px; }
- *   .chip:hover                           { --_rel-ring-stroke-w: 1px; --_rel-ring-stroke-c: …; }
- *
- * Recipe A (button, chip, checkbox, radio, switch): outer `--rel-border-focus`
- * at 1.5px, plus `--rel-border-focus-inner` INSIDE on filled styles only —
- * 2px on button, 1px on chip and switch.
- *
- * Recipe B (textfield, select, otp, picker triggers): keep the resting 1px
- * hairline and draw `--rel-border-strong` 2px outside it. Recipe B needs only
- * the outer ring here; the hairline stays the element's own `border`.
- *
- * An element that already has a shadow (elevation) must hand it over as
- * `--_rel-ring-elevation` instead of declaring `box-shadow` itself, or the
- * composed declaration below will replace it.
- */
-export const focusRing = css`
-  :host {
-    --_rel-ring-w: 0px;
-    --_rel-ring-c: var(--rel-border-focus);
-    --_rel-ring-inner-w: 0px;
-    --_rel-ring-inner-c: var(--rel-border-focus-inner);
-    --_rel-ring-stroke-w: 0px;
-    --_rel-ring-stroke-c: transparent;
-    --_rel-ring-elevation: 0 0 #0000;
-  }
-
-  .rel-ring {
-    outline: var(--_rel-ring-w) solid var(--_rel-ring-c);
-    outline-offset: 0;
-    box-shadow:
-      inset 0 0 0 var(--_rel-ring-stroke-w) var(--_rel-ring-stroke-c),
-      inset 0 0 0 var(--_rel-ring-inner-w) var(--_rel-ring-inner-c),
-      var(--_rel-ring-elevation);
-  }
-
-  /* Both inset layers are dropped here by the UA; the outer ring carries the
-     whole indication, so force it to the system highlight colour. */
-  @media (forced-colors: active) {
-    .rel-ring {
-      outline-color: Highlight;
-    }
-  }
-`;