@ds-mo/ui 1.2.0 → 1.4.0

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.
Files changed (184) hide show
  1. package/README.md +82 -2
  2. package/dist/components/ds-badge.js +1 -1
  3. package/dist/components/ds-badge.js.map +1 -1
  4. package/dist/components/ds-banner.js +1 -1
  5. package/dist/components/ds-banner.js.map +1 -1
  6. package/dist/components/ds-bar-nav-action.js +1 -1
  7. package/dist/components/ds-bar-nav.js +1 -1
  8. package/dist/components/ds-bar-nav.js.map +1 -1
  9. package/dist/components/ds-breadcrumb.js +1 -1
  10. package/dist/components/ds-button-group.js +1 -1
  11. package/dist/components/ds-button.js +1 -1
  12. package/dist/components/ds-card.js +1 -1
  13. package/dist/components/ds-checkbox.js +1 -1
  14. package/dist/components/ds-chip.d.ts +11 -0
  15. package/dist/components/ds-chip.js +2 -0
  16. package/dist/components/ds-chip.js.map +1 -0
  17. package/dist/components/ds-divider.js +1 -1
  18. package/dist/components/ds-empty-state.js +1 -1
  19. package/dist/components/ds-fade.js +1 -1
  20. package/dist/components/ds-fade.js.map +1 -1
  21. package/dist/components/ds-field.js +1 -1
  22. package/dist/components/ds-header.js +1 -1
  23. package/dist/components/ds-icon.js +1 -1
  24. package/dist/components/ds-input.js +1 -1
  25. package/dist/components/ds-modal.js +1 -1
  26. package/dist/components/ds-modal.js.map +1 -1
  27. package/dist/components/ds-panel-nav.js +1 -1
  28. package/dist/components/ds-panel-nav.js.map +1 -1
  29. package/dist/components/ds-radio-group.js +1 -1
  30. package/dist/components/ds-radio-group.js.map +1 -1
  31. package/dist/components/ds-scrollbar.js +1 -1
  32. package/dist/components/ds-select.js +1 -1
  33. package/dist/components/ds-sidebar.js +1 -1
  34. package/dist/components/ds-sidebar.js.map +1 -1
  35. package/dist/components/ds-slider.js +1 -1
  36. package/dist/components/ds-surface.js +1 -1
  37. package/dist/components/ds-tab-group-nav.js +1 -1
  38. package/dist/components/ds-tab-group.js +1 -1
  39. package/dist/components/ds-tab-group.js.map +1 -1
  40. package/dist/components/ds-table.js +1 -1
  41. package/dist/components/ds-tag.js +1 -1
  42. package/dist/components/ds-tag.js.map +1 -1
  43. package/dist/components/ds-text.js +1 -1
  44. package/dist/components/ds-toast-provider.js +1 -1
  45. package/dist/components/ds-toggle-button-group.js +1 -1
  46. package/dist/components/ds-toggle-button.js +1 -1
  47. package/dist/components/ds-toggle.js +1 -1
  48. package/dist/components/ds-tooltip.js +1 -1
  49. package/dist/components/index.d.ts +3 -4
  50. package/dist/components/index.js +1 -1
  51. package/dist/components/index.js.map +1 -1
  52. package/dist/components/{p-COsKOwZR.js → p--YDw8Q4o.js} +2 -2
  53. package/dist/components/p-B_enucPQ.js +2 -0
  54. package/dist/components/p-B_enucPQ.js.map +1 -0
  55. package/dist/components/{p-Cj00JkJb.js → p-C9za7IDu.js} +2 -2
  56. package/dist/components/p-DceSoh5V.js +2 -0
  57. package/dist/components/p-DceSoh5V.js.map +1 -0
  58. package/dist/components/{p-H89PzqGU.js → p-DqBCQRRd.js} +2 -2
  59. package/dist/components/p-DznbYg1m.js +2 -0
  60. package/dist/components/p-DznbYg1m.js.map +1 -0
  61. package/dist/components/p-_LI2ymhS.js +2 -0
  62. package/dist/components/p-_LI2ymhS.js.map +1 -0
  63. package/dist/components/{p-CE5zeV1w.js → p-uMN1Ppw2.js} +2 -2
  64. package/dist/components/p-vW9EMP8s.js +2 -0
  65. package/dist/components/p-vW9EMP8s.js.map +1 -0
  66. package/dist/types/components/Badge/Badge.d.ts +20 -0
  67. package/dist/types/components/Badge/index.d.ts +2 -0
  68. package/dist/types/{.stencil → components}/BarNav/BarNav.d.ts +6 -17
  69. package/dist/types/components/BarNav/bar-nav-types.d.ts +14 -0
  70. package/dist/types/{.stencil → components}/BarNav/bar-nav-utils.d.ts +1 -1
  71. package/dist/types/components/BarNav/index.d.ts +3 -0
  72. package/dist/types/{.stencil → components}/BarNavAction/BarNavAction.d.ts +1 -1
  73. package/dist/types/components/Chip/Chip.d.ts +30 -0
  74. package/dist/types/components/Chip/index.d.ts +2 -0
  75. package/dist/types/components/Fade/Fade.d.ts +25 -0
  76. package/dist/types/components/Fade/index.d.ts +2 -0
  77. package/dist/types/{.stencil → components}/PanelNav/PanelNav.d.ts +11 -26
  78. package/dist/types/components/PanelNav/index.d.ts +4 -0
  79. package/dist/types/components/PanelNav/panel-nav-types.d.ts +20 -0
  80. package/dist/types/components/PanelNav/panel-nav-utils.d.ts +26 -0
  81. package/dist/types/{.stencil → components}/TabGroupNav/TabGroupNav.d.ts +1 -1
  82. package/dist/types/components/Tag/Tag.d.ts +15 -0
  83. package/dist/types/components/Tag/index.d.ts +2 -0
  84. package/dist/types/components.d.ts +256 -108
  85. package/dist/types/nav/index.d.ts +5 -0
  86. package/dist/types/nav/nav-chrome.d.ts +14 -0
  87. package/dist/types/nav/shell-view-transition.d.ts +21 -0
  88. package/package.json +18 -6
  89. package/src/angular/index.ts +1 -0
  90. package/src/angular/proxies.ts +51 -28
  91. package/src/react/components.ts +1 -0
  92. package/src/react/ds-chip.ts +35 -0
  93. package/src/react/ds-tag.ts +3 -12
  94. package/src/wc/components/Badge/Badge.tsx +58 -8
  95. package/src/wc/components/Badge/index.ts +1 -1
  96. package/src/wc/components/Banner/Banner.tsx +2 -2
  97. package/src/wc/components/BarNav/BarNav.tsx +24 -26
  98. package/src/wc/components/BarNav/bar-nav-types.ts +15 -0
  99. package/src/wc/components/BarNav/bar-nav-utils.ts +1 -1
  100. package/src/wc/components/BarNav/index.ts +2 -1
  101. package/src/wc/components/BarNavAction/BarNavAction.tsx +11 -2
  102. package/src/wc/components/Chip/Chip.tsx +127 -0
  103. package/src/wc/components/Chip/index.ts +1 -0
  104. package/src/wc/components/Fade/Fade.tsx +86 -6
  105. package/src/wc/components/Fade/index.ts +1 -1
  106. package/src/wc/components/PanelNav/PanelNav.tsx +63 -91
  107. package/src/wc/components/PanelNav/index.ts +9 -4
  108. package/src/wc/components/PanelNav/panel-nav-types.ts +22 -0
  109. package/src/wc/components/PanelNav/panel-nav-utils.ts +32 -64
  110. package/src/wc/components/TabGroup/TabGroup.tsx +9 -1
  111. package/src/wc/components/TabGroupNav/TabGroupNav.tsx +17 -3
  112. package/src/wc/components/Tag/Tag.tsx +3 -70
  113. package/src/wc/components/Tag/index.ts +1 -1
  114. package/src/wc/components.d.ts +256 -108
  115. package/src/wc/nav/index.ts +19 -0
  116. package/src/wc/nav/nav-chrome.ts +45 -0
  117. package/src/wc/nav/shell-view-transition.ts +102 -0
  118. package/dist/components/p-CQQe6VNo.js +0 -2
  119. package/dist/components/p-CQQe6VNo.js.map +0 -1
  120. package/dist/components/p-Vwlmhl4E.js +0 -2
  121. package/dist/components/p-Vwlmhl4E.js.map +0 -1
  122. package/dist/types/.stencil/Badge/Badge.d.ts +0 -8
  123. package/dist/types/.stencil/Badge/index.d.ts +0 -2
  124. package/dist/types/.stencil/BarNav/index.d.ts +0 -2
  125. package/dist/types/.stencil/Fade/Fade.d.ts +0 -10
  126. package/dist/types/.stencil/Fade/index.d.ts +0 -2
  127. package/dist/types/.stencil/PanelNav/index.d.ts +0 -3
  128. package/dist/types/.stencil/PanelNav/panel-nav-utils.d.ts +0 -27
  129. package/dist/types/.stencil/Tag/Tag.d.ts +0 -32
  130. package/dist/types/.stencil/Tag/index.d.ts +0 -2
  131. /package/dist/components/{p-COsKOwZR.js.map → p--YDw8Q4o.js.map} +0 -0
  132. /package/dist/components/{p-Cj00JkJb.js.map → p-C9za7IDu.js.map} +0 -0
  133. /package/dist/components/{p-H89PzqGU.js.map → p-DqBCQRRd.js.map} +0 -0
  134. /package/dist/components/{p-CE5zeV1w.js.map → p-uMN1Ppw2.js.map} +0 -0
  135. /package/dist/types/{.stencil → components}/Accordion/Accordion.d.ts +0 -0
  136. /package/dist/types/{.stencil → components}/Banner/Banner.d.ts +0 -0
  137. /package/dist/types/{.stencil → components}/BarNav/bar-nav-dom-utils.d.ts +0 -0
  138. /package/dist/types/{.stencil → components}/BarNav/bar-nav-tabs-menu-utils.d.ts +0 -0
  139. /package/dist/types/{.stencil → components}/BarNavAction/index.d.ts +0 -0
  140. /package/dist/types/{.stencil → components}/Breadcrumb/Breadcrumb.d.ts +0 -0
  141. /package/dist/types/{.stencil → components}/Button/Button.d.ts +0 -0
  142. /package/dist/types/{.stencil → components}/Button/index.d.ts +0 -0
  143. /package/dist/types/{.stencil → components}/ButtonGroup/ButtonGroup.d.ts +0 -0
  144. /package/dist/types/{.stencil → components}/Card/Card.d.ts +0 -0
  145. /package/dist/types/{.stencil → components}/Checkbox/Checkbox.d.ts +0 -0
  146. /package/dist/types/{.stencil → components}/Checkbox/index.d.ts +0 -0
  147. /package/dist/types/{.stencil → components}/Divider/Divider.d.ts +0 -0
  148. /package/dist/types/{.stencil → components}/Divider/index.d.ts +0 -0
  149. /package/dist/types/{.stencil → components}/EmptyState/EmptyState.d.ts +0 -0
  150. /package/dist/types/{.stencil → components}/Field/Field.d.ts +0 -0
  151. /package/dist/types/{.stencil → components}/Header/Header.d.ts +0 -0
  152. /package/dist/types/{.stencil → components}/Icon/Icon.d.ts +0 -0
  153. /package/dist/types/{.stencil → components}/Icon/flag-icon-catalog.d.ts +0 -0
  154. /package/dist/types/{.stencil → components}/Icon/index.d.ts +0 -0
  155. /package/dist/types/{.stencil → components}/Icon/system-icon-catalog.d.ts +0 -0
  156. /package/dist/types/{.stencil → components}/Input/Input.d.ts +0 -0
  157. /package/dist/types/{.stencil → components}/Input/index.d.ts +0 -0
  158. /package/dist/types/{.stencil → components}/Loader/Loader.d.ts +0 -0
  159. /package/dist/types/{.stencil → components}/Loader/index.d.ts +0 -0
  160. /package/dist/types/{.stencil → components}/Menu/Menu.d.ts +0 -0
  161. /package/dist/types/{.stencil → components}/Modal/Modal.d.ts +0 -0
  162. /package/dist/types/{.stencil → components}/Pagination/Pagination.d.ts +0 -0
  163. /package/dist/types/{.stencil → components}/RadioGroup/RadioGroup.d.ts +0 -0
  164. /package/dist/types/{.stencil → components}/RadioGroup/index.d.ts +0 -0
  165. /package/dist/types/{.stencil → components}/Scrollbar/Scrollbar.d.ts +0 -0
  166. /package/dist/types/{.stencil → components}/Select/Select.d.ts +0 -0
  167. /package/dist/types/{.stencil → components}/Sidebar/Sidebar.d.ts +0 -0
  168. /package/dist/types/{.stencil → components}/Skeleton/Skeleton.d.ts +0 -0
  169. /package/dist/types/{.stencil → components}/Skeleton/index.d.ts +0 -0
  170. /package/dist/types/{.stencil → components}/Slider/Slider.d.ts +0 -0
  171. /package/dist/types/{.stencil → components}/Slider/index.d.ts +0 -0
  172. /package/dist/types/{.stencil → components}/Surface/Surface.d.ts +0 -0
  173. /package/dist/types/{.stencil → components}/TabGroup/TabGroup.d.ts +0 -0
  174. /package/dist/types/{.stencil → components}/TabGroup/tab-item-utils.d.ts +0 -0
  175. /package/dist/types/{.stencil → components}/Table/Table.d.ts +0 -0
  176. /package/dist/types/{.stencil → components}/Text/Text.d.ts +0 -0
  177. /package/dist/types/{.stencil → components}/Text/index.d.ts +0 -0
  178. /package/dist/types/{.stencil → components}/Toast/Toast.d.ts +0 -0
  179. /package/dist/types/{.stencil → components}/Toast/toast-service.d.ts +0 -0
  180. /package/dist/types/{.stencil → components}/Toggle/Toggle.d.ts +0 -0
  181. /package/dist/types/{.stencil → components}/Toggle/index.d.ts +0 -0
  182. /package/dist/types/{.stencil → components}/ToggleButton/ToggleButton.d.ts +0 -0
  183. /package/dist/types/{.stencil → components}/ToggleButtonGroup/ToggleButtonGroup.d.ts +0 -0
  184. /package/dist/types/{.stencil → components}/Tooltip/Tooltip.d.ts +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"names":["fadeCss","SIZE_VALUE","SURFACE_BACKGROUND","default","primary","secondary","navigation","media","inverted","Fade","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","side","size","surface","background","visible","resolveSize","height","Object","prototype","hasOwnProperty","call","resolveBackground","render","isVerticalEdge","h","Host","key","class","fade","style"],"sources":["src/wc/components/Fade/Fade.css?tag=ds-fade&encapsulation=scoped","src/wc/components/Fade/Fade.tsx"],"sourcesContent":[":host {\n --ds-fade-size: var(--dimension-size-600);\n --ds-fade-bg: var(--color-background-secondary);\n --ds-fade-offset: 0;\n\n position: absolute;\n pointer-events: none;\n z-index: 10;\n opacity: 1;\n transform: translateZ(0);\n backface-visibility: hidden;\n transition: opacity var(--effect-motion-short-3);\n}\n\n:host(.fade--hidden) {\n opacity: 0;\n}\n\n:host(.fade--vertical-edge) {\n height: var(--ds-fade-size);\n}\n\n:host(.fade--horizontal-edge) {\n width: var(--ds-fade-size);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host { transition: none; }\n}\n\n:host(.fade--top) {\n top: var(--ds-fade-offset); left: 0; right: 0;\n background: linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%);\n}\n\n:host(.fade--bottom) {\n bottom: var(--ds-fade-offset); left: 0; right: 0;\n background: linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--left) {\n top: 0; bottom: 0; left: var(--ds-fade-offset);\n background: linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--right) {\n top: 0; bottom: 0; right: var(--ds-fade-offset);\n background: linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type FadeSide = 'top' | 'bottom' | 'left' | 'right';\nexport type FadeSurface =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'navigation'\n | 'media'\n | 'always-dark'\n | 'inverted';\nexport type FadeSizeToken =\n | 'size-000'\n | 'size-050'\n | 'size-075'\n | 'size-100'\n | 'size-150'\n | 'size-200'\n | 'size-250'\n | 'size-300'\n | 'size-400'\n | 'size-500'\n | 'size-600'\n | 'size-800';\nexport type FadeSize = FadeSizeToken | (string & {});\n\nconst SIZE_VALUE: Record<FadeSizeToken, string> = {\n 'size-000': 'var(--dimension-size-000)',\n 'size-050': 'var(--dimension-size-050)',\n 'size-075': 'var(--dimension-size-075)',\n 'size-100': 'var(--dimension-size-100)',\n 'size-150': 'var(--dimension-size-150)',\n 'size-200': 'var(--dimension-size-200)',\n 'size-250': 'var(--dimension-size-250)',\n 'size-300': 'var(--dimension-size-300)',\n 'size-400': 'var(--dimension-size-400)',\n 'size-500': 'var(--dimension-size-500)',\n 'size-600': 'var(--dimension-size-600)',\n 'size-800': 'var(--dimension-size-800)',\n};\n\nconst SURFACE_BACKGROUND: Record<FadeSurface, string> = {\n default: 'var(--color-background-secondary)',\n primary: 'var(--color-background-primary)',\n secondary: 'var(--color-background-secondary)',\n navigation: 'var(--color-navigation-background)',\n media: 'var(--color-media-background)',\n 'always-dark': 'var(--color-always-dark-background)',\n inverted: 'var(--color-inverted-background)',\n};\n\n@Component({\n tag: 'ds-fade',\n styleUrl: 'Fade.css',\n scoped: true,\n})\nexport class Fade {\n /** Edge where the fade is anchored. */\n @Prop() side: FadeSide = 'bottom';\n\n /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */\n @Prop() size: FadeSize = 'size-600';\n\n /**\n * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.\n * Prefer `size`.\n */\n @Prop() height: string | undefined;\n\n /** Surface context used to choose the fade target background token. */\n @Prop() surface: FadeSurface = 'default';\n\n /** Direct background override for contexts that already expose a resolved surface var. */\n @Prop() background: string = 'var(--color-background-secondary)';\n\n /** Controls visibility without removing the element from layout/positioning. */\n @Prop() visible: boolean = true;\n\n private resolveSize(): string {\n if (this.height) return this.height;\n\n return Object.prototype.hasOwnProperty.call(SIZE_VALUE, this.size)\n ? SIZE_VALUE[this.size as FadeSizeToken]\n : this.size;\n }\n\n private resolveBackground(): string {\n if (this.background !== 'var(--color-background-secondary)') return this.background;\n return SURFACE_BACKGROUND[this.surface];\n }\n\n render() {\n const isVerticalEdge = this.side === 'top' || this.side === 'bottom';\n\n return (\n <Host\n aria-hidden=\"true\"\n class={{\n fade: true,\n 'fade--hidden': !this.visible,\n 'fade--vertical-edge': isVerticalEdge,\n 'fade--horizontal-edge': !isVerticalEdge,\n [`fade--${this.side}`]: true,\n }}\n style={{\n '--ds-fade-size': this.resolveSize(),\n '--ds-fade-bg': this.resolveBackground(),\n } as Record<string, string>}\n />\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,0lCC0BtB,MAAMC,EAA4C,CAChD,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,6BAGd,MAAMC,EAAkD,CACtDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,WAAY,qCACZC,MAAO,gCACP,cAAe,sCACfC,SAAU,oC,MAQCC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAiB,SAGjBD,KAAAE,KAAiB,WASjBF,KAAAG,QAAuB,UAGvBH,KAAAI,WAAqB,oCAGrBJ,KAAAK,QAAmB,IAmC5B,CAjCS,WAAAC,GACN,GAAIN,KAAKO,OAAQ,OAAOP,KAAKO,OAE7B,OAAOC,OAAOC,UAAUC,eAAeC,KAAKxB,EAAYa,KAAKE,MACzDf,EAAWa,KAAKE,MAChBF,KAAKE,I,CAGH,iBAAAU,GACN,GAAIZ,KAAKI,aAAe,oCAAqC,OAAOJ,KAAKI,WACzE,OAAOhB,EAAmBY,KAAKG,Q,CAGjC,MAAAU,GACE,MAAMC,EAAiBd,KAAKC,OAAS,OAASD,KAAKC,OAAS,SAE5D,OACEc,EAACC,EAAI,CAAAC,IAAA,yDACS,OACZC,MAAO,CACLC,KAAM,KACN,gBAAiBnB,KAAKK,QACtB,sBAAuBS,EACvB,yBAA0BA,EAC1B,CAAC,SAASd,KAAKC,QAAS,MAE1BmB,MAAO,CACL,iBAAkBpB,KAAKM,cACvB,eAAgBN,KAAKY,sB","ignoreList":[]}
@@ -0,0 +1,20 @@
1
+ export type BadgeVariant = 'counter' | 'dot';
2
+ export type BadgeSurface = 'default' | 'primary' | 'secondary' | 'medium' | 'bold' | 'strong' | 'navigation' | 'always-dark';
3
+ export declare class Badge {
4
+ /** Render as a compact counter or notification dot. */
5
+ variant: BadgeVariant;
6
+ /** Count shown for counter badges. Count 0 hides the badge. */
7
+ count: number;
8
+ /** Highest count shown before compacting to "+". */
9
+ max: number;
10
+ /** Surface context for the ring around dots. */
11
+ surface: BadgeSurface;
12
+ /** Direct ring background override for component-local surfaces. */
13
+ background: string | undefined;
14
+ /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */
15
+ isSelected: boolean;
16
+ /** Accessible label. Defaults to the count as a string. */
17
+ label: string | undefined;
18
+ render(): any;
19
+ }
20
+ //# sourceMappingURL=Badge.d.ts.map
@@ -0,0 +1,2 @@
1
+ export type { BadgeVariant, BadgeSurface } from './Badge';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -1,19 +1,6 @@
1
1
  import { EventEmitter } from '../../stencil-public-runtime';
2
- import type { TabItem } from '../TabGroup/tab-item-utils';
3
- export type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
4
- /** Same shape as `TabItem` — supports `{ type: 'divider' }` between tab groups. */
5
- export type BarNavTab = TabItem;
6
- export interface BarNavActionItem {
7
- id: string;
8
- /** Icon name for <ds-icon>. */
9
- icon: string;
10
- /** Whether this action button is currently pressed/active. */
11
- selected?: boolean;
12
- /** Show a notification dot. */
13
- dot?: boolean;
14
- inactive?: boolean;
15
- ariaLabel?: string;
16
- }
2
+ import type { NavChromeStyle } from '../../nav/nav-chrome';
3
+ import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
17
4
  export declare class BarNav {
18
5
  /**
19
6
  * Tab items for the left section.
@@ -36,8 +23,9 @@ export declare class BarNav {
36
23
  * When tabs are present the heading is hidden.
37
24
  */
38
25
  heading: string | undefined;
39
- /** Surface background variant. */
40
- background: BarNavBackground;
26
+ /** Chrome style: `navigation` = navigation tokens, `default` = app tokens.
27
+ * Property: `navStyle`. HTML attribute: `nav-style`. */
28
+ navStyle: NavChromeStyle;
41
29
  /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */
42
30
  basePath: string;
43
31
  /** Current route URL. When set with `basePath`, the active tab is derived automatically. */
@@ -107,6 +95,7 @@ export declare class BarNav {
107
95
  private handleActionChange;
108
96
  private toggleTabMenu;
109
97
  private handleTriggerKeyDown;
98
+ private get tabSurface();
110
99
  render(): any;
111
100
  }
112
101
  //# sourceMappingURL=BarNav.d.ts.map
@@ -0,0 +1,14 @@
1
+ import type { TabItem } from '../TabGroup/tab-item-utils';
2
+ export type BarNavTab = TabItem;
3
+ export interface BarNavActionItem {
4
+ id: string;
5
+ /** Icon name for <ds-icon>. */
6
+ icon: string;
7
+ /** Whether this action button is currently pressed/active. */
8
+ selected?: boolean;
9
+ /** Show a notification dot. */
10
+ dot?: boolean;
11
+ inactive?: boolean;
12
+ ariaLabel?: string;
13
+ }
14
+ //# sourceMappingURL=bar-nav-types.d.ts.map
@@ -1,4 +1,4 @@
1
- import type { BarNavActionItem, BarNavTab } from './BarNav';
1
+ import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
2
2
  export interface BarNavUrlState {
3
3
  /** Tab id derived from the URL, or empty when none applies. */
4
4
  value: string;
@@ -0,0 +1,3 @@
1
+ export type { BarNavTab, BarNavActionItem } from './bar-nav-types';
2
+ export type { NavChromeStyle } from '../../nav/nav-chrome';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -1,5 +1,5 @@
1
1
  import { EventEmitter } from '../../stencil-public-runtime';
2
- export type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
2
+ export type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';
3
3
  export declare class BarNavAction {
4
4
  /** Icon name passed to <ds-icon>. */
5
5
  icon: string;
@@ -0,0 +1,30 @@
1
+ import { EventEmitter } from '../../stencil-public-runtime';
2
+ export type ChipIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
3
+ export type ChipContrast = 'strong' | 'bold' | 'medium' | 'faint';
4
+ export type ChipElevation = 'none' | 'flat' | 'elevated';
5
+ export type ChipSize = 'md' | 'sm' | 'xs';
6
+ export type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
7
+ export declare class Chip {
8
+ label: string;
9
+ intent: ChipIntent;
10
+ contrast: ChipContrast;
11
+ elevation: ChipElevation;
12
+ size: ChipSize;
13
+ rounded: boolean;
14
+ removable: boolean;
15
+ maxWidth: string | number | undefined;
16
+ inactive: boolean;
17
+ background: ChipBackground | undefined;
18
+ pressed: boolean;
19
+ /** Fired when the remove button is clicked. */
20
+ dsRemove: EventEmitter<void>;
21
+ /** Fired when an interactive chip is clicked. */
22
+ dsClick: EventEmitter<void>;
23
+ /** Fired when the pressed state toggles. */
24
+ dsPressedChange: EventEmitter<boolean>;
25
+ private handleClick;
26
+ private handleKeyDown;
27
+ private handleRemove;
28
+ render(): any;
29
+ }
30
+ //# sourceMappingURL=Chip.d.ts.map
@@ -0,0 +1,2 @@
1
+ export type { ChipIntent, ChipContrast, ChipElevation, ChipSize, ChipBackground } from './Chip';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1,25 @@
1
+ export type FadeSide = 'top' | 'bottom' | 'left' | 'right';
2
+ export type FadeSurface = 'default' | 'primary' | 'secondary' | 'navigation' | 'media' | 'always-dark' | 'inverted';
3
+ export type FadeSizeToken = 'size-000' | 'size-050' | 'size-075' | 'size-100' | 'size-150' | 'size-200' | 'size-250' | 'size-300' | 'size-400' | 'size-500' | 'size-600' | 'size-800';
4
+ export type FadeSize = FadeSizeToken | (string & {});
5
+ export declare class Fade {
6
+ /** Edge where the fade is anchored. */
7
+ side: FadeSide;
8
+ /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */
9
+ size: FadeSize;
10
+ /**
11
+ * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.
12
+ * Prefer `size`.
13
+ */
14
+ height: string | undefined;
15
+ /** Surface context used to choose the fade target background token. */
16
+ surface: FadeSurface;
17
+ /** Direct background override for contexts that already expose a resolved surface var. */
18
+ background: string;
19
+ /** Controls visibility without removing the element from layout/positioning. */
20
+ visible: boolean;
21
+ private resolveSize;
22
+ private resolveBackground;
23
+ render(): any;
24
+ }
25
+ //# sourceMappingURL=Fade.d.ts.map
@@ -0,0 +1,2 @@
1
+ export type { FadeSide, FadeSize, FadeSizeToken, FadeSurface } from './Fade';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -1,26 +1,11 @@
1
1
  import { EventEmitter } from '../../stencil-public-runtime';
2
- export type PanelNavVariant = 'dashboard' | 'settings';
3
- export type PanelNavRouterMode = 'anchor' | 'event';
4
- export interface PanelNavItem {
5
- id: string;
6
- icon: string;
7
- label: string;
8
- /** Show a notification dot badge on the item */
9
- dot?: boolean;
10
- flag?: boolean;
11
- /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.
12
- * In `event` mode navigation is delegated to the host via `dsNavSelect`. */
13
- href?: string;
14
- }
15
- export interface PanelNavGroup {
16
- id?: string;
17
- label?: string;
18
- items: PanelNavItem[];
19
- }
2
+ import type { NavChromeStyle } from '../../nav/nav-chrome';
3
+ import type { PanelNavGroup, PanelNavRouterMode } from './panel-nav-types';
20
4
  export declare class PanelNav {
21
- /** Visual variant: `dashboard` = always-dark surface, `settings` = light surface */
22
- variant: PanelNavVariant;
23
- /** When `true`, the component does not run its own View Transition on variant
5
+ /** Chrome style: `navigation` = navigation tokens, `default` = standard app tokens.
6
+ * Property: `navStyle`. HTML attribute: `nav-style`. */
7
+ navStyle: NavChromeStyle;
8
+ /** When `true`, the component does not run its own View Transition on style
24
9
  * change — it just updates the rendered surface synchronously. Use this when
25
10
  * the host app orchestrates the page transition itself (e.g. Angular Router's
26
11
  * `withViewTransitions`), so the two don't fight or nest. */
@@ -60,9 +45,9 @@ export declare class PanelNav {
60
45
  /** Emitted when the footer user button is clicked. */
61
46
  dsNavUserAction: EventEmitter<void>;
62
47
  el: HTMLElement;
63
- /** Mirrors `variant` but is only updated inside the VT callback so the
48
+ /** Mirrors `style` but is only updated inside the VT callback so the
64
49
  * View Transition captures a clean before/after snapshot. */
65
- private renderedVariant;
50
+ private renderedStyle;
66
51
  private parsedGroups;
67
52
  private atBottom;
68
53
  private isAnimating;
@@ -90,7 +75,7 @@ export declare class PanelNav {
90
75
  onGroupsChange(val: string | PanelNavGroup[]): void;
91
76
  onActiveIdChange(): void;
92
77
  onCurrentUrlChange(): void;
93
- onVariantChange(newVal: PanelNavVariant): Promise<void>;
78
+ onNavStyleChange(newVal: NavChromeStyle): Promise<void>;
94
79
  componentWillLoad(): void;
95
80
  componentDidLoad(): void;
96
81
  componentDidRender(): void;
@@ -103,8 +88,8 @@ export declare class PanelNav {
103
88
  private syncActiveFromUrl;
104
89
  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */
105
90
  private syncHostPropsIfNeeded;
106
- /** Align `renderedVariant` with `variant` when host bindings land after first paint. */
107
- private syncRenderedVariantIfNeeded;
91
+ /** Align `renderedStyle` with `style` when host bindings land after first paint. */
92
+ private syncRenderedStyleIfNeeded;
108
93
  /** Poll across animation frames — host props may land without triggering @Watch. */
109
94
  private scheduleDeferredHostPropSync;
110
95
  /** Centralised toggle: always emits `dsNavToggle`; when `storageKey` is set
@@ -0,0 +1,4 @@
1
+ export type { PanelNavRouterMode, PanelNavItem, PanelNavGroup } from './panel-nav-types';
2
+ export type { NavChromeStyle } from '../../nav/nav-chrome';
3
+ export { NAV_STYLE_HINT_ATTR, setNavStyleHint, clearNavStyleHint, resolvePanelNavStyle, shouldResyncPanelNavStyle, ensurePanelNavVtStyle, deriveActiveIdFromUrl, parsePanelNavGroups, } from './panel-nav-utils';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1,20 @@
1
+ import type { NavChromeStyle } from '../../nav/nav-chrome';
2
+ export type { NavChromeStyle };
3
+ export type PanelNavRouterMode = 'anchor' | 'event';
4
+ export interface PanelNavItem {
5
+ id: string;
6
+ icon: string;
7
+ label: string;
8
+ /** Show a notification dot badge on the item */
9
+ dot?: boolean;
10
+ flag?: boolean;
11
+ /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.
12
+ * In `event` mode navigation is delegated to the host via `dsNavSelect`. */
13
+ href?: string;
14
+ }
15
+ export interface PanelNavGroup {
16
+ id?: string;
17
+ label?: string;
18
+ items: PanelNavItem[];
19
+ }
20
+ //# sourceMappingURL=panel-nav-types.d.ts.map
@@ -0,0 +1,26 @@
1
+ import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';
2
+ import { NAV_STYLE_HINT_ATTR, clearNavStyleHint, readNavStyleAttr, resolveNavChromeStyle, setNavStyleHint, shouldResyncNavChromeStyle } from '../../nav/nav-chrome';
3
+ import { ensureShellNavVtStyle } from '../../nav/shell-view-transition';
4
+ export type { NavChromeStyle } from '../../nav/nav-chrome';
5
+ export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, resolveNavChromeStyle as resolvePanelNavStyle, shouldResyncNavChromeStyle as shouldResyncPanelNavStyle, };
6
+ /** @deprecated Use `setNavStyleHint` */
7
+ export declare const setPanelNavStyleHint: typeof setNavStyleHint;
8
+ /** @deprecated Use `clearNavStyleHint` */
9
+ export declare const clearPanelNavStyleHint: typeof clearNavStyleHint;
10
+ /** @deprecated Use `NAV_STYLE_HINT_ATTR` */
11
+ export declare const PANEL_NAV_STYLE_HINT_ATTR = "data-nav-style";
12
+ /** @deprecated Use `ensureShellNavVtStyle` */
13
+ export declare const ensurePanelNavVtStyle: typeof ensureShellNavVtStyle;
14
+ /** Whether `path` matches `href` at a segment boundary (exact or child path). */
15
+ export declare function hrefMatchesPath(path: string, href: string): boolean;
16
+ /** Derive the active nav item id from a URL using longest segment-boundary prefix match. */
17
+ export declare function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string;
18
+ /** Total nav item count across all groups. */
19
+ export declare function countPanelNavItems(groups: PanelNavGroup[]): number;
20
+ /** Parse `groups` from either a JSON attribute string or a JS property array. */
21
+ export declare function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[];
22
+ /** Resolve whether VT is disabled from prop and/or host attribute. */
23
+ export declare function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean;
24
+ /** True when host `groups` has items but internal parsed state is still empty. */
25
+ export declare function shouldResyncPanelNavGroups(parsedGroups: PanelNavGroup[], groups: string | unknown): boolean;
26
+ //# sourceMappingURL=panel-nav-utils.d.ts.map
@@ -1,6 +1,6 @@
1
1
  import { EventEmitter } from '../../stencil-public-runtime';
2
2
  import { type TabItem } from '../TabGroup/tab-item-utils';
3
- export type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
3
+ export type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';
4
4
  export declare class TabGroupNav {
5
5
  el: HTMLElement;
6
6
  value: string;
@@ -0,0 +1,15 @@
1
+ export type TagIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
2
+ export type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';
3
+ export type TagElevation = 'none' | 'flat' | 'elevated';
4
+ export type TagSize = 'md' | 'sm' | 'xs';
5
+ export declare class Tag {
6
+ label: string;
7
+ intent: TagIntent;
8
+ contrast: TagContrast;
9
+ elevation: TagElevation;
10
+ size: TagSize;
11
+ rounded: boolean;
12
+ maxWidth: string | number | undefined;
13
+ render(): any;
14
+ }
15
+ //# sourceMappingURL=Tag.d.ts.map
@@ -0,0 +1,2 @@
1
+ export type { TagIntent, TagContrast, TagElevation, TagSize } from './Tag';
2
+ //# sourceMappingURL=index.d.ts.map