@ds-mo/ui 7.0.0 → 8.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/.build-stamp +1 -1
- package/dist/agent.json +572 -39
- package/dist/angular/ds-divider.d.ts +1 -1
- package/dist/angular/ds-divider.js +3 -3
- package/dist/angular/ds-icon.d.ts +1 -1
- package/dist/angular/ds-icon.js +3 -3
- package/dist/angular/ds-skeleton.d.ts +1 -1
- package/dist/angular/ds-skeleton.js +3 -3
- package/dist/angular/ds-tag.d.ts +8 -2
- package/dist/angular/ds-tag.js +9 -5
- package/dist/components/ds-app-shell.js +1 -1
- package/dist/components/ds-app-shell.js.map +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-line.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-chip.js.map +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-divider.js.map +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-loader.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-panel-tools.js.map +1 -1
- package/dist/components/ds-radio-group.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-tag.js.map +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-AIFkzp4M.js → p-3bRWSqaN.js} +2 -2
- package/dist/components/p-BKhG2xrW.js.map +1 -1
- package/dist/components/{p-Dt1oDMJ6.js → p-CPD_mML6.js} +2 -2
- package/dist/components/p-Ca1H1HPf.js +2 -0
- package/dist/components/p-Ca1H1HPf.js.map +1 -0
- package/dist/components/p-CpX87AQy.js +2 -0
- package/dist/components/{p-DQy_H_hL.js.map → p-CpX87AQy.js.map} +1 -1
- package/dist/components/{p-DYotx2VC.js → p-CyMmsNCF.js} +2 -2
- package/dist/components/p-CyMmsNCF.js.map +1 -0
- package/dist/components/p-D0B9uDTP.js.map +1 -1
- package/dist/components/{p-KRZefifE.js → p-DavEAOUa.js} +2 -2
- package/dist/components/{p-KRZefifE.js.map → p-DavEAOUa.js.map} +1 -1
- package/dist/components/{p-CGovlfKQ.js → p-DoZU8RH0.js} +2 -2
- package/dist/components/p-DoZU8RH0.js.map +1 -0
- package/dist/components/p-DsiueSMI.js +2 -0
- package/dist/components/p-DsiueSMI.js.map +1 -0
- package/dist/components/{p-qawuX6gT.js → p-Dt0XnMxc.js} +2 -2
- package/dist/components/p-Dt0XnMxc.js.map +1 -0
- package/dist/components/{p-Dh4BBuI3.js → p-Mx6VFEQc.js} +2 -2
- package/dist/components/{p-Dh4BBuI3.js.map → p-Mx6VFEQc.js.map} +1 -1
- package/dist/components/{p-CeyijE0j.js → p-clDpFcdU.js} +2 -2
- package/dist/components/p-wxw8arTd.js +2 -0
- package/dist/components/p-wxw8arTd.js.map +1 -0
- package/dist/docs/components.json +406 -232
- package/dist/lib/components/Icon/icon-cache.d.ts +2 -2
- package/dist/lib/components/Text/text-types.d.ts +1 -1
- package/dist/lib/{nav → shell}/index.js +7 -7
- package/dist/lib/{nav → shell}/index.js.map +2 -2
- package/dist/lib/utils/index.js +1 -1
- package/dist/lib/utils/index.js.map +2 -2
- package/dist/react/ds-tag.d.ts +5 -2
- package/dist/react/ds-tag.js +1 -1
- package/dist/types/components/AppShell/AppShell.d.ts +2 -2
- package/dist/types/components/Badge/Badge.d.ts +4 -4
- package/dist/types/components/BarNav/BarNav.d.ts +1 -1
- package/dist/types/components/BarNav/index.d.ts +1 -1
- package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +1 -0
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +1 -0
- package/dist/types/components/Divider/Divider.d.ts +3 -3
- package/dist/types/components/Divider/index.d.ts +1 -1
- package/dist/types/components/Icon/Icon.d.ts +2 -4
- package/dist/types/components/Icon/icon-cache.d.ts +2 -2
- package/dist/types/components/Loader/Loader.d.ts +1 -1
- package/dist/types/components/Menu/Menu.d.ts +1 -1
- package/dist/types/components/Menu/menu-types.d.ts +1 -1
- package/dist/types/components/PanelNav/PanelNav.d.ts +2 -2
- package/dist/types/components/PanelNav/index.d.ts +1 -1
- package/dist/types/components/PanelNav/panel-nav-types.d.ts +1 -2
- package/dist/types/components/PanelNav/panel-nav-utils.d.ts +2 -2
- package/dist/types/components/PanelTools/PanelTools.d.ts +1 -1
- package/dist/types/components/ShellGradientSwatch/shell-gradient-swatch-types.d.ts +2 -2
- package/dist/types/components/Skeleton/Skeleton.d.ts +3 -3
- package/dist/types/components/Skeleton/index.d.ts +1 -1
- package/dist/types/components/Tag/Tag.d.ts +14 -0
- package/dist/types/components/Text/Text.d.ts +1 -1
- package/dist/types/components/Text/text-types.d.ts +1 -1
- package/dist/types/components.d.ts +133 -62
- package/package.json +10 -7
- package/dist/components/p-C7yzdJNM.js +0 -2
- package/dist/components/p-C7yzdJNM.js.map +0 -1
- package/dist/components/p-CGovlfKQ.js.map +0 -1
- package/dist/components/p-DDO5W45N.js +0 -2
- package/dist/components/p-DDO5W45N.js.map +0 -1
- package/dist/components/p-DQy_H_hL.js +0 -2
- package/dist/components/p-DYotx2VC.js.map +0 -1
- package/dist/components/p-Ujv0jqbw.js +0 -2
- package/dist/components/p-Ujv0jqbw.js.map +0 -1
- package/dist/components/p-qawuX6gT.js.map +0 -1
- /package/dist/components/{p-AIFkzp4M.js.map → p-3bRWSqaN.js.map} +0 -0
- /package/dist/components/{p-Dt1oDMJ6.js.map → p-CPD_mML6.js.map} +0 -0
- /package/dist/components/{p-CeyijE0j.js.map → p-clDpFcdU.js.map} +0 -0
- /package/dist/lib/{nav → shell}/badge-gradient-ring.d.ts +0 -0
- /package/dist/lib/{nav → shell}/chrome-transition.d.ts +0 -0
- /package/dist/lib/{nav → shell}/index.d.ts +0 -0
- /package/dist/lib/{nav → shell}/nav-chrome.d.ts +0 -0
- /package/dist/lib/{nav → shell}/shell-chrome-metrics.d.ts +0 -0
- /package/dist/lib/{nav → shell}/shell-gradient-presets.d.ts +0 -0
- /package/dist/lib/{nav → shell}/shell-gradient.d.ts +0 -0
- /package/dist/lib/{nav → shell}/shell-view-transition.d.ts +0 -0
- /package/dist/types/{nav → shell}/badge-gradient-ring.d.ts +0 -0
- /package/dist/types/{nav → shell}/chrome-transition.d.ts +0 -0
- /package/dist/types/{nav → shell}/index.d.ts +0 -0
- /package/dist/types/{nav → shell}/nav-chrome.d.ts +0 -0
- /package/dist/types/{nav → shell}/shell-chrome-metrics.d.ts +0 -0
- /package/dist/types/{nav → shell}/shell-gradient-presets.d.ts +0 -0
- /package/dist/types/{nav → shell}/shell-gradient.d.ts +0 -0
- /package/dist/types/{nav → shell}/shell-shortcuts.d.ts +0 -0
- /package/dist/types/{nav → shell}/shell-view-transition.d.ts +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["skeletonCss","Skeleton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","textVariant","iconSize","controlSize","rounded","shimmer","surface","widthCss","v","width","undefined","render","h","Host","key","class","skeleton","style","skeleton__shape"],"sources":["src/wc/components/Skeleton/Skeleton.css?tag=ds-skeleton&encapsulation=shadow","src/wc/components/Skeleton/Skeleton.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/shimmer.css';\n\n:host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: 0;\n vertical-align: middle;\n --ds-skeleton-base: var(--color-foreground-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer);\n}\n\n.skeleton__shape {\n --ds-shimmer-surface-base: var(--ds-skeleton-base);\n\n display: block;\n width: 100%;\n height: 100%;\n flex: 0 0 auto;\n background-color: var(--ds-skeleton-base);\n border-radius: var(--dimension-radius-025);\n}\n\n/* ── Surface context ───────────────────────────────────────────────────── */\n\n:host(.skeleton--surface-on-medium-background) {\n --ds-skeleton-base: var(--color-foreground-on-medium-background-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer-on-medium-background);\n}\n\n:host(.skeleton--surface-on-bold-background) {\n --ds-skeleton-base: var(--color-foreground-on-bold-background-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer-on-bold-background);\n}\n\n:host(.skeleton--surface-on-strong-background) {\n --ds-skeleton-base: var(--color-foreground-on-strong-background-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer-on-strong-background);\n}\n\n:host(.skeleton--surface-on-translucent-background) {\n --ds-skeleton-base: var(--color-translucent-foreground-quaternary);\n --ds-shimmer: var(--color-translucent-shimmer);\n}\n\n:host(.skeleton--surface-inverted) {\n --ds-skeleton-base: var(--color-inverted-foreground-quaternary);\n --ds-shimmer: var(--color-inverted-shimmer);\n}\n\n:host(.skeleton--surface-media) {\n --ds-skeleton-base: var(--color-media-foreground-quaternary);\n --ds-shimmer: var(--color-media-shimmer);\n}\n\n:host(.skeleton--surface-always-dark) {\n --ds-skeleton-base: var(--color-always-dark-foreground-quaternary);\n --ds-shimmer: var(--color-always-dark-shimmer);\n}\n\n:host(.skeleton--surface-navigation) {\n --ds-skeleton-base: var(--color-navigation-foreground-quaternary);\n --ds-shimmer: var(--color-navigation-shimmer);\n}\n\n/* ── Text ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--text) {\n width: 100%;\n height: var(--ds-skeleton-canvas-size);\n padding-block: var(--dimension-space-025);\n}\n\n:host(.skeleton--text) .skeleton__shape {\n height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--text-text-display-medium) { --ds-skeleton-canvas-size: var(--typography-lineheight-3xl); }\n:host(.skeleton--text-text-display-small) { --ds-skeleton-canvas-size: var(--typography-lineheight-2xl); }\n:host(.skeleton--text-text-title-large) { --ds-skeleton-canvas-size: var(--typography-lineheight-xl); }\n:host(.skeleton--text-text-title-medium),\n:host(.skeleton--text-text-body-large) { --ds-skeleton-canvas-size: var(--typography-lineheight-lg); }\n:host(.skeleton--text-text-title-small),\n:host(.skeleton--text-text-body-medium) { --ds-skeleton-canvas-size: var(--typography-lineheight-md); }\n:host(.skeleton--text-text-body-small) { --ds-skeleton-canvas-size: var(--typography-lineheight-sm); }\n:host(.skeleton--text-text-caption) { --ds-skeleton-canvas-size: var(--typography-lineheight-xs); }\n\n/* ── Icon ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--icon) {\n width: var(--ds-skeleton-canvas-size);\n height: var(--ds-skeleton-canvas-size);\n padding: var(--dimension-space-025);\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n width: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--icon.skeleton--rounded) .skeleton__shape {\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.skeleton--icon-xs) { --ds-skeleton-canvas-size: var(--dimension-iconography-xs); }\n:host(.skeleton--icon-sm) { --ds-skeleton-canvas-size: var(--dimension-iconography-sm); }\n:host(.skeleton--icon-md) { --ds-skeleton-canvas-size: var(--dimension-iconography-md); }\n:host(.skeleton--icon-lg) { --ds-skeleton-canvas-size: var(--dimension-iconography-lg); }\n:host(.skeleton--icon-xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-xl); }\n:host(.skeleton--icon-2xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-2xl); }\n:host(.skeleton--icon-3xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-3xl); }\n\n/* ── Control ───────────────────────────────────────────────────────────── */\n\n:host(.skeleton--control) {\n width: 100%;\n height: var(--ds-control-height);\n}\n\n:host(.skeleton--control.skeleton--rounded) .skeleton__shape {\n border-radius: var(--dimension-radius-half);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { IconSize } from '../Icon/Icon';\nimport type { TextVariant } from '../Text/text-types';\nimport type { ControlSize } from '../../utils/control-text';\n\nexport type SkeletonVariant = 'text' | 'icon' | 'control';\nexport type SkeletonSurface =\n | 'default'\n | 'on-bold-background'\n | 'on-strong-background'\n | 'on-medium-background'\n | 'on-translucent-background'\n | 'navigation'\n | 'media'\n | 'always-dark'\n | 'inverted';\n\n@Component({\n tag: 'ds-skeleton',\n styleUrl: 'Skeleton.css',\n shadow: true,\n})\nexport class Skeleton {\n @Prop() variant: SkeletonVariant = 'text';\n /** Text metric recipe whose line-height defines the text canvas. */\n @Prop() textVariant: TextVariant = 'text-body-medium';\n /** Iconography token whose square canvas defines the icon canvas. */\n @Prop() iconSize: IconSize = 'md';\n /** Shared control-density size whose height defines the control canvas. */\n @Prop() controlSize: ControlSize = 'md';\n /** Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons. */\n @Prop() width: string | number | undefined;\n /** Round icon skeletons into circles and control skeletons into pills. Ignored for text. */\n @Prop() rounded: boolean = false;\n /** Whether to show the shimmer animation. */\n @Prop() shimmer: boolean = true;\n /** Surface context used to select the matching foreground base and shimmer tokens. */\n @Prop() surface: SkeletonSurface = 'default';\n\n private get widthCss() {\n const v = this.width;\n if (v == null) return undefined;\n return typeof v === 'number' ? `${v}px` : v;\n }\n\n render() {\n return (\n <Host\n aria-hidden=\"true\"\n class={{\n 'skeleton': true,\n [`skeleton--${this.variant}`]: true,\n [`skeleton--text-${this.textVariant}`]: this.variant === 'text',\n [`skeleton--icon-${this.iconSize}`]: this.variant === 'icon',\n [`ds-control--${this.controlSize}`]: this.variant === 'control',\n [`skeleton--surface-${this.surface}`]: true,\n 'skeleton--rounded': this.variant !== 'text' && this.rounded,\n }}\n style={this.variant === 'icon' ? undefined : { width: this.widthCss }}\n >\n <span\n class={{\n 'skeleton__shape': true,\n 'ds-shimmer-surface': this.shimmer,\n }}\n />\n </Host>\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAc,IAAM,kpP,MCsBbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,kEAMUC,KAAAC,QAA2B,OAE3BD,KAAAE,YAA2B,mBAE3BF,KAAAG,SAAqB,KAErBH,KAAAI,YAA2B,KAI3BJ,KAAAK,QAAmB,MAEnBL,KAAAM,QAAmB,KAEnBN,KAAAO,QAA2B,SAgCpC,CA9BC,YAAYC,GACV,MAAMC,EAAIT,KAAKU,MACf,GAAID,GAAK,KAAM,OAAOE,UACtB,cAAcF,IAAM,SAAW,GAAGA,MAAQA,C,CAG5C,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,yDACS,OACZC,MAAO,CACLC,SAAY,KACZ,CAAC,aAAajB,KAAKC,WAAY,KAC/B,CAAC,kBAAkBD,KAAKE,eAAgBF,KAAKC,UAAY,OACzD,CAAC,kBAAkBD,KAAKG,YAAaH,KAAKC,UAAY,OACtD,CAAC,eAAeD,KAAKI,eAAgBJ,KAAKC,UAAY,UACtD,CAAC,qBAAqBD,KAAKO,WAAY,KACvC,oBAAqBP,KAAKC,UAAY,QAAUD,KAAKK,SAEvDa,MAAOlB,KAAKC,UAAY,OAASU,UAAY,CAAED,MAAOV,KAAKQ,WAE3DK,EAAA,QAAAE,IAAA,2CACEC,MAAO,CACLG,gBAAmB,KACnB,qBAAsBnB,KAAKM,W","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["textVariantClass","variant","replace","textDisplayClass","element","textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","emphasis","italic","shimmer","lineTruncation","fontFeature","as","render","Tag","isCustomColor","c","startsWith","cls","wrap","color","decoration","align","style","undefined","extraProps","for","textId","h","Host","key","class"],"sources":["src/wc/components/Text/text-utils.ts","src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":["import type { TextElement, TextVariant } from './text-types';\n\n/** `text-body-medium` → `ds-text--body-medium` */\nexport function textVariantClass(variant: TextVariant): string {\n return `ds-text--${variant.replace(/^text-/, '')}`;\n}\n\n/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */\nexport function textDisplayClass(element: TextElement): string {\n return element === 'span' || element === 'label'\n ? 'ds-text--inline-box'\n : 'ds-text--block-box';\n}\n","@import '../../utils/typography.css';\n@import '../../utils/shimmer.css';\n\n:host {\n box-sizing: border-box;\n max-width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n font-family: var(--typography-font-family);\n}\n\n:host(:where(.ds-text--inline-box)) {\n display: inline-block;\n}\n\n:host(:where(.ds-text--block-box)) {\n display: block;\n width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n display: block;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n font: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n color: inherit;\n text-transform: inherit;\n text-align: inherit;\n text-decoration: inherit;\n font-style: inherit;\n font-variant-numeric: inherit;\n font-feature-settings: inherit;\n white-space: inherit;\n text-wrap: inherit;\n overflow-wrap: inherit;\n word-break: inherit;\n /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n text node — overflow/text-overflow are not inherited by default. */\n overflow: inherit;\n text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n white-space: nowrap;\n word-break: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary) { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary) { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-brand) { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative) { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive) { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning) { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution) { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai) { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold) { color: var(--color-foreground-on-bold-background-primary); }\n:host(.ds-text--color-inherit) { color: inherit; }\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline) {\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n text-decoration: underline dotted;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n font-variant-numeric: tabular-nums;\n font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left) { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right) { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { textDisplayClass, textVariantClass } from './text-utils';\nimport type {\n TextAlign,\n TextColor,\n TextDecoration,\n TextElement,\n TextFontFeature,\n TextVariant,\n LineTruncation,\n TextWrap,\n} from './text-types';\n\n@Component({\n tag: 'ds-text',\n styleUrl: 'Text.css',\n scoped: true,\n})\nexport class Text {\n @Prop() variant: TextVariant = 'text-body-medium';\n /**\n * Heavier weight + tighter letter-spacing for the variant.\n * `false` (default): one step below emphasis (display semibold, title/body\n * medium, caption medium).\n * `true`: display bold, title/caption semibold, body medium.\n */\n @Prop() emphasis: boolean = false;\n @Prop() color: TextColor | undefined;\n @Prop() decoration: TextDecoration | undefined;\n @Prop() italic: boolean = false;\n /** Animate the visible glyphs with the shared loading shimmer treatment. */\n @Prop() shimmer: boolean = false;\n @Prop() align: TextAlign | undefined;\n @Prop() lineTruncation: LineTruncation = 'none';\n @Prop() wrap: TextWrap | undefined;\n @Prop() fontFeature: TextFontFeature = 'normal';\n @Prop() as: TextElement = 'p';\n /** Maps to `for` attribute on <label> elements. */\n @Prop() for: string | undefined;\n /** Forwarded to the inner element (e.g. aria-labelledby targets). */\n @Prop() textId: string | undefined;\n\n render() {\n // Polymorphic element: TSX treats a variable tag as a component, so a\n // dynamic intrinsic element name must be cast to `any` to render.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const Tag = this.as as any;\n const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n\n const cls: Record<string, boolean> = {\n 'ds-text': true,\n [textDisplayClass(this.as)]: true,\n [textVariantClass(this.variant)]: true,\n 'ds-text--emphasis': this.emphasis,\n 'ds-text--regular': !this.emphasis,\n 'ds-text--nowrap': this.wrap === 'nowrap',\n 'ds-text--balance': this.wrap === 'balance',\n 'ds-text--pretty': this.wrap === 'pretty',\n 'ds-text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',\n 'ds-text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',\n 'ds-text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',\n 'ds-text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',\n 'ds-text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',\n 'ds-text--color-primary': this.color === 'primary',\n 'ds-text--color-secondary': this.color === 'secondary',\n 'ds-text--color-tertiary': this.color === 'tertiary',\n 'ds-text--color-brand': this.color === 'brand',\n 'ds-text--color-negative': this.color === 'negative',\n 'ds-text--color-positive': this.color === 'positive',\n 'ds-text--color-warning': this.color === 'warning',\n 'ds-text--color-caution': this.color === 'caution',\n 'ds-text--color-ai': this.color === 'ai',\n 'ds-text--color-on-strong': this.color === 'on-strong',\n 'ds-text--color-on-bold': this.color === 'on-bold',\n 'ds-text--color-inherit': this.color === 'inherit',\n 'ds-text--decoration-underline': this.decoration === 'underline',\n 'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n 'ds-text--italic': this.italic,\n 'ds-text--align-left': this.align === 'left',\n 'ds-text--align-center': this.align === 'center',\n 'ds-text--align-right': this.align === 'right',\n 'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',\n };\n\n const style = this.color && isCustomColor(this.color)\n ? { color: this.color as string }\n : undefined;\n\n const extraProps: Record<string, string> = {};\n if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n if (this.textId) extraProps['id'] = this.textId;\n\n return (\n <Host class={cls} style={style}>\n <Tag\n class={{\n 'ds-text__element': true,\n 'ds-shimmer-text': this.shimmer,\n }}\n {...extraProps}\n >\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"2DAGM,SAAUA,EAAiBC,GAC/B,MAAO,YAAYA,EAAQC,QAAQ,SAAU,KAC/C,CAGM,SAAUC,EAAiBC,GAC/B,OAAOA,IAAY,QAAUA,IAAY,QACrC,sBACA,oBACN,CCZA,MAAMC,EAAU,IAAM,4lW,MCkBTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAV,QAAuB,mBAOvBU,KAAAC,SAAoB,MAGpBD,KAAAE,OAAkB,MAElBF,KAAAG,QAAmB,MAEnBH,KAAAI,eAAiC,OAEjCJ,KAAAK,YAA+B,SAC/BL,KAAAM,GAAkB,GAsE3B,CAhEC,MAAAC,GAIE,MAAMC,EAAMR,KAAKM,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAE9E,MAAMC,EAA+B,CACnC,UAAW,KACX,CAACpB,EAAiBQ,KAAKM,KAAM,KAC7B,CAACjB,EAAiBW,KAAKV,UAAW,KAClC,oBAAqBU,KAAKC,SAC1B,oBAAqBD,KAAKC,SAC1B,kBAAmBD,KAAKa,OAAS,SACjC,mBAAoBb,KAAKa,OAAS,UAClC,kBAAmBb,KAAKa,OAAS,SACjC,sBAAuBb,KAAKI,iBAAmB,GAAKJ,KAAKa,OAAS,SAClE,sBAAuBb,KAAKI,iBAAmB,GAAKJ,KAAKa,OAAS,SAClE,sBAAuBb,KAAKI,iBAAmB,GAAKJ,KAAKa,OAAS,SAClE,sBAAuBb,KAAKI,iBAAmB,GAAKJ,KAAKa,OAAS,SAClE,sBAAuBb,KAAKI,iBAAmB,GAAKJ,KAAKa,OAAS,SAClE,yBAA4Bb,KAAKc,QAAU,UAC3C,2BAA4Bd,KAAKc,QAAU,YAC3C,0BAA4Bd,KAAKc,QAAU,WAC3C,uBAA4Bd,KAAKc,QAAU,QAC3C,0BAA4Bd,KAAKc,QAAU,WAC3C,0BAA4Bd,KAAKc,QAAU,WAC3C,yBAA4Bd,KAAKc,QAAU,UAC3C,yBAA4Bd,KAAKc,QAAU,UAC3C,oBAA4Bd,KAAKc,QAAU,KAC3C,2BAA4Bd,KAAKc,QAAU,YAC3C,yBAA4Bd,KAAKc,QAAU,UAC3C,yBAA4Bd,KAAKc,QAAU,UAC3C,gCAAwCd,KAAKe,aAAe,YAC5D,uCAAwCf,KAAKe,aAAe,mBAC5D,kBAAmBf,KAAKE,OACxB,sBAAyBF,KAAKgB,QAAU,OACxC,wBAAyBhB,KAAKgB,QAAU,SACxC,uBAAyBhB,KAAKgB,QAAU,QACxC,qCAAsChB,KAAKK,cAAgB,gBAG7D,MAAMY,EAAQjB,KAAKc,OAASL,EAAcT,KAAKc,OAC3C,CAAEA,MAAOd,KAAKc,OACdI,UAEJ,MAAMC,EAAqC,GAC3C,GAAInB,KAAKM,KAAO,SAAWN,KAAKoB,IAAKD,EAAW,OAASnB,KAAKoB,IAC9D,GAAIpB,KAAKqB,OAAQF,EAAW,MAAQnB,KAAKqB,OAEzC,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOb,EAAKK,MAAOA,GACvBK,EAACd,EAAG,CAAAgB,IAAA,2CACFC,MAAO,CACL,mBAAoB,KACpB,kBAAmBzB,KAAKG,YAEtBgB,GAEJG,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|