morya-ui 0.4.0 → 0.4.1

package/dist/tag/style.css

@@ -9,6 +9,10 @@
     --m-color-border: #d9d9d9;
     --m-color-split: #f0f0f0;
     --m-color-focus-ring: #1677ff;
+    /* Soft translucent control-outline ring (primary bg composited over container) */
+    --m-color-control-outline: rgba(5, 145, 255, 0.1);
+    --m-color-control-outline-danger: rgba(255, 38, 5, 0.06);
+    --m-color-control-outline-warning: rgba(255, 215, 5, 0.1);
     /* Control sizing: medium control height 32px */
     --m-control-height-small: 24px;
     --m-control-height-medium: 32px;
@@ -22,12 +26,12 @@
 
     --m-radius-control: 6px;
     --m-border-width: 1px;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 45%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 45%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 45%, transparent);
+    --m-focus-outline-width: 2px;
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     --m-color-success: #52c41a;
     --m-color-info: #1677ff;
     --m-color-warning: #faad14;
@@ -253,7 +257,7 @@
     animation-play-state: paused !important;
 }
 
-/* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
+/* Global density: scales spacing + control heights (WD tokens) */
 :root,
 [data-m-density="comfortable"] {
     --m-density-scale: 1;
@@ -348,12 +352,15 @@
     --m-color-border: #424242;
     --m-color-split: #303030;
     --m-color-focus-ring: #3c89e8;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 50%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 50%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 50%, transparent);
+    /* Dark: getAlphaColor(color*Bg, colorBgContainer) */
+    --m-color-control-outline: rgba(23, 117, 249, 0.31);
+    --m-color-control-outline-danger: rgba(249, 75, 78, 0.31);
+    --m-color-control-outline-warning: rgba(250, 173, 20, 0.3);
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
     --m-color-success: #49aa19;
     --m-color-info: #1668dc;
@@ -893,8 +900,10 @@
     width: 100%;
 }
 
+.m-textarea--invalid:focus,
 .m-textarea--invalid:focus-visible,
 .m-select--invalid.m-select--open,
+.m-select--invalid:focus,
 .m-select--invalid:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
@@ -1103,20 +1112,28 @@
     opacity: var(--m-opacity-disabled);
 }
 
-/* Shared Naive-like hover/focus for remaining form triggers */
+/* Shared hover/focus for remaining form triggers */
 .m-inputotp__input:hover:not(:disabled):not(:focus),
-.m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
-.m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
+.m-cascadeselect:not(.m-cascadeselect--open)
+    .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
+.m-treeselect:not(.m-treeselect--open)
+    .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-inputcolor__text:hover:not(:disabled):not(:focus),
-.m-inputtags:hover:not(.m-inputtags--disabled),
-.m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked),
-.m-inplace__display:hover {
+.m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
+.m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
+.m-inplace__display:hover:not(:focus-visible) {
     border-color: var(--m-color-primary-hover);
 }
 
+.m-inputotp__input:focus,
 .m-inputotp__input:focus-visible,
+.m-cascadeselect--open .m-cascadeselect__trigger,
+.m-cascadeselect__trigger:focus,
 .m-cascadeselect__trigger:focus-visible,
+.m-treeselect--open .m-treeselect__trigger,
+.m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
+.m-inputcolor__text:focus,
 .m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
@@ -1125,13 +1142,15 @@
 .m-splitbutton__trigger:focus-visible,
 .m-inplace__display:focus-visible,
 .m-pagination__button:focus-visible {
-    border-color: var(--m-color-primary-hover);
+    border-color: var(--m-color-primary);
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }
 
+.m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
 .m-inputtags--invalid:focus-within,
+.m-inputcolor--invalid .m-inputcolor__text:focus,
 .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
@@ -1236,11 +1255,11 @@
 }
 
 .m-tag {
-    --m-tag-icon-size: 0.75rem;
-    --m-tag-padding-block: 0;
+    --m-tag-icon-size: 0.875rem;
+    --m-tag-padding-block: var(--m-space-1);
     --m-tag-padding-inline: var(--m-space-2);
     --m-tag-close-gap: calc(var(--m-space-1) - var(--m-border-width));
-    --m-tag-line-height: 1.6667;
+    --m-tag-line-height: 1.4286;
     align-items: center;
     background: color-mix(in srgb, var(--m-color-primary) 12%, transparent);
     border: var(--m-border-width) solid transparent;
@@ -1249,7 +1268,7 @@
     color: var(--m-color-primary);
     display: inline-flex;
     font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-xs);
+    font-size: var(--m-font-size-sm);
     font-weight: 400;
     gap: var(--m-space-1);
     height: auto;
@@ -1321,17 +1340,19 @@
 }
 
 .m-tag--small {
-    --m-tag-icon-size: 0.625rem;
+    --m-tag-icon-size: 0.75rem;
     --m-tag-padding-block: 0;
-    --m-tag-padding-inline: var(--m-space-1);
+    --m-tag-padding-inline: var(--m-space-2);
+    --m-tag-line-height: 1.6667;
     font-size: var(--m-tag-font-size-small);
 }
 
 .m-tag--large {
-    --m-tag-icon-size: 0.875rem;
+    --m-tag-icon-size: 1rem;
     --m-tag-padding-block: var(--m-space-1);
     --m-tag-padding-inline: var(--m-space-3);
-    font-size: var(--m-font-size-sm);
+    --m-tag-line-height: 1.375;
+    font-size: var(--m-font-size-md);
 }
 
 .m-tag--bordered {

package/dist/terminal/style.css

@@ -9,6 +9,10 @@
     --m-color-border: #d9d9d9;
     --m-color-split: #f0f0f0;
     --m-color-focus-ring: #1677ff;
+    /* Soft translucent control-outline ring (primary bg composited over container) */
+    --m-color-control-outline: rgba(5, 145, 255, 0.1);
+    --m-color-control-outline-danger: rgba(255, 38, 5, 0.06);
+    --m-color-control-outline-warning: rgba(255, 215, 5, 0.1);
     /* Control sizing: medium control height 32px */
     --m-control-height-small: 24px;
     --m-control-height-medium: 32px;
@@ -22,12 +26,12 @@
 
     --m-radius-control: 6px;
     --m-border-width: 1px;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 45%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 45%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 45%, transparent);
+    --m-focus-outline-width: 2px;
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     --m-color-success: #52c41a;
     --m-color-info: #1677ff;
     --m-color-warning: #faad14;
@@ -253,7 +257,7 @@
     animation-play-state: paused !important;
 }
 
-/* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
+/* Global density: scales spacing + control heights (WD tokens) */
 :root,
 [data-m-density="comfortable"] {
     --m-density-scale: 1;
@@ -348,12 +352,15 @@
     --m-color-border: #424242;
     --m-color-split: #303030;
     --m-color-focus-ring: #3c89e8;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 50%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 50%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 50%, transparent);
+    /* Dark: getAlphaColor(color*Bg, colorBgContainer) */
+    --m-color-control-outline: rgba(23, 117, 249, 0.31);
+    --m-color-control-outline-danger: rgba(249, 75, 78, 0.31);
+    --m-color-control-outline-warning: rgba(250, 173, 20, 0.3);
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
     --m-color-success: #49aa19;
     --m-color-info: #1668dc;
@@ -893,8 +900,10 @@
     width: 100%;
 }
 
+.m-textarea--invalid:focus,
 .m-textarea--invalid:focus-visible,
 .m-select--invalid.m-select--open,
+.m-select--invalid:focus,
 .m-select--invalid:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
@@ -1103,20 +1112,28 @@
     opacity: var(--m-opacity-disabled);
 }
 
-/* Shared Naive-like hover/focus for remaining form triggers */
+/* Shared hover/focus for remaining form triggers */
 .m-inputotp__input:hover:not(:disabled):not(:focus),
-.m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
-.m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
+.m-cascadeselect:not(.m-cascadeselect--open)
+    .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
+.m-treeselect:not(.m-treeselect--open)
+    .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-inputcolor__text:hover:not(:disabled):not(:focus),
-.m-inputtags:hover:not(.m-inputtags--disabled),
-.m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked),
-.m-inplace__display:hover {
+.m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
+.m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
+.m-inplace__display:hover:not(:focus-visible) {
     border-color: var(--m-color-primary-hover);
 }
 
+.m-inputotp__input:focus,
 .m-inputotp__input:focus-visible,
+.m-cascadeselect--open .m-cascadeselect__trigger,
+.m-cascadeselect__trigger:focus,
 .m-cascadeselect__trigger:focus-visible,
+.m-treeselect--open .m-treeselect__trigger,
+.m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
+.m-inputcolor__text:focus,
 .m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
@@ -1125,13 +1142,15 @@
 .m-splitbutton__trigger:focus-visible,
 .m-inplace__display:focus-visible,
 .m-pagination__button:focus-visible {
-    border-color: var(--m-color-primary-hover);
+    border-color: var(--m-color-primary);
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }
 
+.m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
 .m-inputtags--invalid:focus-within,
+.m-inputcolor--invalid .m-inputcolor__text:focus,
 .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
@@ -1256,6 +1275,7 @@
     outline: none;
 }
 
+.m-terminal__input:focus,
 .m-terminal__input:focus-visible {
     box-shadow: var(--m-focus-shadow);
     outline: none;

package/dist/textarea/style.css

@@ -9,6 +9,10 @@
     --m-color-border: #d9d9d9;
     --m-color-split: #f0f0f0;
     --m-color-focus-ring: #1677ff;
+    /* Soft translucent control-outline ring (primary bg composited over container) */
+    --m-color-control-outline: rgba(5, 145, 255, 0.1);
+    --m-color-control-outline-danger: rgba(255, 38, 5, 0.06);
+    --m-color-control-outline-warning: rgba(255, 215, 5, 0.1);
     /* Control sizing: medium control height 32px */
     --m-control-height-small: 24px;
     --m-control-height-medium: 32px;
@@ -22,12 +26,12 @@
 
     --m-radius-control: 6px;
     --m-border-width: 1px;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 45%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 45%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 45%, transparent);
+    --m-focus-outline-width: 2px;
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     --m-color-success: #52c41a;
     --m-color-info: #1677ff;
     --m-color-warning: #faad14;
@@ -253,7 +257,7 @@
     animation-play-state: paused !important;
 }
 
-/* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
+/* Global density: scales spacing + control heights (WD tokens) */
 :root,
 [data-m-density="comfortable"] {
     --m-density-scale: 1;
@@ -348,12 +352,15 @@
     --m-color-border: #424242;
     --m-color-split: #303030;
     --m-color-focus-ring: #3c89e8;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 50%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 50%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 50%, transparent);
+    /* Dark: getAlphaColor(color*Bg, colorBgContainer) */
+    --m-color-control-outline: rgba(23, 117, 249, 0.31);
+    --m-color-control-outline-danger: rgba(249, 75, 78, 0.31);
+    --m-color-control-outline-warning: rgba(250, 173, 20, 0.3);
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
     --m-color-success: #49aa19;
     --m-color-info: #1668dc;
@@ -893,8 +900,10 @@
     width: 100%;
 }
 
+.m-textarea--invalid:focus,
 .m-textarea--invalid:focus-visible,
 .m-select--invalid.m-select--open,
+.m-select--invalid:focus,
 .m-select--invalid:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
@@ -1103,20 +1112,28 @@
     opacity: var(--m-opacity-disabled);
 }
 
-/* Shared Naive-like hover/focus for remaining form triggers */
+/* Shared hover/focus for remaining form triggers */
 .m-inputotp__input:hover:not(:disabled):not(:focus),
-.m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
-.m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
+.m-cascadeselect:not(.m-cascadeselect--open)
+    .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
+.m-treeselect:not(.m-treeselect--open)
+    .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-inputcolor__text:hover:not(:disabled):not(:focus),
-.m-inputtags:hover:not(.m-inputtags--disabled),
-.m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked),
-.m-inplace__display:hover {
+.m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
+.m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
+.m-inplace__display:hover:not(:focus-visible) {
     border-color: var(--m-color-primary-hover);
 }
 
+.m-inputotp__input:focus,
 .m-inputotp__input:focus-visible,
+.m-cascadeselect--open .m-cascadeselect__trigger,
+.m-cascadeselect__trigger:focus,
 .m-cascadeselect__trigger:focus-visible,
+.m-treeselect--open .m-treeselect__trigger,
+.m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
+.m-inputcolor__text:focus,
 .m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
@@ -1125,13 +1142,15 @@
 .m-splitbutton__trigger:focus-visible,
 .m-inplace__display:focus-visible,
 .m-pagination__button:focus-visible {
-    border-color: var(--m-color-primary-hover);
+    border-color: var(--m-color-primary);
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }
 
+.m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
 .m-inputtags--invalid:focus-within,
+.m-inputcolor--invalid .m-inputcolor__text:focus,
 .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
@@ -1469,30 +1488,41 @@
     border-color: var(--m-color-danger);
 }
 
+.m-textarea--invalid:hover:not(:disabled):not(:focus) {
+    border-color: var(--m-color-danger);
+}
+
+.m-textarea--invalid:focus,
 .m-textarea--invalid:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
+    outline: 0;
 }
 
 .m-textarea--warning {
     border-color: var(--m-color-warning);
 }
 
-.m-textarea--warning:focus-visible {
+.m-textarea--warning:hover:not(:disabled):not(:focus) {
     border-color: var(--m-color-warning);
-    box-shadow: var(--m-focus-shadow-warning);
 }
 
-.m-textarea:focus {
-    outline: none;
+.m-textarea--warning:focus,
+.m-textarea--warning:focus-visible {
+    border-color: var(--m-color-warning);
+    box-shadow: var(--m-focus-shadow-warning);
+    outline: 0;
 }
 
-.m-textarea:hover:not(:disabled):not(:focus) {
+.m-textarea:hover:not(:disabled):not(:focus):not(.m-textarea--invalid):not(
+        .m-textarea--warning
+    ) {
     border-color: var(--m-color-primary-hover);
 }
 
+.m-textarea:focus,
 .m-textarea:focus-visible {
-    border-color: var(--m-color-primary-hover);
+    border-color: var(--m-color-primary);
     box-shadow: var(--m-focus-shadow);
-    outline: none;
+    outline: 0;
 }

package/dist/theme/color.d.ts

@@ -48,6 +48,11 @@ export declare function generateColorPalette(input: string, options?: GeneratePa
 export declare function mixColors(from: string, to: string, weight: number): string;
 /** Apply an alpha channel to a hex color. */
 export declare function withAlpha(color: string, alpha: number): string;
+/**
+ * Find an rgba string that composites to `frontColor` when drawn over
+ * `backgroundColor`. Used for the soft control-outline ring.
+ */
+export declare function getAlphaColor(frontColor: string, backgroundColor: string): string;
 /** Relative luminance based darkness check (perceptual, WCAG-ish). */
 export declare function isDarkColor(color: string): boolean;
 export declare function rgbToHsl({ r, g, b }: RgbColor): HslColor;

package/dist/theme/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/theme/color.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAKD,gEAAgE;AAChE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,CAwBhD;AAUD,2CAA2C;AAC3C,wBAAgB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,CAEnD;AAED,gDAAgD;AAChD,wBAAgB,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,CAEzD;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGzE;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAoBxD;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAsBxD;AAqED,MAAM,WAAW,sBAAsB;IACrC,qEAAqE;IACrE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,qEAAqE;IACrE,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,sBAA2B,GAAG,MAAM,EAAE,CA+BlG;AAWD,qEAAqE;AACrE,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAS1E;AAED,6CAA6C;AAC7C,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,sEAAsE;AACtE,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAGlD;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAqBxD;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAsBxD;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAQ5D;AAED,uEAAuE;AACvE,wBAAgB,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhE"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/theme/color.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAKD,gEAAgE;AAChE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,CAwBhD;AAUD,2CAA2C;AAC3C,wBAAgB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,CAEnD;AAED,gDAAgD;AAChD,wBAAgB,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,CAEzD;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGzE;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAoBxD;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAsBxD;AAqED,MAAM,WAAW,sBAAsB;IACrC,qEAAqE;IACrE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,qEAAqE;IACrE,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,sBAA2B,GAAG,MAAM,EAAE,CA+BlG;AAWD,qEAAqE;AACrE,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAS1E;AAED,6CAA6C;AAC7C,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,GAAG,MAAM,CAcjF;AAED,sEAAsE;AACtE,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAGlD;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAqBxD;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAsBxD;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAQ5D;AAED,uEAAuE;AACvE,wBAAgB,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhE"}

package/dist/theme/derive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"derive.d.ts","sourceRoot":"","sources":["../../src/theme/derive.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,MAAM,WAAW,aAAa;IAC5B,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,6CAA6C;AAC7C,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAC7C,sEAAsE;AACtE,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAwD9C,mFAAmF;AACnF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAElD;AA6QD,kDAAkD;AAClD,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,aAAkB,GAAG,QAAQ,CAgBxF;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,QAAQ,GAAG,SAAS,CAO3D;AAYD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,GAAG,SAAS,CAiDlF;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,aAAkB,GAAG,SAAS,CAMvF"}
+{"version":3,"file":"derive.d.ts","sourceRoot":"","sources":["../../src/theme/derive.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,MAAM,WAAW,aAAa;IAC5B,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,6CAA6C;AAC7C,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAC7C,sEAAsE;AACtE,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAwD9C,mFAAmF;AACnF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAElD;AAoRD,kDAAkD;AAClD,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,aAAkB,GAAG,QAAQ,CAgBxF;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,QAAQ,GAAG,SAAS,CAO3D;AAYD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,GAAG,SAAS,CAwDlF;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,aAAkB,GAAG,SAAS,CAMvF"}

package/dist/theme/seed.d.ts

@@ -1,8 +1,8 @@
 /**
  * Seed tokens — the single source of truth every other token is derived from.
  *
- * Mirrors the classic seed layer (same names, same meanings) so palettes
- * derived here stay compatible with the design language the library targets.
+ * A classic seed layer with stable names and meanings, so palettes derived
+ * here stay consistent with the design language the library targets.
  * Values are plain data; no CSS units, no `var()` references.
  */
 export interface MSeedTokens {

package/dist/theme/styles.css

@@ -9,6 +9,10 @@
     --m-color-border: #d9d9d9;
     --m-color-split: #f0f0f0;
     --m-color-focus-ring: #1677ff;
+    /* Soft translucent control-outline ring (primary bg composited over container) */
+    --m-color-control-outline: rgba(5, 145, 255, 0.1);
+    --m-color-control-outline-danger: rgba(255, 38, 5, 0.06);
+    --m-color-control-outline-warning: rgba(255, 215, 5, 0.1);
     /* Control sizing: medium control height 32px */
     --m-control-height-small: 24px;
     --m-control-height-medium: 32px;
@@ -22,12 +26,12 @@
 
     --m-radius-control: 6px;
     --m-border-width: 1px;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 45%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 45%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 45%, transparent);
+    --m-focus-outline-width: 2px;
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     --m-color-success: #52c41a;
     --m-color-info: #1677ff;
     --m-color-warning: #faad14;
@@ -253,7 +257,7 @@
     animation-play-state: paused !important;
 }
 
-/* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
+/* Global density: scales spacing + control heights (WD tokens) */
 :root,
 [data-m-density="comfortable"] {
     --m-density-scale: 1;
@@ -348,12 +352,15 @@
     --m-color-border: #424242;
     --m-color-split: #303030;
     --m-color-focus-ring: #3c89e8;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 50%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 50%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 50%, transparent);
+    /* Dark: getAlphaColor(color*Bg, colorBgContainer) */
+    --m-color-control-outline: rgba(23, 117, 249, 0.31);
+    --m-color-control-outline-danger: rgba(249, 75, 78, 0.31);
+    --m-color-control-outline-warning: rgba(250, 173, 20, 0.3);
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
     --m-color-success: #49aa19;
     --m-color-info: #1668dc;