@pgcorp/ui-kit 0.7.3 → 0.8.1

package/src/components/shared/controls/SInteractiveSurface.css

@@ -14,10 +14,36 @@
     color var(--s-motion-standard) ease;
 }
 
+.s-interactive-surface:has(.s-interactive-surface__actions > *) {
+  container-type: inline-size;
+}
+
+.s-interactive-surface__layout {
+  @apply grid min-h-0 min-w-0 w-full items-center;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.s-interactive-surface:has(.s-interactive-surface__actions > *) .s-interactive-surface__layout {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.s-interactive-surface__primary {
+  @apply relative flex min-h-0 min-w-0;
+}
+
+.s-interactive-surface__actions {
+  @apply flex min-w-0 shrink-0 items-center;
+  gap: var(--s-space-control-gap);
+}
+
 .s-interactive-surface[data-appearance='plain'] {
   @apply border-transparent bg-transparent dark:border-transparent dark:bg-transparent;
 }
 
+.s-interactive-surface[data-appearance='bare'] {
+  @apply overflow-visible border-0 bg-transparent dark:bg-transparent;
+}
+
 .s-interactive-surface__activation {
   @apply absolute inset-0 z-10 block h-full w-full cursor-pointer border-0 bg-transparent p-0;
   border-radius: inherit;
@@ -42,7 +68,9 @@
   pointer-events: none;
 }
 
-.s-interactive-surface[data-fill='container'] { @apply h-full w-full; }
+.s-interactive-surface[data-fill='container'],
+.s-interactive-surface[data-fill='container'] .s-interactive-surface__layout,
+.s-interactive-surface[data-fill='container'] .s-interactive-surface__primary { @apply h-full w-full; }
 .s-interactive-surface[data-density='compact'] { @apply text-sm; }
 .s-interactive-surface[data-density='comfortable'] { @apply text-base; }
 .s-interactive-surface[data-padding='none'] { @apply p-0; }
@@ -56,9 +84,31 @@
 .s-interactive-surface[data-s-tone='danger'] { @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950; }
 .s-interactive-surface[data-selected='true'] { @apply border-primary-400 bg-primary-50 dark:border-primary-600 dark:bg-primary-950; }
 .s-interactive-surface[data-pressed='true'] { @apply border-primary-500 bg-primary-100 dark:border-primary-500 dark:bg-primary-950/70; }
-.s-interactive-surface[data-disabled='true'] { @apply cursor-not-allowed opacity-60; }
-.s-interactive-surface[data-content-align='start'] { @apply justify-start text-left; }
-.s-interactive-surface[data-content-align='center'] { @apply justify-center text-center; }
+.s-interactive-surface[data-disabled='true'] { @apply cursor-not-allowed; }
+.s-interactive-surface[data-disabled='true']:not(:has(.s-interactive-surface__actions > *)),
+.s-interactive-surface[data-disabled='true']:has(.s-interactive-surface__actions > *) .s-interactive-surface__primary {
+  @apply opacity-60;
+}
+.s-interactive-surface[data-content-align='start'] .s-interactive-surface__content { @apply justify-start text-left; }
+.s-interactive-surface[data-content-align='center'] .s-interactive-surface__content { @apply justify-center text-center; }
+
+.s-interactive-surface[data-actions-layout='stacked']:has(.s-interactive-surface__actions > *) .s-interactive-surface__layout {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.s-interactive-surface[data-actions-layout='stacked'] .s-interactive-surface__actions {
+  @apply w-full;
+}
+
+@container (max-width: 32rem) {
+  .s-interactive-surface[data-actions-layout='responsive'] .s-interactive-surface__layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .s-interactive-surface[data-actions-layout='responsive'] .s-interactive-surface__actions {
+    @apply w-full;
+  }
+}
 
 .s-interactive-surface[data-mode='action']:not([data-disabled='true']),
 .s-interactive-surface[data-mode='link']:not([data-disabled='true']) {

package/src/components/shared/controls/SInteractiveSurface.vue

@@ -20,7 +20,8 @@ export type InteractiveSurfaceDensity = 'compact' | 'comfortable'
 export type InteractiveSurfacePadding = 'none' | 'sm' | 'md'
 export type InteractiveSurfaceRadius = 'md' | 'lg' | 'xl'
 export type InteractiveSurfaceFill = 'content' | 'container'
-export type InteractiveSurfaceAppearance = 'card' | 'plain'
+export type InteractiveSurfaceAppearance = 'card' | 'plain' | 'bare'
+export type InteractiveSurfaceActionsLayout = 'responsive' | 'inline' | 'stacked'
 
 /**
  * Единственный semantic-контракт поверхности: passive, action или ровно одна link-target.
@@ -60,6 +61,7 @@ export interface Props {
   radius?: InteractiveSurfaceRadius
   fill?: InteractiveSurfaceFill
   appearance?: InteractiveSurfaceAppearance
+  actionsLayout?: InteractiveSurfaceActionsLayout
   contentAlign?: 'start' | 'center'
   /** Полный binding явного STooltip trigger, направляемый на activation owner. / Complete explicit STooltip trigger binding routed to the activation owner. */
   tooltipTrigger?: STooltipTriggerBinding
@@ -73,6 +75,7 @@ const props = withDefaults(defineProps<Props>(), {
   radius: 'lg',
   fill: 'content',
   appearance: 'card',
+  actionsLayout: 'inline',
   contentAlign: 'start',
   tooltipTrigger: undefined,
 })
@@ -80,9 +83,11 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   activate: [event: MouseEvent]
 }>()
-defineSlots<{
+const slots = defineSlots<{
   /** Пассивное flow-содержимое поверхности. / Passive flow content of the surface. */
   default?: () => VNodeChild
+  /** Sibling controls inside the same visual chrome and outside the primary activation owner. */
+  actions?: () => VNodeChild
 }>()
 
 const ownedAttrs = useOwnedAttrs({ component: 'SInteractiveSurface', owner: 'interactive surface owner' })
@@ -297,40 +302,49 @@ function activateAction(event: MouseEvent): void {
     :data-radius="radius"
     :data-fill="fill"
     :data-appearance="appearance"
+    :data-actions-layout="actionsLayout"
+    :data-has-actions="Boolean(slots.actions) || undefined"
     :data-selected="selected || undefined"
     :data-pressed="surfacePressed"
     :data-disabled="surfaceDisabled || undefined"
     :data-content-align="contentAlign"
   >
-    <button
-      v-if="surfaceMode === 'action'"
-      v-bind="activationBindings()"
-      class="s-interactive-surface__activation"
-      type="button"
-      :disabled="surfaceDisabled"
-      :aria-label="resolvedAccessibleLabel"
-      :aria-pressed="surfacePressed"
-      @click="activateAction"
-    >
-      <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
-    </button>
-    <component
-      v-else-if="surfaceMode === 'link'"
-      :is="linkComponent"
-      v-bind="linkBindings()"
-      class="s-interactive-surface__activation"
-      :aria-label="resolvedAccessibleLabel"
-      :aria-current="selected ? 'page' : undefined"
-      :aria-disabled="surfaceDisabled || undefined"
-      :tabindex="surfaceDisabled ? -1 : undefined"
-      @click="activateLink"
-    >
-      <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
-    </component>
-    <div class="s-interactive-surface__content" data-passive-content="">
-      <PassiveContentBoundary :contract="passiveContentContract">
-        <slot />
-      </PassiveContentBoundary>
+    <div class="s-interactive-surface__layout">
+      <div class="s-interactive-surface__primary">
+        <button
+          v-if="surfaceMode === 'action'"
+          v-bind="activationBindings()"
+          class="s-interactive-surface__activation"
+          type="button"
+          :disabled="surfaceDisabled"
+          :aria-label="resolvedAccessibleLabel"
+          :aria-pressed="surfacePressed"
+          @click="activateAction"
+        >
+          <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
+        </button>
+        <component
+          v-else-if="surfaceMode === 'link'"
+          :is="linkComponent"
+          v-bind="linkBindings()"
+          class="s-interactive-surface__activation"
+          :aria-label="resolvedAccessibleLabel"
+          :aria-current="selected ? 'page' : undefined"
+          :aria-disabled="surfaceDisabled || undefined"
+          :tabindex="surfaceDisabled ? -1 : undefined"
+          @click="activateLink"
+        >
+          <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
+        </component>
+        <div class="s-interactive-surface__content" data-passive-content="">
+          <PassiveContentBoundary :contract="passiveContentContract">
+            <slot />
+          </PassiveContentBoundary>
+        </div>
+      </div>
+      <div v-if="$slots.actions" class="s-interactive-surface__actions">
+        <slot name="actions" />
+      </div>
     </div>
   </div>
 </template>

package/src/components/shared/controls/SListbox.vue

@@ -338,7 +338,7 @@ provide(listboxContextKey, {
   },
 })
 
-function focusOption(target: ListboxOptionRegistration, options = enabledRegistrations()): void {
+function focusOption(target: ListboxOptionRegistration): void {
   for (const option of registrations) option.element.tabIndex = -1
   target.element.tabIndex = 0
   target.element.focus()
@@ -451,7 +451,7 @@ function handleKeydown(event: KeyboardEvent): void {
     const match = searchOrder.find((option) => option.label().toLocaleLowerCase().startsWith(query))
     if (match) {
       event.preventDefault()
-      focusOption(match, options)
+      focusOption(match)
     }
     return
   }
@@ -467,7 +467,7 @@ function handleKeydown(event: KeyboardEvent): void {
   const target = options[nextIndex]
   if (!target) return
   event.preventDefault()
-  focusOption(target, options)
+  focusOption(target)
 }
 
 function focusSelectedOrFirst(): void {
@@ -476,7 +476,7 @@ function focusSelectedOrFirst(): void {
   }
   const options = enabledRegistrations()
   const target = options.find((option) => option.selected()) ?? options[0]
-  if (target) focusOption(target, options)
+  if (target) focusOption(target)
 }
 
 onBeforeUnmount(() => { if (typeaheadTimer) clearTimeout(typeaheadTimer) })

package/src/components/shared/controls/SSwitch.vue

@@ -13,7 +13,7 @@
     <template #default="field">
       <span class="s-switch-control">
         <input
-          ref="inputEl"
+          :ref="setInputElement"
           v-bind="ownedAttrs.bindings()"
           :id="field.controlId"
           type="checkbox"
@@ -75,10 +75,10 @@ const ownedAttrs = useOwnedAttrs({ component: 'SSwitch', owner: 'native switch i
 useInteractiveLeafRegistration({ owner: 'SSwitch' })
 const {
   checkedValue,
-  inputEl,
   inputId,
   onChange,
   onClick,
+  setInputElement,
 } = useBinaryInput({
   owner: 'SSwitch',
   inputName: 'switch',

package/src/components/shared/data-display/SActionCard.css

@@ -1,6 +1,10 @@
 @reference "../../../styles/reference.css";
 
-.s-action-card { @apply grid min-h-0 min-w-0 items-start gap-2; grid-template-columns: minmax(0, 1fr) auto; }
+.s-action-card { @apply min-h-0 min-w-0; }
 .s-action-card[data-fill='container'] { @apply h-full w-full; }
 .s-action-card__content { @apply flex min-h-0 min-w-0 w-full flex-1 flex-col; }
-.s-action-card__actions { @apply flex shrink-0 items-center gap-1; }
+.s-action-card__actions { @apply flex min-w-0 max-w-full shrink-0 items-center gap-1; }
+.s-action-card[data-actions-layout='responsive'] .s-action-card__actions,
+.s-action-card[data-actions-layout='stacked'] .s-action-card__actions {
+  @apply w-full;
+}

package/src/components/shared/data-display/SActionCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { InteractiveSurfaceContract, InteractiveSurfaceDensity, InteractiveSurfaceFill, InteractiveSurfacePadding, InteractiveSurfaceRadius, InteractiveSurfaceTone } from '../controls/SInteractiveSurface.vue'
+import type { VNodeChild } from 'vue'
+import type { InteractiveSurfaceActionsLayout, InteractiveSurfaceContract, InteractiveSurfaceDensity, InteractiveSurfaceFill, InteractiveSurfacePadding, InteractiveSurfaceRadius, InteractiveSurfaceTone } from '../controls/SInteractiveSurface.vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import SInteractiveSurface from '../controls/SInteractiveSurface.vue'
 
@@ -13,6 +14,7 @@ export interface Props {
   padding?: InteractiveSurfacePadding
   radius?: InteractiveSurfaceRadius
   fill?: InteractiveSurfaceFill
+  actionsLayout?: InteractiveSurfaceActionsLayout
 }
 
 withDefaults(defineProps<Props>(), {
@@ -22,14 +24,19 @@ withDefaults(defineProps<Props>(), {
   padding: 'md',
   radius: 'lg',
   fill: 'content',
+  actionsLayout: 'inline',
 })
 
 const emit = defineEmits<{ activate: [event: MouseEvent] }>()
+defineSlots<{
+  default?: () => VNodeChild
+  actions?: () => VNodeChild
+}>()
 const ownedAttrs = useOwnedAttrs({ component: 'SActionCard', owner: 'action card root' })
 </script>
 
 <template>
-  <div v-bind="ownedAttrs.bindings()" class="s-action-card" :data-has-actions="Boolean($slots.actions) || undefined" :data-fill="fill" :data-mode="surface.mode">
+  <div v-bind="ownedAttrs.bindings()" class="s-action-card" :data-has-actions="Boolean($slots.actions) || undefined" :data-fill="fill" :data-mode="surface.mode" :data-actions-layout="actionsLayout">
     <SInteractiveSurface
       :surface="surface"
       :selected="selected"
@@ -38,11 +45,14 @@ const ownedAttrs = useOwnedAttrs({ component: 'SActionCard', owner: 'action card
       :padding="padding"
       :radius="radius"
       :fill="fill"
+      :actions-layout="actionsLayout"
       @activate="emit('activate', $event)"
     >
       <div class="s-action-card__content"><slot /></div>
+      <template v-if="$slots.actions" #actions>
+        <div class="s-action-card__actions"><slot name="actions" /></div>
+      </template>
     </SInteractiveSurface>
-    <div v-if="$slots.actions" class="s-action-card__actions"><slot name="actions" /></div>
   </div>
 </template>
 

package/src/components/shared/data-display/SActionListItem.css

@@ -1,9 +1,8 @@
 @reference "../../../styles/reference.css";
 
 .s-action-list-item {
-  @apply grid min-h-12 min-w-0 items-center gap-2;
+  @apply min-h-12 min-w-0;
   height: max-content;
-  grid-template-columns: minmax(0, 1fr) auto;
 }
 
 .s-action-list-item[data-height-mode='fill'] {
@@ -94,7 +93,7 @@
 .s-action-list-item[data-density='compact'] .s-action-list-item__icon { @apply h-7 w-7; }
 
 .s-action-list-item[data-trailing-layout='stacked'] {
-  grid-template-columns: minmax(0, 1fr);
+  @apply w-full;
 }
 
 .s-action-list-item[data-trailing-layout='stacked'] .s-action-list-item__trailing {
@@ -103,12 +102,12 @@
 }
 
 @container (max-width: 32rem) {
-  .s-action-list-item[data-trailing-layout='responsive'] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
   .s-action-list-item[data-trailing-layout='responsive'] .s-action-list-item__trailing {
-    @apply w-full justify-end pb-2 pr-2;
+    @apply w-full flex-wrap justify-end gap-y-1 pb-2 pr-2;
     padding-left: calc(3.5rem + var(--s-action-list-item-indent));
   }
+
+  .s-action-list-item[data-trailing-layout='responsive'] .s-action-list-item__trailing > * {
+    max-width: 100%;
+  }
 }

package/src/components/shared/data-display/SActionListItem.vue

@@ -194,6 +194,7 @@ function emitAction(event: MouseEvent): void {
       :padding="surfacePadding"
       :radius="surfaceRadius"
       :fill="heightMode === 'fill' ? 'container' : 'content'"
+      :actions-layout="trailingLayout"
       @activate="emit('activate', $event)"
     >
       <div class="s-action-list-item__main" :class="{ 's-action-list-item__main--static': resolvedMode === 'static' }">
@@ -212,25 +213,27 @@ function emitAction(event: MouseEvent): void {
           </span>
         </span>
       </div>
+      <template v-if="hasTrailing" #actions>
+        <div class="s-action-list-item__trailing">
+          <slot name="status" />
+          <SBadge v-if="statusLabel" :severity="statusSeverity">{{ statusLabel }}</SBadge>
+          <SBadge v-for="badge in validatedBadges" :key="badge.id" :severity="badge.severity">
+            {{ badge.label }}
+          </SBadge>
+          <SButton
+            v-if="actionLabel"
+            size="sm"
+            :label="actionLabel"
+            :leading-icon="actionIcon"
+            :severity="actionSeverity"
+            :disabled="surfaceDisabled || actionDisabled"
+            @click="emitAction"
+          />
+          <slot name="actions" :disabled="surfaceDisabled || actionDisabled" :emit-action="emitAction" />
+          <component :is="trailingIcon" v-if="trailingIcon" class="s-action-list-item__trailing-icon" aria-hidden="true" />
+        </div>
+      </template>
     </SActionCard>
-    <div v-if="hasTrailing" class="s-action-list-item__trailing">
-      <slot name="status" />
-      <SBadge v-if="statusLabel" :severity="statusSeverity">{{ statusLabel }}</SBadge>
-      <SBadge v-for="badge in validatedBadges" :key="badge.id" :severity="badge.severity">
-        {{ badge.label }}
-      </SBadge>
-      <SButton
-        v-if="actionLabel"
-        size="sm"
-        :label="actionLabel"
-        :leading-icon="actionIcon"
-        :severity="actionSeverity"
-        :disabled="surfaceDisabled || actionDisabled"
-        @click="emitAction"
-      />
-      <slot name="actions" :disabled="surfaceDisabled || actionDisabled" :emit-action="emitAction" />
-      <component :is="trailingIcon" v-if="trailingIcon" class="s-action-list-item__trailing-icon" aria-hidden="true" />
-    </div>
   </div>
 </template>
 

package/src/components/shared/data-display/SChart.css

@@ -0,0 +1,149 @@
+@reference "../../../styles/reference.css";
+
+.s-chart {
+  @apply m-0 grid min-w-0 w-full text-surface-700 dark:text-surface-200;
+  gap: var(--s-space-content-gap);
+}
+
+.s-chart__viewport {
+  @apply relative min-w-0 w-full overflow-hidden rounded-md;
+  background: var(--s-chart-surface);
+}
+
+.s-chart[data-size='compact'] .s-chart__viewport { aspect-ratio: 15 / 4; }
+.s-chart[data-size='sm'] .s-chart__viewport { aspect-ratio: 8 / 3; }
+.s-chart[data-size='md'] .s-chart__viewport { aspect-ratio: 20 / 9; }
+.s-chart[data-size='lg'] .s-chart__viewport { aspect-ratio: 25 / 12; }
+
+.s-chart[data-empty='true'] .s-chart__viewport { aspect-ratio: auto; }
+.s-chart[data-size='compact'][data-empty='true'] .s-chart__viewport { min-height: 6rem; }
+.s-chart[data-size='sm'][data-empty='true'] .s-chart__viewport { min-height: 10rem; }
+.s-chart[data-size='md'][data-empty='true'] .s-chart__viewport { min-height: 14rem; }
+.s-chart[data-size='lg'][data-empty='true'] .s-chart__viewport { min-height: 18rem; }
+
+.s-chart__svg { @apply block h-full w-full overflow-visible; }
+
+.s-chart__grid line {
+  stroke: var(--s-chart-grid);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.s-chart__axis line {
+  stroke: var(--s-chart-axis);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.s-chart__axis text,
+.s-chart__data-label {
+  fill: var(--s-chart-label);
+  font-family: var(--font-sans);
+  font-size: 11px;
+}
+
+.s-chart[data-size='compact'] .s-chart__axis text,
+.s-chart[data-size='compact'] .s-chart__data-label { font-size: 9px; }
+
+.s-chart__axis .s-chart__axis-title {
+  fill: var(--s-chart-axis-title);
+  font-weight: 600;
+}
+
+.s-chart__line {
+  fill: none;
+  stroke: var(--s-chart-tone);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.s-chart[data-size='compact'] .s-chart__line { stroke-width: 2; }
+
+.s-chart__area {
+  fill: color-mix(in srgb, var(--s-chart-tone) 20%, transparent);
+  stroke: none;
+}
+
+.s-chart__marker {
+  fill: var(--s-chart-surface);
+  stroke: var(--s-chart-tone);
+  stroke-width: 2.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.s-chart__bar,
+.s-chart__slice {
+  fill: var(--s-chart-tone);
+  stroke: var(--s-chart-surface);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  transition: opacity var(--s-motion-fast) ease;
+}
+
+.s-chart__bar:hover,
+.s-chart__slice:hover { opacity: 0.82; }
+
+.s-chart__radial-label {
+  fill: var(--s-chart-label-on-series);
+  font-family: var(--font-sans);
+  font-size: 11px;
+  font-weight: 700;
+  paint-order: stroke;
+  stroke: color-mix(in srgb, var(--color-surface-950) 28%, transparent);
+  stroke-width: 2px;
+  stroke-linejoin: round;
+}
+
+.s-chart__center {
+  fill: var(--s-chart-center-label);
+  font-family: var(--font-sans);
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.s-chart__center-label {
+  fill: var(--s-chart-label);
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.s-chart__legend {
+  @apply flex min-w-0 flex-wrap items-center text-xs text-surface-600 dark:text-surface-300;
+  gap: var(--s-space-content-gap);
+}
+
+.s-chart__legend[data-position='top'] { @apply justify-start; }
+.s-chart__legend[data-position='bottom'] { @apply justify-center; }
+.s-chart__legend-item { @apply inline-flex min-w-0 items-center gap-1.5; }
+
+.s-chart__legend-swatch {
+  @apply block h-2.5 w-2.5 shrink-0 rounded-full;
+  background: var(--s-chart-tone);
+}
+
+.s-chart__data-table { @apply w-full border-collapse overflow-hidden rounded-md text-left text-sm; }
+
+.s-chart__data-table th,
+.s-chart__data-table td { @apply border-b border-surface-200 px-3 py-2 dark:border-surface-700; }
+
+.s-chart__data-table thead th {
+  @apply bg-surface-100 font-semibold text-surface-700 dark:bg-surface-800 dark:text-surface-200;
+}
+
+.s-chart__data-table tbody th { @apply font-medium; }
+.s-chart__data-table tbody td { @apply tabular-nums; }
+.s-chart__data-table--assistive { @apply sr-only; }
+
+[data-s-chart-tone='series-1'] { --s-chart-tone: var(--s-chart-series-1); }
+[data-s-chart-tone='series-2'] { --s-chart-tone: var(--s-chart-series-2); }
+[data-s-chart-tone='series-3'] { --s-chart-tone: var(--s-chart-series-3); }
+[data-s-chart-tone='series-4'] { --s-chart-tone: var(--s-chart-series-4); }
+[data-s-chart-tone='series-5'] { --s-chart-tone: var(--s-chart-series-5); }
+[data-s-chart-tone='series-6'] { --s-chart-tone: var(--s-chart-series-6); }
+[data-s-chart-tone='series-7'] { --s-chart-tone: var(--s-chart-series-7); }
+[data-s-chart-tone='series-8'] { --s-chart-tone: var(--s-chart-series-8); }
+[data-s-chart-tone='success'] { --s-chart-tone: var(--color-success-500); }
+[data-s-chart-tone='warn'] { --s-chart-tone: var(--color-warn-500); }
+[data-s-chart-tone='danger'] { --s-chart-tone: var(--color-danger-500); }