@ds-mo/ui 14.30.0 → 14.31.0

package/dist/styles/table.css

@@ -35,7 +35,7 @@
   --_table-wrap-secondary-padding-block: 0;
   --_table-surface: var(--ds-table-surface, var(--color-background-primary));
   --_table-header-surface: var(--ds-table-header-surface, var(--color-background-primary));
-  --_table-group-surface: var(--ds-table-group-surface, var(--color-background-faint-neutral));
+  --_table-group-surface: var(--ds-table-group-surface, var(--color-background-secondary));
   --_table-row-hover: var(--ds-table-row-hover, var(--color-interaction-hover));
   --_table-row-pressed: var(--ds-table-row-pressed, var(--color-interaction-pressed));
   --_table-row-selected: var(--ds-table-row-selected, var(--color-interaction-active-brand));
@@ -1463,7 +1463,7 @@
   inset-block-end: 0;
   z-index: 1;
   block-size: var(--dimension-stroke-width-012);
-  background: var(--_table-border);
+  background: var(--_table-column-border);
   pointer-events: none;
 }
 
@@ -1504,7 +1504,6 @@
 }
 
 :where(.ds-table__group-hero) {
-  position: relative;
   box-sizing: border-box;
   display: inline-flex;
   flex: 0 0 auto;
@@ -1513,20 +1512,30 @@
   margin-inline-start: var(--dimension-space-075);
 }
 
-:where(.ds-table__group-hero)::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  box-sizing: border-box;
-  border-radius: var(--dimension-radius-025);
-  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
-  pointer-events: none;
+:where(.ds-table__group-content--hero-two-track .ds-table__group-hero) {
+  align-self: center;
+}
+
+:where(.ds-table__table):not(:where(.ds-table__table--selectable))
+  :where(.ds-table__group-content--hero):not(:where(.ds-table__group-content--hero-two-track))
+  :where(.ds-table__group-hero),
+:where(.ds-table__sticky-group):not(:where(.ds-table__sticky-group--selectable))
+  :where(.ds-table__group-content--hero):not(:where(.ds-table__group-content--hero-two-track))
+  :where(.ds-table__group-hero) {
+  /* Without a selection lane, the sm figure shares the content's top and start inset. */
+  margin-inline-start: 0;
+}
+
+:where(.ds-table__table--selectable .ds-table__group-content--hero-two-track .ds-table__group-hero),
+:where(
+  .ds-table__sticky-group--selectable .ds-table__group-content--hero-two-track .ds-table__group-hero
+) {
+  /* The lg two-track figure starts exactly at the selection-column boundary. */
+  margin-inline-start: 0;
 }
 
 :where(.ds-table__table--selectable .ds-table__group-hero),
 :where(.ds-table__sticky-group--selectable .ds-table__group-hero) {
-  /* Margin, not padding: ::after inset:0 must hug the 24px sm fill. */
   margin-inline-end: var(--dimension-space-100);
 }
 
@@ -1578,17 +1587,48 @@
   padding-inline-start: var(--dimension-space-050);
 }
 
-:where(.ds-table__group-separator),
 :where(.ds-table__group-count),
 :where(.ds-table__group-accessory-separator) {
   flex: 0 0 auto;
 }
 
+:where(.ds-table__group-trailing) {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-self: flex-start;
+  align-items: flex-start;
+  gap: var(--dimension-space-100);
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__group-action) {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 calc(var(--dimension-size-500) - var(--dimension-space-100));
+  inline-size: calc(var(--dimension-size-500) - var(--dimension-space-100));
+  align-self: flex-start;
+  align-items: flex-start;
+  justify-content: flex-end;
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__group-action)::before {
+  content: '';
+  position: absolute;
+  inset-block-start: var(--dimension-space-025);
+  inset-inline-start: 0;
+  inline-size: var(--dimension-stroke-width-012);
+  block-size: calc(var(--_table-cell-track-min-block-size) - (2 * var(--dimension-space-025)));
+  background: var(--_table-column-border);
+  pointer-events: none;
+}
+
 :where(.ds-table__group-toggle) {
   --color-interaction-hover: transparent;
   --color-interaction-pressed: transparent;
   flex: 0 0 auto;
-  margin-inline-start: auto;
 }
 
 :where(.ds-table__load-cell),
@@ -1739,10 +1779,6 @@
     background: var(--ds-forced-color-surface);
   }
 
-  :where(.ds-table__group-hero)::after {
-    border-color: var(--ds-forced-color-content);
-  }
-
   :where(.ds-table__row--disabled) {
     color: var(--ds-forced-color-disabled);
     opacity: 1;

package/dist/types/components/Score/Score.d.ts

@@ -1,4 +1,4 @@
-import type { SafetyScoreLevel, ScoreSize } from './score-types';
+import type { SafetyScoreLevel, ScoreSize, ScoreVariant } from './score-types';
 export declare class Score {
     /** Display-ready headline figure. */
     value: string | number;
@@ -7,6 +7,11 @@ export declare class Score {
      * `lg` is the Card Overview recipe.
      */
     size: ScoreSize;
+    /**
+     * Value typography recipe. `dense` keeps the selected size's fill dimensions
+     * and uses a larger emphasized figure with tighter surrounding space.
+     */
+    variant: ScoreVariant;
     /**
      * Safety-score color level. Numeric values from 0–100 infer fair (0–50),
      * good (51–80), or excellent (81–100) when this is omitted.

package/dist/types/components/Score/index.d.ts

@@ -1,3 +1,3 @@
-export type { SafetyScoreLevel, ScoreSize } from './score-types';
+export type { SafetyScoreLevel, ScoreSize, ScoreVariant } from './score-types';
 export { resolveSafetyScoreLevel, resolveScoreLevel } from './score-model';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Score/score-model.d.ts

@@ -7,8 +7,15 @@ export declare function isSafetyScoreLevel(value: unknown): value is SafetyScore
 export declare function resolveSafetyScoreLevel(value: string | number): SafetyScoreLevel | undefined;
 export declare function resolveScoreLevel(value: string | number, level?: SafetyScoreLevel): SafetyScoreLevel | undefined;
 export declare const SCORE_VALUE_VARIANT: {
-    readonly sm: "text-title-small";
-    readonly md: "text-title-large";
-    readonly lg: "text-display-small";
+    readonly default: {
+        readonly sm: "text-title-small";
+        readonly md: "text-title-medium";
+        readonly lg: "text-title-large";
+    };
+    readonly dense: {
+        readonly sm: "text-title-medium";
+        readonly md: "text-title-large";
+        readonly lg: "text-display-small";
+    };
 };
 //# sourceMappingURL=score-model.d.ts.map

package/dist/types/components/Score/score-types.d.ts

@@ -1,5 +1,7 @@
 export type SafetyScoreLevel = 'fair' | 'good' | 'excellent';
 export type ScoreSize = 'sm' | 'md' | 'lg';
+export type ScoreVariant = 'default' | 'dense';
 export declare const SCORE_SIZES: readonly ["sm", "md", "lg"];
+export declare const SCORE_VARIANTS: readonly ["default", "dense"];
 export declare const SAFETY_SCORE_LEVELS: readonly ["fair", "good", "excellent"];
 //# sourceMappingURL=score-types.d.ts.map

package/dist/types/components/Table/table-model.d.ts

@@ -49,8 +49,17 @@ export declare function resolvedTableGroupCount(group: TableGroup): number;
 export declare const TABLE_GROUP_ACCESSORY_LIMIT = 4;
 /** Trim, drop empty copy, and cap accessories at the second-track limit. */
 export declare function tableGroupAccessories(group: TableGroup): TableGroupAccessory[];
-/** Group-header score fill. Same sm density on one- and two-track headers. */
-export declare const TABLE_GROUP_HERO_SCORE_SIZE: "sm";
+/** Score recipes for a leading group-header hero spanning one or two tracks. */
+export declare const TABLE_GROUP_HERO_SCORE_PRESENTATION: {
+    readonly 1: {
+        readonly size: "sm";
+        readonly variant: "default";
+    };
+    readonly 2: {
+        readonly size: "lg";
+        readonly variant: "default";
+    };
+};
 /** Resolve a supported group-header hero, or undefined when none is supplied. */
 export declare function tableGroupHero(group: TableGroup): TableGroupHero | undefined;
 export declare const TABLE_GROUP_INTENTS: readonly ["brand", "neutral", "negative", "warning", "caution", "positive"];

package/dist/types/components/Table/table-types.d.ts

@@ -353,6 +353,8 @@ export interface TableGroupHeroScore {
     kind: 'score';
     value: string | number;
     level?: SafetyScoreLevel;
+    /** Span one label track by default, or center a larger score across two tracks. */
+    tracks?: 1 | 2;
     /** Accessible name prefix, for example “Safety score”. */
     label?: string;
     isLoading?: boolean;

package/dist/types/components.d.ts

@@ -56,7 +56,7 @@ import { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
 import { PanelToolHeaderActionDetail, PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolsHeaders, PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryActionDetail, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 import { PaperTextureConfig } from "./components/PaperTexture/paper-texture-types";
 import { RadioOption, RadioSize } from "./components/Radio/Radio";
-import { SafetyScoreLevel, ScoreSize } from "./components/Score/score-types";
+import { SafetyScoreLevel, ScoreSize, ScoreVariant } from "./components/Score/score-types";
 import { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
 import { SelectBackground, SelectIndicator, SelectOption, SelectOptionActionDetail, SelectOptionSubtextActionDetail, SelectPopupAlign, SelectSection, SelectSize, SelectValue, SelectWidth } from "./components/Select/Select";
 import { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellSectionNavigation, ShellToolsConfig } from "./components/ShellApp/shell-app-types";
@@ -130,7 +130,7 @@ export { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
 export { PanelToolHeaderActionDetail, PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolsHeaders, PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryActionDetail, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 export { PaperTextureConfig } from "./components/PaperTexture/paper-texture-types";
 export { RadioOption, RadioSize } from "./components/Radio/Radio";
-export { SafetyScoreLevel, ScoreSize } from "./components/Score/score-types";
+export { SafetyScoreLevel, ScoreSize, ScoreVariant } from "./components/Score/score-types";
 export { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
 export { SelectBackground, SelectIndicator, SelectOption, SelectOptionActionDetail, SelectOptionSubtextActionDetail, SelectPopupAlign, SelectSection, SelectSize, SelectValue, SelectWidth } from "./components/Select/Select";
 export { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellSectionNavigation, ShellToolsConfig } from "./components/ShellApp/shell-app-types";
@@ -2561,6 +2561,11 @@ export namespace Components {
           * @default ''
          */
         "value": string | number;
+        /**
+          * Value typography recipe. `dense` keeps the selected size's fill dimensions and uses a larger emphasized figure with tighter surrounding space.
+          * @default 'default'
+         */
+        "variant": ScoreVariant;
     }
     interface DsScrollOverlay {
         /**
@@ -8247,6 +8252,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "value"?: string | number;
+        /**
+          * Value typography recipe. `dense` keeps the selected size's fill dimensions and uses a larger emphasized figure with tighter surrounding space.
+          * @default 'default'
+         */
+        "variant"?: ScoreVariant;
     }
     interface DsScrollOverlay {
         /**
@@ -10466,6 +10476,7 @@ declare namespace LocalJSX {
     interface DsScoreAttributes {
         "value": string;
         "size": ScoreSize;
+        "variant": ScoreVariant;
         "level": SafetyScoreLevel | undefined;
         "isLoading": boolean;
         "label": string;

package/dist/vue/ds-score.js

@@ -6,6 +6,7 @@ import { defineCustomElement as defineDsScore } from '@ds-mo/ui/components/ds-sc
 export const DsScore = /*@__PURE__*/ defineContainer('ds-score', defineDsScore, [
     'value',
     'size',
+    'variant',
     'level',
     'isLoading',
     'label'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.30.0",
+  "version": "14.31.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/dist/components/p-DDOuPq-N.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,h as o,a as r,t as n}from"./index.js";import{d as i}from"./p-1gt8QlyW.js";import{d as c}from"./p-aMyflqva.js";const a=["fair","good","excellent"];function d(e){return typeof e==="string"&&a.includes(e)}function t(e){if(typeof e==="string"&&e.trim()==="")return undefined;const s=typeof e==="number"?e:Number(e);if(!Number.isFinite(s)||s<0||s>100)return undefined;if(s<=50)return"fair";if(s<=80)return"good";return"excellent"}function l(e,s){return d(s)?s:t(e)}const b={sm:"text-title-small",md:"text-title-large",lg:"text-display-small"};const g=()=>`.ds-control-frame.sc-ds-score{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-score{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-score{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-score{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-score{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-score{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}@media (forced-colors: active){.sc-ds-score:root,.sc-ds-score-h,.ds-forced-colors-scope.sc-ds-score{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-score-h{display:inline-flex;align-items:center;box-sizing:border-box;min-width:0;--_score-badge-inline-size:var(--dimension-size-500);--_score-badge-block-size:var(--dimension-size-400);--_score-skeleton-inset:calc(var(--_score-badge-block-size) / 8)}.score--sm.sc-ds-score-h{--_score-badge-inline-size:calc(var(--dimension-size-400) - var(--dimension-space-050));--_score-badge-block-size:var(--dimension-size-300)}.score--md.sc-ds-score-h{--_score-badge-inline-size:var(--dimension-size-500);--_score-badge-block-size:var(--dimension-size-400)}.score--lg.sc-ds-score-h{--_score-badge-inline-size:calc(var(--dimension-size-600) + var(--dimension-space-100));--_score-badge-block-size:var(--dimension-size-500)}.score__badge.sc-ds-score{display:flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--_score-badge-inline-size);block-size:var(--_score-badge-block-size);overflow:hidden;border-radius:var(--dimension-radius-025);background:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral);-webkit-user-select:none;user-select:none}.score__badge--fair.sc-ds-score{background:var(--color-safety-score-background-fair);color:var(--color-safety-score-foreground-on-fair)}.score__badge--good.sc-ds-score{background:var(--color-safety-score-background-good);color:var(--color-safety-score-foreground-on-good)}.score__badge--excellent.sc-ds-score{background:var(--color-safety-score-background-excellent);color:var(--color-safety-score-foreground-on-excellent)}.score__value.sc-ds-score,.score__badge.sc-ds-score ds-skeleton.sc-ds-score{flex:0 0 auto}.score__badge--loading.sc-ds-score{padding-inline:var(--_score-skeleton-inset)}.score__badge--loading.sc-ds-score .score__value.sc-ds-score{flex:1 1 auto;inline-size:100%;block-size:100%;max-inline-size:100%;max-block-size:100%;min-inline-size:0}@media (forced-colors: active){.score__badge.sc-ds-score{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface);color:var(--ds-forced-color-content)}}`;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.value="";this.size="md";this.isLoading=false;this.label=""}render(){const e=this.size;const s=l(this.value,this.level);const n=b[e];const i=[this.label.trim(),this.isLoading?"":this.value].filter(Boolean).join(" ");return o(r,{key:"d8cb0a5b2814b38808d345b64b7cf8086fb5c33f",class:{score:true,[`score--${e}`]:true,"score--loading":this.isLoading},role:i?"img":undefined,"aria-busy":this.isLoading?"true":undefined,"aria-label":i||undefined},o("span",{key:"eb7210283bcaa73fa1326579ea319ef8685df3fc",class:{score__badge:true,[`score__badge--${s}`]:Boolean(s),"score__badge--loading":this.isLoading}},this.isLoading?o("ds-skeleton",{class:"score__value",variant:"text",textVariant:n,background:s?"bold":"faint"}):o("ds-text",{as:"span",class:"score__value ds-control-label-box",variant:n,emphasis:true,color:"inherit",fontFeature:"tabular-nums"},this.value)))}static get style(){return g()}},[2,"ds-score",{value:[8],size:[1],level:[1],isLoading:[4,"is-loading"],label:[1]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-score","ds-skeleton","ds-text"];e.forEach((e=>{switch(e){case"ds-score":if(!customElements.get(n(e))){customElements.define(n(e),f)}break;case"ds-skeleton":if(!customElements.get(n(e))){i()}break;case"ds-text":if(!customElements.get(n(e))){c()}break}}))}u();export{f as S,u as d,d as i};
-//# sourceMappingURL=p-DDOuPq-N.js.map

package/dist/components/p-DDOuPq-N.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SAFETY_SCORE_LEVELS","isSafetyScoreLevel","value","includes","resolveSafetyScoreLevel","trim","undefined","numericValue","Number","isFinite","resolveScoreLevel","level","SCORE_VALUE_VARIANT","sm","md","lg","scoreCss","Score","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","isLoading","label","render","valueVariant","accessibleName","filter","Boolean","join","h","Host","key","class","score","role","score__badge","variant","textVariant","background","as","emphasis","color","fontFeature"],"sources":["src/wc/components/Score/score-types.ts","src/wc/components/Score/score-model.ts","src/wc/components/Score/Score.css?tag=ds-score&encapsulation=scoped","src/wc/components/Score/Score.tsx"],"sourcesContent":["export type SafetyScoreLevel = 'fair' | 'good' | 'excellent';\nexport type ScoreSize = 'sm' | 'md' | 'lg';\n\nexport const SCORE_SIZES = ['sm', 'md', 'lg'] as const;\nexport const SAFETY_SCORE_LEVELS = ['fair', 'good', 'excellent'] as const;\n","import { SAFETY_SCORE_LEVELS, type SafetyScoreLevel, type ScoreSize } from './score-types';\n\nexport function isSafetyScoreLevel(value: unknown): value is SafetyScoreLevel {\n  return typeof value === 'string' && (SAFETY_SCORE_LEVELS as readonly string[]).includes(value);\n}\n\n/**\n * Infer a safety-score color level from a 0–100 figure. Non-numeric or out-of-range\n * values return undefined so the owner can supply `level` explicitly.\n */\nexport function resolveSafetyScoreLevel(value: string | number): SafetyScoreLevel | undefined {\n  if (typeof value === 'string' && value.trim() === '') return undefined;\n  const numericValue = typeof value === 'number' ? value : Number(value);\n  if (!Number.isFinite(numericValue) || numericValue < 0 || numericValue > 100) return undefined;\n  if (numericValue <= 50) return 'fair';\n  if (numericValue <= 80) return 'good';\n  return 'excellent';\n}\n\nexport function resolveScoreLevel(\n  value: string | number,\n  level?: SafetyScoreLevel\n): SafetyScoreLevel | undefined {\n  return isSafetyScoreLevel(level) ? level : resolveSafetyScoreLevel(value);\n}\n\nexport const SCORE_VALUE_VARIANT = {\n  sm: 'text-title-small',\n  md: 'text-title-large',\n  lg: 'text-display-small',\n} as const satisfies Record<\n  ScoreSize,\n  'text-title-small' | 'text-title-large' | 'text-display-small'\n>;\n","@import '../../utils/control-parts.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  --_score-badge-inline-size: var(--dimension-size-500);\n  --_score-badge-block-size: var(--dimension-size-400);\n  /* Matches the text skeleton’s 75% bar so the fill inset is even on all sides. */\n  --_score-skeleton-inset: calc(var(--_score-badge-block-size) / 8);\n}\n\n:host(.score--sm) {\n  --_score-badge-inline-size: calc(var(--dimension-size-400) - var(--dimension-space-050));\n  --_score-badge-block-size: var(--dimension-size-300);\n}\n\n:host(.score--md) {\n  --_score-badge-inline-size: var(--dimension-size-500);\n  --_score-badge-block-size: var(--dimension-size-400);\n}\n\n:host(.score--lg) {\n  --_score-badge-inline-size: calc(var(--dimension-size-600) + var(--dimension-space-100));\n  --_score-badge-block-size: var(--dimension-size-500);\n}\n\n.score__badge {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  inline-size: var(--_score-badge-inline-size);\n  block-size: var(--_score-badge-block-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.score__badge--fair {\n  background: var(--color-safety-score-background-fair);\n  color: var(--color-safety-score-foreground-on-fair);\n}\n\n.score__badge--good {\n  background: var(--color-safety-score-background-good);\n  color: var(--color-safety-score-foreground-on-good);\n}\n\n.score__badge--excellent {\n  background: var(--color-safety-score-background-excellent);\n  color: var(--color-safety-score-foreground-on-excellent);\n}\n\n.score__value,\n.score__badge ds-skeleton {\n  flex: 0 0 auto;\n}\n\n.score__badge--loading {\n  padding-inline: var(--_score-skeleton-inset);\n}\n\n.score__badge--loading .score__value {\n  flex: 1 1 auto;\n  inline-size: 100%;\n  block-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  min-inline-size: 0;\n}\n\n@media (forced-colors: active) {\n  .score__badge {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    background: var(--ds-forced-color-surface);\n    color: var(--ds-forced-color-content);\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { SCORE_VALUE_VARIANT, resolveScoreLevel } from './score-model';\nimport type { SafetyScoreLevel, ScoreSize } from './score-types';\n\n@Component({\n  tag: 'ds-score',\n  styleUrl: 'Score.css',\n  scoped: true,\n})\nexport class Score {\n  /** Display-ready headline figure. */\n  @Prop() value: string | number = '';\n  /**\n   * Visual density matching control height: `sm` 24px, `md` 32px, `lg` 40px.\n   * `lg` is the Card Overview recipe.\n   */\n  @Prop() size: ScoreSize = 'md';\n  /**\n   * Safety-score color level. Numeric values from 0–100 infer fair (0–50),\n   * good (51–80), or excellent (81–100) when this is omitted.\n   */\n  @Prop() level: SafetyScoreLevel | undefined;\n  /** Replace the figure with a skeleton while data resolves. */\n  @Prop() isLoading: boolean = false;\n  /** Accessible name prefix, for example “Safety score”. */\n  @Prop() label: string = '';\n\n  render() {\n    const size = this.size;\n    const level = resolveScoreLevel(this.value, this.level);\n    const valueVariant = SCORE_VALUE_VARIANT[size];\n    const accessibleName = [this.label.trim(), this.isLoading ? '' : this.value]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <Host\n        class={{\n          score: true,\n          [`score--${size}`]: true,\n          'score--loading': this.isLoading,\n        }}\n        role={accessibleName ? 'img' : undefined}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        aria-label={accessibleName || undefined}\n      >\n        <span\n          class={{\n            score__badge: true,\n            [`score__badge--${level}`]: Boolean(level),\n            'score__badge--loading': this.isLoading,\n          }}\n        >\n          {this.isLoading ? (\n            <ds-skeleton\n              class=\"score__value\"\n              variant=\"text\"\n              textVariant={valueVariant}\n              background={level ? 'bold' : 'faint'}\n            />\n          ) : (\n            <ds-text\n              as=\"span\"\n              class=\"score__value ds-control-label-box\"\n              variant={valueVariant}\n              emphasis={true}\n              color=\"inherit\"\n              fontFeature=\"tabular-nums\"\n            >\n              {this.value}\n            </ds-text>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAIO,MAAMA,EAAsB,CAAC,OAAQ,OAAQ,aCF9C,SAAUC,EAAmBC,GACjC,cAAcA,IAAU,UAAaF,EAA0CG,SAASD,EAC1F,CAMM,SAAUE,EAAwBF,GACtC,UAAWA,IAAU,UAAYA,EAAMG,SAAW,GAAI,OAAOC,UAC7D,MAAMC,SAAsBL,IAAU,SAAWA,EAAQM,OAAON,GAChE,IAAKM,OAAOC,SAASF,IAAiBA,EAAe,GAAKA,EAAe,IAAK,OAAOD,UACrF,GAAIC,GAAgB,GAAI,MAAO,OAC/B,GAAIA,GAAgB,GAAI,MAAO,OAC/B,MAAO,WACT,CAEM,SAAUG,EACdR,EACAS,GAEA,OAAOV,EAAmBU,GAASA,EAAQP,EAAwBF,EACrE,CAEO,MAAMU,EAAsB,CACjCC,GAAI,mBACJC,GAAI,mBACJC,GAAI,sBC7BN,MAAMC,EAAW,IAAM,yqH,MCSVC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAOUC,KAAApB,MAAyB,GAKzBoB,KAAAC,KAAkB,KAOlBD,KAAAE,UAAqB,MAErBF,KAAAG,MAAgB,EAmDzB,CAjDC,MAAAC,GACE,MAAMH,EAAOD,KAAKC,KAClB,MAAMZ,EAAQD,EAAkBY,KAAKpB,MAAOoB,KAAKX,OACjD,MAAMgB,EAAef,EAAoBW,GACzC,MAAMK,EAAiB,CAACN,KAAKG,MAAMpB,OAAQiB,KAAKE,UAAY,GAAKF,KAAKpB,OACnE2B,OAAOC,SACPC,KAAK,KAER,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,MAAO,KACP,CAAC,UAAUb,KAAS,KACpB,iBAAkBD,KAAKE,WAEzBa,KAAMT,EAAiB,MAAQtB,UAAS,YAC7BgB,KAAKE,UAAY,OAASlB,UAAS,aAClCsB,GAAkBtB,WAE9B0B,EAAA,QAAAE,IAAA,2CACEC,MAAO,CACLG,aAAc,KACd,CAAC,iBAAiB3B,KAAUmB,QAAQnB,GACpC,wBAAyBW,KAAKE,YAG/BF,KAAKE,UACJQ,EAAA,eACEG,MAAM,eACNI,QAAQ,OACRC,YAAab,EACbc,WAAY9B,EAAQ,OAAS,UAG/BqB,EAAA,WACEU,GAAG,OACHP,MAAM,oCACNI,QAASZ,EACTgB,SAAU,KACVC,MAAM,UACNC,YAAY,gBAEXvB,KAAKpB,Q","ignoreList":[]}