@ds-mo/ui 3.0.0 → 3.1.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.
- package/dist/.build-stamp +1 -1
- package/dist/angular/angular-component-lib/utils.d.ts +9 -0
- package/dist/angular/angular-component-lib/utils.js +58 -0
- package/dist/angular/boolean-value-accessor.d.ts +9 -0
- package/dist/angular/boolean-value-accessor.js +37 -0
- package/dist/angular/ds-app-shell.d.ts +12 -0
- package/dist/angular/ds-app-shell.js +38 -0
- package/dist/angular/ds-badge.d.ts +12 -0
- package/dist/angular/ds-badge.js +38 -0
- package/dist/angular/ds-banner.d.ts +15 -0
- package/dist/angular/ds-banner.js +42 -0
- package/dist/angular/ds-bar-nav.d.ts +18 -0
- package/dist/angular/ds-bar-nav.js +42 -0
- package/dist/angular/ds-button-filled.d.ts +15 -0
- package/dist/angular/ds-button-filled.js +43 -0
- package/dist/angular/ds-button-unfilled.d.ts +17 -0
- package/dist/angular/ds-button-unfilled.js +46 -0
- package/dist/angular/ds-card-data-viz-donut.d.ts +18 -0
- package/dist/angular/ds-card-data-viz-donut.js +42 -0
- package/dist/angular/ds-card-setting.d.ts +18 -0
- package/dist/angular/ds-card-setting.js +42 -0
- package/dist/angular/ds-card.d.ts +12 -0
- package/dist/angular/ds-card.js +38 -0
- package/dist/angular/ds-chart-bar.d.ts +12 -0
- package/dist/angular/ds-chart-bar.js +38 -0
- package/dist/angular/ds-chart-donut.d.ts +19 -0
- package/dist/angular/ds-chart-donut.js +42 -0
- package/dist/angular/ds-chart-legend.d.ts +30 -0
- package/dist/angular/ds-chart-legend.js +45 -0
- package/dist/angular/ds-chart-line.d.ts +12 -0
- package/dist/angular/ds-chart-line.js +38 -0
- package/dist/angular/ds-checkbox.d.ts +15 -0
- package/dist/angular/ds-checkbox.js +42 -0
- package/dist/angular/ds-chip.d.ts +18 -0
- package/dist/angular/ds-chip.js +42 -0
- package/dist/angular/ds-divider.d.ts +12 -0
- package/dist/angular/ds-divider.js +38 -0
- package/dist/angular/ds-empty-state.d.ts +12 -0
- package/dist/angular/ds-empty-state.js +38 -0
- package/dist/angular/ds-field.d.ts +12 -0
- package/dist/angular/ds-field.js +38 -0
- package/dist/angular/ds-icon.d.ts +12 -0
- package/dist/angular/ds-icon.js +38 -0
- package/dist/angular/ds-input.d.ts +17 -0
- package/dist/angular/ds-input.js +46 -0
- package/dist/angular/ds-loader.d.ts +12 -0
- package/dist/angular/ds-loader.js +38 -0
- package/dist/angular/ds-menu.d.ts +24 -0
- package/dist/angular/ds-menu.js +48 -0
- package/dist/angular/ds-modal.d.ts +15 -0
- package/dist/angular/ds-modal.js +42 -0
- package/dist/angular/ds-pagination.d.ts +15 -0
- package/dist/angular/ds-pagination.js +42 -0
- package/dist/angular/ds-panel-nav.d.ts +42 -0
- package/dist/angular/ds-panel-nav.js +58 -0
- package/dist/angular/ds-panel-tools.d.ts +33 -0
- package/dist/angular/ds-panel-tools.js +49 -0
- package/dist/angular/ds-radio-group.d.ts +15 -0
- package/dist/angular/ds-radio-group.js +42 -0
- package/dist/angular/ds-select.d.ts +18 -0
- package/dist/angular/ds-select.js +42 -0
- package/dist/angular/ds-shell-gradient-picker.d.ts +16 -0
- package/dist/angular/ds-shell-gradient-picker.js +42 -0
- package/dist/angular/ds-shell-gradient-swatch.d.ts +16 -0
- package/dist/angular/ds-shell-gradient-swatch.js +42 -0
- package/dist/angular/ds-skeleton.d.ts +12 -0
- package/dist/angular/ds-skeleton.js +38 -0
- package/dist/angular/ds-slider.d.ts +15 -0
- package/dist/angular/ds-slider.js +42 -0
- package/dist/angular/ds-tab-group-nav.d.ts +20 -0
- package/dist/angular/ds-tab-group-nav.js +46 -0
- package/dist/angular/ds-tab-group.d.ts +15 -0
- package/dist/angular/ds-tab-group.js +42 -0
- package/dist/angular/ds-table.d.ts +33 -0
- package/dist/angular/ds-table.js +48 -0
- package/dist/angular/ds-tag.d.ts +12 -0
- package/dist/angular/ds-tag.js +38 -0
- package/dist/angular/ds-text.d.ts +12 -0
- package/dist/angular/ds-text.js +38 -0
- package/dist/angular/ds-toggle.d.ts +15 -0
- package/dist/angular/ds-toggle.js +42 -0
- package/dist/angular/ds-tooltip-data-viz.d.ts +12 -0
- package/dist/angular/ds-tooltip-data-viz.js +38 -0
- package/dist/angular/ds-tooltip.d.ts +12 -0
- package/dist/angular/ds-tooltip.js +38 -0
- package/dist/angular/index.d.ts +2 -0
- package/dist/angular/index.js +43 -0
- package/dist/angular/proxies.d.ts +44 -0
- package/dist/angular/proxies.js +45 -0
- package/dist/angular/radio-value-accessor.d.ts +8 -0
- package/dist/angular/radio-value-accessor.js +34 -0
- package/dist/angular/select-value-accessor.d.ts +8 -0
- package/dist/angular/select-value-accessor.js +34 -0
- package/dist/angular/text-value-accessor.d.ts +8 -0
- package/dist/angular/text-value-accessor.js +34 -0
- package/dist/angular/value-accessor.d.ts +18 -0
- package/dist/angular/value-accessor.js +39 -0
- 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-setting.js.map +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-donut.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-checkbox.js.map +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-chip.js.map +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-empty-state.js.map +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-input.js.map +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-pagination.js.map +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-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-radio-group.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +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-slider.js +1 -1
- package/dist/components/ds-tab-group-nav.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tab-group.js.map +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toggle.js +1 -1
- package/dist/components/ds-toggle.js.map +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/p-BBpASejH.js +2 -0
- package/dist/components/p-BBpASejH.js.map +1 -0
- package/dist/components/{p-V2qW8NL0.js → p-BFiaUYu7.js} +2 -2
- package/dist/components/p-BFiaUYu7.js.map +1 -0
- package/dist/components/p-BOQRM49Q.js +2 -0
- package/dist/components/{p-sBx2MuF2.js.map → p-BOQRM49Q.js.map} +1 -1
- package/dist/components/p-CTK82RIw.js +2 -0
- package/dist/components/p-CTK82RIw.js.map +1 -0
- package/dist/components/{p-BSNlp8Di.js → p-Cp86p-11.js} +2 -2
- package/dist/components/{p-BSNlp8Di.js.map → p-Cp86p-11.js.map} +1 -1
- package/dist/components/{p-DQ3l2TXw.js → p-DEgY_Lnb.js} +2 -2
- package/dist/components/{p-CNgNgezy.js → p-DHjjwgku.js} +2 -2
- package/dist/components/{p-CNgNgezy.js.map → p-DHjjwgku.js.map} +1 -1
- package/dist/components/p-DI8rHm9u.js +2 -0
- package/dist/components/p-DI8rHm9u.js.map +1 -0
- package/dist/components/p-DMD-RO1W.js +2 -0
- package/dist/components/p-DMD-RO1W.js.map +1 -0
- package/dist/components/{p-BVNJnFI9.js → p-DOEMwKBb.js} +2 -2
- package/dist/components/{p-BVNJnFI9.js.map → p-DOEMwKBb.js.map} +1 -1
- package/dist/components/p-DolYlDbY.js +2 -0
- package/dist/components/p-DolYlDbY.js.map +1 -0
- package/dist/framework/angular.d.ts +6 -0
- package/dist/framework/angular.js +6 -0
- package/dist/lib/utils/format-compact-number.d.ts +1 -1
- package/dist/lib/utils/index.js +8 -1
- package/dist/lib/utils/index.js.map +2 -2
- package/dist/react/components.d.ts +44 -0
- package/{src/react/components.ts → dist/react/components.js} +0 -1
- package/dist/react/ds-app-shell.d.ts +9 -0
- package/dist/react/ds-app-shell.js +12 -0
- package/dist/react/ds-badge.d.ts +9 -0
- package/dist/react/ds-badge.js +12 -0
- package/dist/react/ds-banner.d.ts +12 -0
- package/dist/react/ds-banner.js +12 -0
- package/dist/react/ds-bar-nav.d.ts +12 -0
- package/dist/react/ds-bar-nav.js +12 -0
- package/dist/react/ds-button-filled.d.ts +12 -0
- package/dist/react/ds-button-filled.js +12 -0
- package/dist/react/ds-button-unfilled.d.ts +13 -0
- package/dist/react/ds-button-unfilled.js +15 -0
- package/dist/react/ds-card-data-viz-donut.d.ts +12 -0
- package/dist/react/ds-card-data-viz-donut.js +12 -0
- package/dist/react/ds-card-setting.d.ts +12 -0
- package/dist/react/ds-card-setting.js +12 -0
- package/dist/react/ds-card.d.ts +9 -0
- package/dist/react/ds-card.js +12 -0
- package/dist/react/ds-chart-bar.d.ts +9 -0
- package/dist/react/ds-chart-bar.js +12 -0
- package/dist/react/ds-chart-donut.d.ts +12 -0
- package/dist/react/ds-chart-donut.js +12 -0
- package/dist/react/ds-chart-legend.d.ts +16 -0
- package/dist/react/ds-chart-legend.js +15 -0
- package/dist/react/ds-chart-line.d.ts +9 -0
- package/dist/react/ds-chart-line.js +12 -0
- package/dist/react/ds-checkbox.d.ts +12 -0
- package/dist/react/ds-checkbox.js +12 -0
- package/dist/react/ds-chip.d.ts +12 -0
- package/dist/react/ds-chip.js +12 -0
- package/dist/react/ds-divider.d.ts +9 -0
- package/dist/react/ds-divider.js +12 -0
- package/dist/react/ds-empty-state.d.ts +9 -0
- package/dist/react/ds-empty-state.js +12 -0
- package/dist/react/ds-field.d.ts +9 -0
- package/dist/react/ds-field.js +12 -0
- package/dist/react/ds-icon.d.ts +9 -0
- package/dist/react/ds-icon.js +12 -0
- package/dist/react/ds-input.d.ts +13 -0
- package/dist/react/ds-input.js +15 -0
- package/dist/react/ds-loader.d.ts +9 -0
- package/dist/react/ds-loader.js +12 -0
- package/dist/react/ds-menu.d.ts +14 -0
- package/dist/react/ds-menu.js +16 -0
- package/dist/react/ds-modal.d.ts +12 -0
- package/dist/react/ds-modal.js +12 -0
- package/dist/react/ds-pagination.d.ts +12 -0
- package/dist/react/ds-pagination.js +12 -0
- package/dist/react/ds-panel-nav.d.ts +17 -0
- package/dist/react/ds-panel-nav.js +19 -0
- package/dist/react/ds-panel-tools.d.ts +17 -0
- package/dist/react/ds-panel-tools.js +16 -0
- package/dist/react/ds-radio-group.d.ts +12 -0
- package/dist/react/ds-radio-group.js +12 -0
- package/dist/react/ds-select.d.ts +12 -0
- package/dist/react/ds-select.js +12 -0
- package/dist/react/ds-shell-gradient-picker.d.ts +12 -0
- package/dist/react/ds-shell-gradient-picker.js +12 -0
- package/dist/react/ds-shell-gradient-swatch.d.ts +12 -0
- package/dist/react/ds-shell-gradient-swatch.js +12 -0
- package/dist/react/ds-skeleton.d.ts +9 -0
- package/dist/react/ds-skeleton.js +12 -0
- package/dist/react/ds-slider.d.ts +12 -0
- package/dist/react/ds-slider.js +12 -0
- package/dist/react/ds-tab-group-nav.d.ts +13 -0
- package/dist/react/ds-tab-group-nav.js +15 -0
- package/dist/react/ds-tab-group.d.ts +12 -0
- package/dist/react/ds-tab-group.js +12 -0
- package/dist/react/ds-table.d.ts +21 -0
- package/dist/react/ds-table.js +16 -0
- package/dist/react/ds-tag.d.ts +9 -0
- package/dist/react/ds-tag.js +12 -0
- package/dist/react/ds-text.d.ts +9 -0
- package/dist/react/ds-text.js +12 -0
- package/dist/react/ds-toggle.d.ts +12 -0
- package/dist/react/ds-toggle.js +12 -0
- package/dist/react/ds-tooltip-data-viz.d.ts +9 -0
- package/dist/react/ds-tooltip-data-viz.js +12 -0
- package/dist/react/ds-tooltip.d.ts +9 -0
- package/dist/react/ds-tooltip.js +12 -0
- package/dist/types/components/BarNav/BarNav.d.ts +1 -0
- package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +1 -1
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +1 -1
- package/dist/types/components/CardDataVizDonut/CardDataVizDonut.d.ts +1 -0
- package/dist/types/components/CardSetting/CardSetting.d.ts +3 -0
- package/dist/types/components/ChartDonut/ChartDonut.d.ts +2 -0
- package/dist/types/components/ChartLegend/ChartLegend.d.ts +1 -0
- package/dist/types/components/Checkbox/Checkbox.d.ts +12 -0
- package/dist/types/components/Chip/Chip.d.ts +2 -0
- package/dist/types/components/EmptyState/EmptyState.d.ts +2 -0
- package/dist/types/components/Input/Input.d.ts +14 -1
- package/dist/types/components/Menu/Menu.d.ts +2 -0
- package/dist/types/components/Pagination/Pagination.d.ts +3 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +7 -0
- package/dist/types/components/PanelTools/PanelTools.d.ts +2 -0
- package/dist/types/components/RadioGroup/RadioGroup.d.ts +13 -1
- package/dist/types/components/Select/Select.d.ts +13 -1
- package/dist/types/components/ShellGradientPicker/ShellGradientPicker.d.ts +1 -0
- package/dist/types/components/ShellGradientSwatch/ShellGradientSwatch.d.ts +1 -1
- package/dist/types/components/TabGroup/TabGroup.d.ts +1 -1
- package/dist/types/components/TabGroupNav/TabGroupNav.d.ts +1 -1
- package/dist/types/components/Table/Table.d.ts +6 -0
- package/dist/types/components/Text/Text.d.ts +2 -1
- package/dist/types/components/Toggle/Toggle.d.ts +12 -0
- package/dist/types/components/Tooltip/Tooltip.d.ts +6 -0
- package/dist/types/components.d.ts +527 -32
- package/dist/types/stencil-public-runtime.d.ts +1 -0
- package/dist/types/utils/format-compact-number.d.ts +1 -1
- package/package.json +58 -41
- package/dist/components/p-B_ENgncs.js +0 -2
- package/dist/components/p-B_ENgncs.js.map +0 -1
- package/dist/components/p-CQmul5NK.js +0 -2
- package/dist/components/p-CQmul5NK.js.map +0 -1
- package/dist/components/p-CsaW5gDM.js +0 -2
- package/dist/components/p-CsaW5gDM.js.map +0 -1
- package/dist/components/p-DEpLlQZK.js +0 -2
- package/dist/components/p-DEpLlQZK.js.map +0 -1
- package/dist/components/p-DRqJ3RUb.js +0 -2
- package/dist/components/p-DRqJ3RUb.js.map +0 -1
- package/dist/components/p-V2qW8NL0.js.map +0 -1
- package/dist/components/p-sBx2MuF2.js +0 -2
- package/src/angular/angular-component-lib/utils.ts +0 -65
- package/src/angular/index.ts +0 -45
- package/src/angular/proxies.ts +0 -1156
- package/src/react/ds-app-shell.ts +0 -26
- package/src/react/ds-badge.ts +0 -26
- package/src/react/ds-banner.ts +0 -27
- package/src/react/ds-bar-nav.ts +0 -27
- package/src/react/ds-button-filled.ts +0 -27
- package/src/react/ds-button-unfilled.ts +0 -33
- package/src/react/ds-card-data-viz-donut.ts +0 -27
- package/src/react/ds-card-setting.ts +0 -27
- package/src/react/ds-card.ts +0 -26
- package/src/react/ds-chart-bar.ts +0 -26
- package/src/react/ds-chart-donut.ts +0 -27
- package/src/react/ds-chart-legend.ts +0 -33
- package/src/react/ds-chart-line.ts +0 -26
- package/src/react/ds-checkbox.ts +0 -27
- package/src/react/ds-chip.ts +0 -27
- package/src/react/ds-divider.ts +0 -26
- package/src/react/ds-empty-state.ts +0 -26
- package/src/react/ds-field.ts +0 -26
- package/src/react/ds-icon.ts +0 -26
- package/src/react/ds-input.ts +0 -33
- package/src/react/ds-loader.ts +0 -26
- package/src/react/ds-menu.ts +0 -35
- package/src/react/ds-modal.ts +0 -27
- package/src/react/ds-pagination.ts +0 -27
- package/src/react/ds-panel-nav.ts +0 -41
- package/src/react/ds-panel-tools.ts +0 -35
- package/src/react/ds-radio-group.ts +0 -27
- package/src/react/ds-select.ts +0 -27
- package/src/react/ds-shell-gradient-picker.ts +0 -27
- package/src/react/ds-shell-gradient-swatch.ts +0 -27
- package/src/react/ds-skeleton.ts +0 -26
- package/src/react/ds-slider.ts +0 -27
- package/src/react/ds-tab-group-nav.ts +0 -33
- package/src/react/ds-tab-group.ts +0 -27
- package/src/react/ds-table.ts +0 -35
- package/src/react/ds-tag.ts +0 -26
- package/src/react/ds-text.ts +0 -26
- package/src/react/ds-toggle.ts +0 -27
- package/src/react/ds-tooltip-data-viz.ts +0 -26
- package/src/react/ds-tooltip.ts +0 -26
- package/src/wc/components/AppShell/AppShell.tsx +0 -377
- package/src/wc/components/Badge/Badge.tsx +0 -179
- package/src/wc/components/Badge/index.ts +0 -1
- package/src/wc/components/Banner/Banner.tsx +0 -156
- package/src/wc/components/BarNav/BarNav.tsx +0 -742
- package/src/wc/components/BarNav/bar-nav-dom-utils.ts +0 -23
- package/src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts +0 -114
- package/src/wc/components/BarNav/bar-nav-types.ts +0 -3
- package/src/wc/components/BarNav/bar-nav-utils.ts +0 -67
- package/src/wc/components/BarNav/index.ts +0 -2
- package/src/wc/components/ButtonFilled/ButtonFilled.tsx +0 -171
- package/src/wc/components/ButtonFilled/index.ts +0 -7
- package/src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx +0 -229
- package/src/wc/components/ButtonUnfilled/index.ts +0 -7
- package/src/wc/components/Card/Card.tsx +0 -78
- package/src/wc/components/Card/index.ts +0 -1
- package/src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx +0 -108
- package/src/wc/components/CardDataVizDonut/index.ts +0 -1
- package/src/wc/components/CardSetting/CardSetting.tsx +0 -81
- package/src/wc/components/CardSetting/index.ts +0 -1
- package/src/wc/components/ChartBar/ChartBar.tsx +0 -88
- package/src/wc/components/ChartBar/index.ts +0 -1
- package/src/wc/components/ChartDonut/ChartDonut.tsx +0 -289
- package/src/wc/components/ChartDonut/index.ts +0 -1
- package/src/wc/components/ChartLegend/ChartLegend.tsx +0 -125
- package/src/wc/components/ChartLegend/index.ts +0 -2
- package/src/wc/components/ChartLine/ChartLine.tsx +0 -102
- package/src/wc/components/ChartLine/index.ts +0 -1
- package/src/wc/components/Checkbox/Checkbox.tsx +0 -60
- package/src/wc/components/Checkbox/index.ts +0 -1
- package/src/wc/components/Chip/Chip.tsx +0 -104
- package/src/wc/components/Chip/index.ts +0 -1
- package/src/wc/components/Divider/Divider.tsx +0 -107
- package/src/wc/components/Divider/index.ts +0 -2
- package/src/wc/components/EmptyState/EmptyState.tsx +0 -30
- package/src/wc/components/Field/Field.tsx +0 -30
- package/src/wc/components/Icon/Icon.tsx +0 -172
- package/src/wc/components/Icon/flag-icon-catalog.ts +0 -36
- package/src/wc/components/Icon/icon-cache.ts +0 -47
- package/src/wc/components/Icon/icon-svg.ts +0 -73
- package/src/wc/components/Icon/index.ts +0 -1
- package/src/wc/components/Icon/system-icon-catalog.ts +0 -401
- package/src/wc/components/Input/Input.tsx +0 -107
- package/src/wc/components/Input/index.ts +0 -1
- package/src/wc/components/Loader/Loader.tsx +0 -99
- package/src/wc/components/Loader/index.ts +0 -1
- package/src/wc/components/Menu/Menu.tsx +0 -437
- package/src/wc/components/Menu/menu-placement.ts +0 -26
- package/src/wc/components/Menu/menu-position.ts +0 -78
- package/src/wc/components/Menu/menu-types.ts +0 -39
- package/src/wc/components/Modal/Modal.tsx +0 -213
- package/src/wc/components/Pagination/Pagination.tsx +0 -97
- package/src/wc/components/PanelNav/PanelNav.tsx +0 -707
- package/src/wc/components/PanelNav/index.ts +0 -17
- package/src/wc/components/PanelNav/panel-nav-types.ts +0 -36
- package/src/wc/components/PanelNav/panel-nav-utils.ts +0 -79
- package/src/wc/components/PanelTools/PanelTools.tsx +0 -366
- package/src/wc/components/PanelTools/index.ts +0 -7
- package/src/wc/components/PanelTools/panel-tools-types.ts +0 -44
- package/src/wc/components/PanelTools/panel-tools-utils.ts +0 -50
- package/src/wc/components/RadioGroup/RadioGroup.tsx +0 -130
- package/src/wc/components/RadioGroup/index.ts +0 -1
- package/src/wc/components/Select/Select.tsx +0 -274
- package/src/wc/components/Select/index.ts +0 -1
- package/src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx +0 -55
- package/src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx +0 -69
- package/src/wc/components/ShellGradientSwatch/shell-gradient-swatch-types.ts +0 -17
- package/src/wc/components/Skeleton/Skeleton.tsx +0 -64
- package/src/wc/components/Skeleton/index.ts +0 -1
- package/src/wc/components/Slider/Slider.tsx +0 -76
- package/src/wc/components/Slider/index.ts +0 -1
- package/src/wc/components/TabGroup/TabGroup.tsx +0 -204
- package/src/wc/components/TabGroup/tab-item-utils.ts +0 -25
- package/src/wc/components/TabGroupNav/TabGroupNav.tsx +0 -347
- package/src/wc/components/Table/Table.tsx +0 -273
- package/src/wc/components/Tag/Tag.tsx +0 -63
- package/src/wc/components/Tag/index.ts +0 -1
- package/src/wc/components/Text/Text.tsx +0 -98
- package/src/wc/components/Text/index.ts +0 -12
- package/src/wc/components/Text/text-types.ts +0 -23
- package/src/wc/components/Text/text-utils.ts +0 -13
- package/src/wc/components/Toggle/Toggle.tsx +0 -43
- package/src/wc/components/Toggle/index.ts +0 -1
- package/src/wc/components/Tooltip/Tooltip.tsx +0 -372
- package/src/wc/components/TooltipDataViz/TooltipDataViz.tsx +0 -145
- package/src/wc/components/TooltipDataViz/index.ts +0 -1
- package/src/wc/components.d.ts +0 -3569
- package/src/wc/nav/badge-gradient-ring.ts +0 -109
- package/src/wc/nav/chrome-transition.ts +0 -62
- package/src/wc/nav/index.ts +0 -80
- package/src/wc/nav/nav-chrome.ts +0 -47
- package/src/wc/nav/shell-chrome-metrics.ts +0 -49
- package/src/wc/nav/shell-gradient-presets.ts +0 -60
- package/src/wc/nav/shell-gradient.ts +0 -94
- package/src/wc/nav/shell-shortcuts.ts +0 -63
- package/src/wc/nav/shell-view-transition.ts +0 -122
- package/src/wc/utils/chart-colors.ts +0 -7
- package/src/wc/utils/chart-types.ts +0 -25
- package/src/wc/utils/control-density.css +0 -43
- package/src/wc/utils/control-inactive.css +0 -20
- package/src/wc/utils/control-text.ts +0 -11
- package/src/wc/utils/control-width.css +0 -28
- package/src/wc/utils/control-width.ts +0 -10
- package/src/wc/utils/focus-ring.css +0 -33
- package/src/wc/utils/format-compact-number.ts +0 -27
- package/src/wc/utils/index.ts +0 -27
- package/src/wc/utils/interaction-fill.css +0 -162
- package/src/wc/utils/resolve-css-length-px.ts +0 -66
- package/src/wc/utils/resolve-css-time-ms.ts +0 -46
- package/src/wc/utils/scroll-edge-fade.css +0 -80
- package/src/wc/utils/scroll-edge-fade.ts +0 -148
- package/src/wc/utils/token-defaults.ts +0 -81
- package/src/wc/utils/truncate-svg-text.ts +0 -25
- package/src/wc/utils/typography.css +0 -146
- /package/dist/components/{p-DQ3l2TXw.js.map → p-DEgY_Lnb.js.map} +0 -0
|
@@ -1070,6 +1070,7 @@ export declare namespace JSXBase {
|
|
|
1070
1070
|
importance?: 'low' | 'auto' | 'high';
|
|
1071
1071
|
height?: number | string;
|
|
1072
1072
|
loading?: 'lazy' | 'auto' | 'eager';
|
|
1073
|
+
referrerPolicy?: ReferrerPolicy;
|
|
1073
1074
|
sizes?: string;
|
|
1074
1075
|
src?: string;
|
|
1075
1076
|
srcSet?: string;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/** Compact large numbers for display: 1000 -> "1k", 1500 -> "1.5k", 110100 -> "110.1k", 1000000 -> "1m". */
|
|
2
|
-
export declare function formatCompactNumber(value: number): string;
|
|
2
|
+
export declare function formatCompactNumber(value: number, locale?: string): string;
|
|
3
3
|
//# sourceMappingURL=format-compact-number.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ds-mo/ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "CompoMo — composable web components styled with TokoMo design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -21,24 +21,32 @@
|
|
|
21
21
|
},
|
|
22
22
|
"license": "MIT",
|
|
23
23
|
"type": "module",
|
|
24
|
-
"main": "./dist/index.js",
|
|
25
|
-
"module": "./dist/index.js",
|
|
26
|
-
"types": "./
|
|
24
|
+
"main": "./dist/components/index.js",
|
|
25
|
+
"module": "./dist/components/index.js",
|
|
26
|
+
"types": "./dist/types/components.d.ts",
|
|
27
27
|
"exports": {
|
|
28
28
|
".": {
|
|
29
|
-
"types": "./
|
|
29
|
+
"types": "./dist/types/components.d.ts",
|
|
30
30
|
"import": "./dist/components/index.js"
|
|
31
31
|
},
|
|
32
32
|
"./angular": {
|
|
33
|
-
"types": "./
|
|
34
|
-
"import": "./
|
|
33
|
+
"types": "./dist/framework/angular.d.ts",
|
|
34
|
+
"import": "./dist/framework/angular.js"
|
|
35
|
+
},
|
|
36
|
+
"./angular/*": {
|
|
37
|
+
"types": "./dist/angular/*.d.ts",
|
|
38
|
+
"import": "./dist/angular/*.js"
|
|
35
39
|
},
|
|
36
40
|
"./react": {
|
|
37
|
-
"types": "./
|
|
38
|
-
"import": "./
|
|
41
|
+
"types": "./dist/react/components.d.ts",
|
|
42
|
+
"import": "./dist/react/components.js"
|
|
39
43
|
},
|
|
40
44
|
"./dist/components": {
|
|
41
|
-
"types": "./
|
|
45
|
+
"types": "./dist/types/components.d.ts",
|
|
46
|
+
"import": "./dist/components/index.js"
|
|
47
|
+
},
|
|
48
|
+
"./components": {
|
|
49
|
+
"types": "./dist/types/components.d.ts",
|
|
42
50
|
"import": "./dist/components/index.js"
|
|
43
51
|
},
|
|
44
52
|
"./nav": {
|
|
@@ -49,29 +57,21 @@
|
|
|
49
57
|
"types": "./dist/lib/utils/index.d.ts",
|
|
50
58
|
"import": "./dist/lib/utils/index.js"
|
|
51
59
|
},
|
|
52
|
-
"./dist/components/*": "./dist/components/*"
|
|
60
|
+
"./dist/components/*": "./dist/components/*",
|
|
61
|
+
"./components/*": "./dist/components/*"
|
|
53
62
|
},
|
|
54
63
|
"files": [
|
|
55
|
-
"dist"
|
|
56
|
-
"src/wc/components.d.ts",
|
|
57
|
-
"src/wc/components/**/*.ts",
|
|
58
|
-
"src/wc/components/**/*.tsx",
|
|
59
|
-
"!src/wc/components/**/*.stories.ts",
|
|
60
|
-
"!src/wc/components/**/*.stories.tsx",
|
|
61
|
-
"src/wc/nav",
|
|
62
|
-
"src/wc/utils",
|
|
63
|
-
"src/angular",
|
|
64
|
-
"src/react"
|
|
64
|
+
"dist"
|
|
65
65
|
],
|
|
66
66
|
"scripts": {
|
|
67
|
-
"prebuild": "node scripts/generate-icon-catalog.mjs",
|
|
67
|
+
"prebuild": "npm run clean && node scripts/generate-icon-catalog.mjs",
|
|
68
68
|
"pretypecheck": "node scripts/generate-icon-catalog.mjs",
|
|
69
69
|
"pretest": "node scripts/generate-icon-catalog.mjs",
|
|
70
|
-
"build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs && node scripts/build-lib-exports.mjs",
|
|
71
|
-
"verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-
|
|
72
|
-
"test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/text.test.ts tests/eslint-plugin-local.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
|
|
70
|
+
"build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs && node scripts/build-lib-exports.mjs && node scripts/build-framework-exports.mjs",
|
|
71
|
+
"verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-package-imports.mjs",
|
|
72
|
+
"test": "node --import tsx/esm --test tests/agent-contract.test.ts tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/text.test.ts tests/eslint-plugin-local.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/menu-placement.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts tests/icon-cache.test.ts tests/icon-svg.test.ts",
|
|
73
73
|
"test:e2e": "npm run build && playwright test",
|
|
74
|
-
"test:e2e:install": "playwright install chromium firefox",
|
|
74
|
+
"test:e2e:install": "playwright install chromium firefox webkit",
|
|
75
75
|
"build:docs": "stencil build --docs",
|
|
76
76
|
"dev": "node scripts/generate-icon-catalog.mjs && stencil build --watch",
|
|
77
77
|
"storybook:ui": "node scripts/storybook-ui.mjs",
|
|
@@ -83,6 +83,8 @@
|
|
|
83
83
|
"lint": "eslint src/ && npm run lint:css",
|
|
84
84
|
"lint:css": "stylelint \"src/wc/components/**/*.css\" \"src/wc/utils/**/*.css\"",
|
|
85
85
|
"registry:build": "node scripts/build-registry.mjs",
|
|
86
|
+
"agent:validate": "node scripts/validate-agent-contract.mjs",
|
|
87
|
+
"agent:validate:trilogy": "node scripts/validate-trilogy-manifests.mjs",
|
|
86
88
|
"mcp": "node scripts/mcp-server.mjs",
|
|
87
89
|
"figma:connect:help": "figma connect --help",
|
|
88
90
|
"figma:connect:publish:dry-run": "figma connect publish --dry-run -c figma.config.json --exit-on-unreadable-files",
|
|
@@ -91,12 +93,20 @@
|
|
|
91
93
|
"typecheck:figma": "tsc -p tsconfig.figma.json --noEmit"
|
|
92
94
|
},
|
|
93
95
|
"peerDependencies": {
|
|
94
|
-
"@
|
|
95
|
-
"@
|
|
96
|
+
"@angular/core": ">=19 <23",
|
|
97
|
+
"@angular/forms": ">=19 <23",
|
|
98
|
+
"@ds-mo/icons": "^6.2.0",
|
|
99
|
+
"@ds-mo/tokens": "^2.15.0",
|
|
96
100
|
"react": "^18 || ^19",
|
|
97
101
|
"react-dom": "^18 || ^19"
|
|
98
102
|
},
|
|
99
103
|
"peerDependenciesMeta": {
|
|
104
|
+
"@angular/core": {
|
|
105
|
+
"optional": true
|
|
106
|
+
},
|
|
107
|
+
"@angular/forms": {
|
|
108
|
+
"optional": true
|
|
109
|
+
},
|
|
100
110
|
"react": {
|
|
101
111
|
"optional": true
|
|
102
112
|
},
|
|
@@ -105,15 +115,19 @@
|
|
|
105
115
|
}
|
|
106
116
|
},
|
|
107
117
|
"devDependencies": {
|
|
108
|
-
"@
|
|
109
|
-
"@
|
|
118
|
+
"@angular/compiler": "^22.0.4",
|
|
119
|
+
"@angular/compiler-cli": "^22.0.4",
|
|
120
|
+
"@angular/core": "^22.0.4",
|
|
121
|
+
"@angular/forms": "^22.0.4",
|
|
122
|
+
"@axe-core/playwright": "^4.12.1",
|
|
123
|
+
"@ds-mo/icons": "^6.2.0",
|
|
124
|
+
"@ds-mo/tokens": "^2.15.0",
|
|
110
125
|
"@eslint/js": "^10.0.1",
|
|
111
|
-
"@figma/code-connect": "^1.4.
|
|
126
|
+
"@figma/code-connect": "^1.4.9",
|
|
112
127
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
113
128
|
"@playwright/test": "^1.55.0",
|
|
114
|
-
"@stencil/angular-output-target": "^1.
|
|
115
|
-
"@stencil/core": "^4.43.
|
|
116
|
-
"@stencil/react-output-target": "^1.5.3",
|
|
129
|
+
"@stencil/angular-output-target": "^1.4.0",
|
|
130
|
+
"@stencil/core": "^4.43.5",
|
|
117
131
|
"@storybook/addon-docs": "^10.5.0",
|
|
118
132
|
"@storybook/web-components": "^10.5.0",
|
|
119
133
|
"@storybook/web-components-vite": "^10.5.0",
|
|
@@ -122,21 +136,22 @@
|
|
|
122
136
|
"@types/d3-shape": "^3.1.8",
|
|
123
137
|
"@types/react": "^19.2.17",
|
|
124
138
|
"@types/react-dom": "^19.2.3",
|
|
139
|
+
"ajv": "^8.20.0",
|
|
125
140
|
"concurrently": "^10.0.3",
|
|
126
|
-
"esbuild": "^0.28.
|
|
127
|
-
"eslint": "^10.
|
|
141
|
+
"esbuild": "^0.28.1",
|
|
142
|
+
"eslint": "^10.7.0",
|
|
128
143
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
129
|
-
"globals": "^17.
|
|
144
|
+
"globals": "^17.7.0",
|
|
130
145
|
"lit": "^3.3.3",
|
|
131
146
|
"react": "^19.2.7",
|
|
132
147
|
"react-dom": "^19.2.7",
|
|
133
148
|
"storybook": "^10.5.0",
|
|
134
149
|
"stylelint": "^17.14.0",
|
|
135
150
|
"stylelint-config-standard": "^40.0.0",
|
|
136
|
-
"tsx": "^4.
|
|
151
|
+
"tsx": "^4.23.0",
|
|
137
152
|
"typescript": "~6.0.3",
|
|
138
|
-
"typescript-eslint": "^8.
|
|
139
|
-
"vite": "^8.
|
|
153
|
+
"typescript-eslint": "^8.63.0",
|
|
154
|
+
"vite": "^8.1.4",
|
|
140
155
|
"zod": "^4.4.3"
|
|
141
156
|
},
|
|
142
157
|
"engines": {
|
|
@@ -147,8 +162,10 @@
|
|
|
147
162
|
"dist/components/**/*.js"
|
|
148
163
|
],
|
|
149
164
|
"dependencies": {
|
|
165
|
+
"@stencil/react-output-target": "^1.6.0",
|
|
150
166
|
"d3-array": "^3.2.4",
|
|
151
167
|
"d3-scale": "^4.0.2",
|
|
152
|
-
"d3-shape": "^3.2.0"
|
|
168
|
+
"d3-shape": "^3.2.0",
|
|
169
|
+
"rxjs": "^7.8.2"
|
|
153
170
|
}
|
|
154
171
|
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as i,H as e,c as s,h as n,a as t,t as o}from"./index.js";import{d as r}from"./p-CsaW5gDM.js";import{d as a}from"./p-BSNlp8Di.js";import{d}from"./p-sBx2MuF2.js";import{T as c,a as l}from"./p-8WTsyLQ9.js";import{r as u}from"./p-BWUTr_XN.js";import{r as h}from"./p-C1cBr-Ri.js";function m(i){const{anchorRect:e,popupWidth:s,popupHeight:n,side:t,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:c,viewportHeight:l}=i;let u=0;let h=0;switch(t){case"top":h=e.top-n-r;u=o==="start"?e.left+a:o==="end"?e.right-s+a:e.left+e.width/2-s/2+a;break;case"bottom":h=e.bottom+r;u=o==="start"?e.left+a:o==="end"?e.right-s+a:e.left+e.width/2-s/2+a;break;case"left":u=e.left-s-r;h=o==="start"?e.top+a:o==="end"?e.bottom-n+a:e.top+e.height/2-n/2+a;break;case"right":u=e.right+r;h=o==="start"?e.top+a:o==="end"?e.bottom-n+a:e.top+e.height/2-n/2+a;break}return{x:Math.min(Math.max(u,d),c-s-d),y:Math.min(Math.max(h,d),l-n-d)}}function f(i){return"variant"in i&&i.variant==="gradient-picker"}const g=()=>`.sc-ds-menu-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-menu:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-menu-h,.ds-interaction-fill.sc-ds-menu{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-menu-h,.ds-control-inactive.sc-ds-menu{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-menu-h,.ds-control--sm.sc-ds-menu{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-menu-h,.ds-control--xs.sc-ds-menu{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-2) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );color:var(--color-foreground-primary);text-align:start;-webkit-user-select:none;user-select:none}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.menu-item.sc-ds-menu:has(.menu-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-secondary)}.menu-item__toggle.sc-ds-menu{position:relative;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const v=8;const p=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsSelect=s(this,"dsSelect");this.dsGradientSelect=s(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=c.space050;this.alignOffset=0;this.initialFocusVisible=false;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(i){if(i){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return u(l.space050,l.space050)}get sideOffsetPx(){return u(this.sideOffset,l.space050)}get alignOffsetPx(){return u(this.alignOffset,0)}get popupFallbackWidthPx(){return u(l.menuWidthXs,l.menuWidthXs)}get popupFallbackHeightPx(){return u(l.menuFallbackHeight,l.menuFallbackHeight)}get closeAnimationMs(){return h(l.motionShort2,l.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((i=>f(i)?[]:i.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(i){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let e=v;const s=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;i?.();return}if(e>0){e-=1;this.positionRetryRaf=requestAnimationFrame(s)}};this.positionRetryRaf=requestAnimationFrame(s)}calculatePosition(){const i=this.resolvedAnchor;if(!i)return false;const e=this.el.querySelector(".menu-popup");if(!e)return false;this.pos=m({anchorRect:i.getBoundingClientRect(),popupWidth:e.offsetWidth||this.popupFallbackWidthPx,popupHeight:e.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const i=this.flatItems;const e=i.findIndex((i=>i.isSelected&&!i.isInactive));const s=i.findIndex((i=>!i.isInactive));this.focusedIndex=e>=0?e:s>=0?s:0;requestAnimationFrame((()=>{const i=this.el.querySelectorAll(".menu-item");i[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=i=>{const e=i.target;const s=this.el.querySelector(".menu-popup");const n=this.resolvedAnchor;if(s?.contains(e)||n?.contains(e))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(i){if(!this.shouldRender||this.closing)return;const e=this.flatItems;const s=e.map(((i,e)=>({it:i,i:e}))).filter((({it:i})=>!i.isInactive)).map((({i})=>i));if(!s.length)return;const n=s.indexOf(this.focusedIndex);const t=n<0?0:n;switch(i.key){case"ArrowDown":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(t+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(t-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break;case"Escape":i.preventDefault();this.close();break;case"Tab":i.preventDefault();this.close();break}}focusItem(i){const e=this.el.querySelectorAll(".menu-item");e[i]?.focus()}handleItemClick(i){if(i.isInactive)return;this.dsSelect.emit(i)}handleGradientSelect(i){this.dsGradientSelect.emit(i)}render(){if(!this.shouldRender)return n(t,{style:{display:"contents"}});const i=this.activeSections;let e=0;const s={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)s["width"]=this.menuWidth;if(this.minWidth)s["min-width"]=this.minWidth;return n(t,{style:{display:"contents"}},n("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:s,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},i.map(((s,t)=>n("div",{key:t,class:{"menu-section":true,"menu-section--divided":t<i.length-1,"menu-section--gradient-picker":f(s)},role:s.header?"group":undefined,"aria-label":s.header},s.header&&n("ds-text",{class:"section-header ds-control--md",as:"span",variant:"text-body-small",emphasis:true,color:"inherit","aria-hidden":"true"},s.header),f(s)?n("ds-shell-gradient-picker",{value:s.value,onDsChange:i=>{i.stopPropagation();this.handleGradientSelect(i.detail)}}):s.items.map((i=>{const s=e++;const t=this.focusedIndex===s;return n("button",{key:s,type:"button",class:{"menu-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":t&&this.focusRingVisible,"ds-interaction-fill":!i.isInactive,"ds-interaction-fill--selected":!!i.isSelected&&!i.isInactive,"menu-item--selected":!!i.isSelected,"ds-control-inactive":!!i.isInactive,"menu-item--destructive":!!i.isDestructive,"menu-item--focused":t},role:"menuitem","aria-current":i.isSelected?"true":undefined,disabled:i.isInactive,tabIndex:t?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(i),onFocus:()=>{this.focusedIndex=s}},n("div",{class:"menu-item__content ds-interaction-fill__content"},n("ds-text",{class:"menu-item__label",as:"span",variant:"text-body-medium",emphasis:!!i.isSelected,color:"inherit"},i.label),i.subtext&&n("ds-text",{class:"menu-item__subtext",as:"span",variant:"text-body-small",color:"inherit"},i.subtext)),i.showToggle&&n("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!i.toggleValue,"ds-interaction-fill__content":true},"aria-hidden":"true"},n("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return g()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const i=["ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-text"];i.forEach((i=>{switch(i){case"ds-menu":if(!customElements.get(o(i))){customElements.define(o(i),p)}break;case"ds-shell-gradient-picker":if(!customElements.get(o(i))){r()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(i))){a()}break;case"ds-text":if(!customElements.get(o(i))){d()}break}}))}b();export{p as M,b as d};
|
|
2
|
-
//# sourceMappingURL=p-B_ENgncs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["computeMenuPosition","input","anchorRect","a","popupWidth","pw","popupHeight","ph","side","align","sideOffsetPx","alignOffsetPx","viewportPadPx","vpPad","viewportWidth","viewportHeight","x","y","top","left","right","width","bottom","height","Math","min","max","isMenuGradientPickerSection","section","variant","menuCss","POSITION_RETRY_BUDGET","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","shouldRender","closing","pos","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","positionRetryRaf","listenersReady","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","setTimeout","closeAnimationMs","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","popupFallbackWidthPx","menuWidthXs","popupFallbackHeightPx","menuFallbackHeight","resolveCssTimeMs","motionShort2","animationDurationShort3","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","cancelAnimationFrame","onReady","remaining","attempt","calculatePosition","requestAnimationFrame","anchorEl","popup","el","querySelector","getBoundingClientRect","offsetWidth","offsetHeight","window","innerWidth","innerHeight","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","querySelectorAll","focus","e","t","target","contains","close","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleKeyDown","enabled","map","i","filter","cur","indexOf","safe","key","preventDefault","stopPropagation","focusItem","idx","handleItemClick","item","dsSelect","handleGradientSelect","preset","dsGradientSelect","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","si","header","undefined","as","emphasis","color","value","onDsChange","detail","isFocused","type","isDestructive","disabled","tabIndex","onMouseDown","onClick","onFocus","label","subtext","showToggle","toggleValue"],"sources":["src/wc/components/Menu/menu-position.ts","src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["export type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuPositionInput {\n anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;\n popupWidth: number;\n popupHeight: number;\n side: MenuSide;\n align: MenuAlign;\n sideOffsetPx: number;\n alignOffsetPx: number;\n viewportPadPx: number;\n viewportWidth: number;\n viewportHeight: number;\n}\n\n/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */\nexport function computeMenuPosition(input: MenuPositionInput): { x: number; y: number } {\n const {\n anchorRect: a,\n popupWidth: pw,\n popupHeight: ph,\n side,\n align,\n sideOffsetPx,\n alignOffsetPx,\n viewportPadPx: vpPad,\n viewportWidth,\n viewportHeight,\n } = input;\n\n let x = 0;\n let y = 0;\n\n switch (side) {\n case 'top':\n y = a.top - ph - sideOffsetPx;\n x =\n align === 'start'\n ? a.left + alignOffsetPx\n : align === 'end'\n ? a.right - pw + alignOffsetPx\n : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n break;\n case 'bottom':\n y = a.bottom + sideOffsetPx;\n x =\n align === 'start'\n ? a.left + alignOffsetPx\n : align === 'end'\n ? a.right - pw + alignOffsetPx\n : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n break;\n case 'left':\n x = a.left - pw - sideOffsetPx;\n y =\n align === 'start'\n ? a.top + alignOffsetPx\n : align === 'end'\n ? a.bottom - ph + alignOffsetPx\n : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n break;\n case 'right':\n x = a.right + sideOffsetPx;\n y =\n align === 'start'\n ? a.top + alignOffsetPx\n : align === 'end'\n ? a.bottom - ph + alignOffsetPx\n : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n break;\n }\n\n return {\n x: Math.min(Math.max(x, vpPad), viewportWidth - pw - vpPad),\n y: Math.min(Math.max(y, vpPad), viewportHeight - ph - vpPad),\n };\n}\n","import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n PANEL_NAV_USER_MENU_PLACEMENT,\n type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n label: string;\n value?: string;\n subtext?: string;\n isSelected?: boolean;\n isInactive?: boolean;\n isDestructive?: boolean;\n showToggle?: boolean;\n toggleValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n header?: string;\n items: MenuItemData[];\n}\n\nexport interface MenuGradientPickerSection {\n header?: string;\n variant: 'gradient-picker';\n value: ShellGradientPreset;\n}\n\nexport type MenuSection = MenuItemsSection | MenuGradientPickerSection;\n\nexport function isMenuGradientPickerSection(\n section: MenuSection,\n): section is MenuGradientPickerSection {\n return 'variant' in section && section.variant === 'gradient-picker';\n}\n\nexport type { ShellGradientPreset };\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n\n/* ── Popup shell ─────────────────────────────────────────────────────────── */\n\n.menu-popup {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: var(--dimension-menu-width-xs);\n max-width: var(--dimension-panel-width-lg);\n overflow: hidden;\n background-color: var(--color-background-primary);\n border-radius: var(--dimension-radius-075);\n /* Split elevation: shadow on shell, inset highlight on ::after (combined token clips with overflow:hidden). */\n box-shadow: var(--effect-shadow-elevated-floating);\n animation: menuFadeIn var(--effect-motion-short-2) forwards;\n backface-visibility: hidden;\n will-change: transform;\n /*\n * Neutralize the host `align` prop. Stencil reflects it as the legacy HTML\n * `align` attribute, which browsers map to `text-align` on ds-menu. Menu\n * items already force left; section headers / other content must not inherit\n * `end` once ds-text is the full-width layout box.\n */\n text-align: start;\n}\n\n.menu-popup::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: var(--effect-highlight-elevated-floating);\n}\n\n.menu-popup--closing {\n animation: menuFadeOut var(--effect-motion-short-2) forwards;\n}\n\n@keyframes menuFadeIn {\n from { opacity: 0; transform: inherit scale(0.97); }\n to { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n/* ── Sections ────────────────────────────────────────────────────────────── */\n\n.menu-section {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-050);\n}\n\n.menu-section--divided {\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\n.section-header {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n /* Same inset as menu-item padding-inline + menu-item__label inset. */\n padding: 0 calc(\n var(--ds-control-padding-inline, var(--dimension-space-075)) +\n var(--ds-control-label-inset, var(--dimension-space-025))\n );\n color: var(--color-foreground-primary);\n text-align: start;\n -webkit-user-select: none;\n user-select: none;\n}\n\n/* ── Items (md control-density + interaction-fill + inset focus) ─────────── */\n\n.menu-item {\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n width: 100%;\n height: var(--ds-control-height, var(--dimension-size-400));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n box-sizing: border-box;\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n background: transparent;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n text-align: left;\n color: inherit;\n /* Hover/press/selected: `.ds-interaction-fill` (+ `--selected`). */\n}\n\n/* Subtext rows grow past the density height. */\n.menu-item:has(.menu-item__subtext) {\n height: auto;\n min-height: var(--ds-control-height, var(--dimension-size-400));\n padding-block: var(--ds-control-padding-inline, var(--dimension-space-075));\n align-items: flex-start;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.menu-item--destructive .menu-item__label {\n color: var(--color-foreground-bold-negative) !important;\n}\n\n.menu-item__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--dimension-space-025);\n min-width: 0;\n}\n\n.menu-item__label {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-secondary);\n}\n\n.menu-item:has(.menu-item__subtext) .menu-item__label,\n.menu-item--selected .menu-item__label {\n color: var(--color-foreground-primary);\n}\n\n.menu-item__subtext {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-secondary);\n}\n\n/* ── Toggle suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__toggle {\n position: relative;\n flex-shrink: 0;\n width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n height: var(--dimension-size-250);\n border-radius: var(--dimension-radius-125);\n background-color: var(--color-background-translucent);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on {\n background-color: var(--color-background-medium-brand);\n}\n\n.menu-item__toggle-thumb {\n position: absolute;\n top: var(--dimension-space-025);\n left: var(--dimension-space-025);\n width: var(--dimension-size-200);\n height: var(--dimension-size-200);\n border-radius: 50%;\n background-color: var(--color-foreground-on-bold-background-primary);\n transition: transform var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on .menu-item__toggle-thumb {\n transform: translateX(var(--dimension-offset-200, 16px));\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\nimport { isMenuGradientPickerSection } from './menu-types';\nimport type { ShellGradientPreset } from '../../nav/shell-gradient-presets';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\n\n@Component({\n tag: 'ds-menu',\n styleUrl: 'Menu.css',\n scoped: true,\n})\nexport class Menu {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() items: MenuItemData[] = [];\n @Prop() sections: MenuSection[] = [];\n @Prop() side: MenuSide = 'bottom';\n @Prop() align: MenuAlign = 'start';\n /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n @Prop() menuWidth: string | undefined;\n @Prop() minWidth: string | undefined;\n /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n @Prop() anchor: HTMLElement | undefined;\n /** ID of the external trigger element for positioning */\n @Prop() anchorId: string | undefined;\n /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n @Prop() initialFocusVisible: boolean = false;\n\n @State() private shouldRender: boolean = false;\n @State() private closing: boolean = false;\n @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n @State() private focusedIndex: number = 0;\n @State() private positionReady: boolean = false;\n @State() private focusRingVisible: boolean = false;\n\n @Event() dsClose!: EventEmitter<void>;\n @Event() dsSelect!: EventEmitter<MenuItemData>;\n /** Emitted when a `gradient-picker` section swatch is chosen. */\n @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;\n\n private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n private scrollResizeHandler: (() => void) | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private itemEls: HTMLElement[] = [];\n private positionRetryRaf: number | null = null;\n private listenersReady = false;\n\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.cancelPositionRetry();\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.teardownListeners();\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.listenersReady = false;\n this.focusRingVisible = this.initialFocusVisible;\n this.listenersReady = true;\n this.setupListeners();\n this.schedulePositionUpdate(() => {\n this.focusInitialItem();\n });\n } else if (this.shouldRender) {\n this.cancelPositionRetry();\n this.closing = true;\n this.teardownListeners();\n this.listenersReady = false;\n this.closeTimer = setTimeout(() => {\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n }, this.closeAnimationMs);\n }\n }\n\n @Watch('anchor')\n @Watch('anchorId')\n onAnchorChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n onPositionPropsChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get popupFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeightPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get closeAnimationMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get resolvedAnchor(): HTMLElement | null {\n if (this.anchor) return this.anchor;\n if (this.anchorId) return document.getElementById(this.anchorId);\n return null;\n }\n\n private get activeSections(): MenuSection[] {\n if (this.sections.length > 0) return this.sections;\n if (this.items.length > 0) return [{ items: this.items }];\n return [];\n }\n\n private get flatItems(): MenuItemData[] {\n return this.activeSections.flatMap(section =>\n isMenuGradientPickerSection(section) ? [] : section.items,\n );\n }\n\n private cancelPositionRetry() {\n if (this.positionRetryRaf !== null) {\n cancelAnimationFrame(this.positionRetryRaf);\n this.positionRetryRaf = null;\n }\n }\n\n /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n private schedulePositionUpdate(onReady?: () => void) {\n if (!this.open) return;\n\n this.cancelPositionRetry();\n this.positionReady = false;\n\n let remaining = POSITION_RETRY_BUDGET;\n\n const attempt = () => {\n this.positionRetryRaf = null;\n if (!this.open) return;\n\n if (this.calculatePosition()) {\n this.positionReady = true;\n onReady?.();\n return;\n }\n\n if (remaining > 0) {\n remaining -= 1;\n this.positionRetryRaf = requestAnimationFrame(attempt);\n }\n };\n\n this.positionRetryRaf = requestAnimationFrame(attempt);\n }\n\n /** @returns `true` when anchor and popup were found and `pos` was updated. */\n private calculatePosition(): boolean {\n const anchorEl = this.resolvedAnchor;\n if (!anchorEl) return false;\n const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n if (!popup) return false;\n\n this.pos = computeMenuPosition({\n anchorRect: anchorEl.getBoundingClientRect(),\n popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: this.alignOffsetPx,\n viewportPadPx: this.viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n return true;\n }\n\n /** Focus the selected item when present, otherwise the first enabled item. */\n private focusInitialItem() {\n const flat = this.flatItems;\n const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n this.focusedIndex = selectedIdx >= 0\n ? selectedIdx\n : (firstEnabledIdx >= 0 ? firstEnabledIdx : 0);\n\n requestAnimationFrame(() => {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[this.focusedIndex]?.focus();\n });\n }\n\n private setupListeners() {\n this.clickOutsideHandler = (e: MouseEvent) => {\n const t = e.target as Node;\n const popup = this.el.querySelector('.menu-popup');\n const anchorEl = this.resolvedAnchor;\n if (popup?.contains(t) || anchorEl?.contains(t)) return;\n this.close();\n };\n\n this.scrollResizeHandler = () => {\n if (this.shouldRender && !this.closing) this.calculatePosition();\n };\n\n document.addEventListener('mousedown', this.clickOutsideHandler, true);\n window.addEventListener('scroll', this.scrollResizeHandler, true);\n window.addEventListener('resize', this.scrollResizeHandler);\n }\n\n private teardownListeners() {\n if (this.clickOutsideHandler) {\n document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n this.clickOutsideHandler = null;\n }\n if (this.scrollResizeHandler) {\n window.removeEventListener('scroll', this.scrollResizeHandler, true);\n window.removeEventListener('resize', this.scrollResizeHandler);\n this.scrollResizeHandler = null;\n }\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private close() {\n this.resolvedAnchor?.focus();\n this.dsClose.emit();\n this.open = false;\n this.onOpenChange(false);\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n const flat = this.flatItems;\n const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n if (!enabled.length) return;\n\n const cur = enabled.indexOf(this.focusedIndex);\n const safe = cur < 0 ? 0 : cur;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe + 1) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'ArrowUp':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'Home':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[0];\n this.focusItem(this.focusedIndex);\n break;\n case 'End':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[enabled.length - 1];\n this.focusItem(this.focusedIndex);\n break;\n case 'Escape':\n e.preventDefault();\n this.close();\n break;\n case 'Tab':\n e.preventDefault();\n this.close();\n break;\n }\n }\n\n private focusItem(idx: number) {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[idx]?.focus();\n }\n\n private handleItemClick(item: MenuItemData) {\n if (item.isInactive) return;\n this.dsSelect.emit(item);\n }\n\n private handleGradientSelect(preset: ShellGradientPreset) {\n this.dsGradientSelect.emit(preset);\n }\n\n render() {\n if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n const sections = this.activeSections;\n let flatIdx = 0;\n\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n style={popupStyle}\n role=\"menu\"\n aria-label=\"Menu\"\n aria-orientation=\"vertical\"\n >\n {sections.map((section, si) => (\n <div\n key={si}\n class={{\n 'menu-section': true,\n 'menu-section--divided': si < sections.length - 1,\n 'menu-section--gradient-picker': isMenuGradientPickerSection(section),\n }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <ds-text\n class=\"section-header ds-control--md\"\n as=\"span\"\n variant=\"text-body-small\"\n emphasis\n color=\"inherit\"\n aria-hidden=\"true\"\n >\n {section.header}\n </ds-text>\n )}\n {isMenuGradientPickerSection(section) ? (\n <ds-shell-gradient-picker\n value={section.value}\n onDsChange={(e: CustomEvent<ShellGradientPreset>) => {\n e.stopPropagation();\n this.handleGradientSelect(e.detail);\n }}\n />\n ) : (\n section.items.map(item => {\n const idx = flatIdx++;\n const isFocused = this.focusedIndex === idx;\n return (\n <button\n key={idx}\n type=\"button\"\n class={{\n 'menu-item': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n 'ds-interaction-fill': !item.isInactive,\n 'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n 'menu-item--selected': !!item.isSelected,\n 'ds-control-inactive': !!item.isInactive,\n 'menu-item--destructive': !!item.isDestructive,\n 'menu-item--focused': isFocused,\n }}\n role=\"menuitem\"\n aria-current={item.isSelected ? 'true' : undefined}\n disabled={item.isInactive}\n tabIndex={isFocused ? 0 : -1}\n onMouseDown={() => { this.focusRingVisible = false; }}\n onClick={() => this.handleItemClick(item)}\n onFocus={() => { this.focusedIndex = idx; }}\n >\n <div class=\"menu-item__content ds-interaction-fill__content\">\n <ds-text\n class=\"menu-item__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis={!!item.isSelected}\n color=\"inherit\"\n >\n {item.label}\n </ds-text>\n {item.subtext && (\n <ds-text class=\"menu-item__subtext\" as=\"span\" variant=\"text-body-small\" color=\"inherit\">\n {item.subtext}\n </ds-text>\n )}\n </div>\n {item.showToggle && (\n <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue, 'ds-interaction-fill__content': true }} aria-hidden=\"true\">\n <div class=\"menu-item__toggle-thumb\" />\n </div>\n )}\n </button>\n );\n }))}\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as d,H as r,h as e,a,t as s}from"./index.js";import{d as i}from"./p-sBx2MuF2.js";const c=()=>`.sc-ds-card-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-width);min-height:var(--_card-min-height);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card--editing.sc-ds-card-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card__header.sc-ds-card{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);flex-shrink:0;padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card--editing.sc-ds-card-h .card__header.sc-ds-card{background-color:transparent;border-bottom-color:transparent}.card__title-wrap.sc-ds-card{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card__title.sc-ds-card{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card__actions.sc-ds-card{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card__actions.sc-ds-card:empty{display:none}.card__body.sc-ds-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card--editing.sc-ds-card-h .card__body.sc-ds-card{border-radius:var(--dimension-radius-025)}`;const o={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const t="var(--color-foreground-faint-brand)";const l=d(class d extends r{constructor(d){super();if(d!==false){this.__registerHost()}this.cardWidth="md";this.appearance="default"}render(){const d=this.appearance==="editing";return e(a,{key:"c0a1a2eed24f2fae229f75d8b27527ae0c5b832f",class:{card:true,"card--editing":d},style:{"--_card-width":o[this.cardWidth],"--_card-min-height":n[this.cardWidth]}},e("header",{key:"120832c3d2391a079bbe2cd034c339d7778ef98f",class:"card__header"},e("ds-text",{key:"785bd92794a058059e8e5898883a6586cafe758e",class:"card__title-wrap card__title",variant:"text-title-small",emphasis:true,color:d?t:"primary",as:"h2"},this.heading),e("div",{key:"c40e8dd128b15012ece3c087bc301b79af904a7d",class:"card__actions"},e("slot",{key:"b0862fb711231bdef2f960410be623491aa2e890",name:"actions"}))),e("div",{key:"9e76d772ec7c5032bddf153a7e903b5d807a6fac",class:"card__body"},e("slot",{key:"55eb08dd646b4c80f42dd6997c83a4c8efe5417b"})))}static get style(){return c()}},[262,"ds-card",{heading:[1],cardWidth:[1,"card-width"],appearance:[1]}]);function b(){if(typeof customElements==="undefined"){return}const d=["ds-card","ds-text"];d.forEach((d=>{switch(d){case"ds-card":if(!customElements.get(s(d))){customElements.define(s(d),l)}break;case"ds-text":if(!customElements.get(s(d))){i()}break}}))}b();export{l as C,b as d};
|
|
2
|
-
//# sourceMappingURL=p-CQmul5NK.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["cardCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","FAINT_BRAND_TITLE_COLOR","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","appearance","render","editing","h","Host","key","class","card","style","variant","emphasis","color","as","heading","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n width: var(--_card-width);\n min-height: var(--_card-min-height);\n max-width: 100%;\n border: none;\n border-radius: var(--dimension-radius-025);\n background-color: var(--color-background-primary);\n box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n overflow: hidden;\n}\n\n:host(.card--editing) {\n background-color: var(--color-background-bold-brand);\n box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n height: var(--dimension-size-600);\n flex-shrink: 0;\n padding: var(--dimension-space-100);\n background-color: var(--color-background-secondary);\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n box-sizing: border-box;\n}\n\n:host(.card--editing) .card__header {\n background-color: transparent;\n border-bottom-color: transparent;\n}\n\n.card__title-wrap {\n flex: 1 1 auto;\n min-width: 0;\n display: flex;\n align-items: center;\n padding: var(--dimension-space-075);\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.card__title {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n padding: var(--dimension-space-025);\n}\n\n.card__actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: var(--dimension-space-100);\n}\n\n.card__actions:empty {\n display: none;\n}\n\n.card__body {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n background-color: var(--color-background-primary);\n box-sizing: border-box;\n}\n\n:host(.card--editing) .card__body {\n border-radius: var(--dimension-radius-025);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type CardWidth = 'sm' | 'md' | 'lg';\n\n/** Visual chrome recipe — default app surface, or settings edit wash. */\nexport type CardAppearance = 'default' | 'editing';\n\nconst CARD_WIDTH_VARS: Record<CardWidth, string> = {\n sm: 'var(--dimension-card-width-sm)',\n md: 'var(--dimension-card-width-md)',\n lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardWidth, string> = {\n sm: 'var(--dimension-card-height-sm)',\n md: 'var(--dimension-card-height-md)',\n lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n/**\n * Shared card chrome — width + matching min-height tokens, header (title + actions),\n * and a flex body that fills leftover space. Compose this from settings / data-viz cards.\n */\n@Component({\n tag: 'ds-card',\n styleUrl: 'Card.css',\n scoped: true,\n})\nexport class Card {\n /** Section heading shown in the card header. */\n @Prop() heading!: string;\n\n /**\n * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n * matching `--dimension-card-height-*` so empty bodies still fill the card.\n */\n @Prop() cardWidth: CardWidth = 'md';\n\n /** Chrome recipe — `editing` applies the settings edit wash. */\n @Prop() appearance: CardAppearance = 'default';\n\n render() {\n const editing = this.appearance === 'editing';\n\n return (\n <Host\n class={{\n card: true,\n 'card--editing': editing,\n }}\n style={{\n '--_card-width': CARD_WIDTH_VARS[this.cardWidth],\n '--_card-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n }}\n >\n <header class=\"card__header\">\n <ds-text\n class=\"card__title-wrap card__title\"\n variant=\"text-title-small\"\n emphasis\n color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n as=\"h2\"\n >\n {this.heading}\n </ds-text>\n <div class=\"card__actions\">\n <slot name=\"actions\" />\n </div>\n </header>\n <div class=\"card__body\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"0FAAA,MAAMA,EAAU,IAAM,mtDCOtB,MAAMC,EAA6C,CACjDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAA8C,CAClDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mCAGN,MAAME,EAA0B,sC,MAWnBC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAaUC,KAAAC,UAAuB,KAGvBD,KAAAE,WAA6B,SAoCtC,CAlCC,MAAAC,GACE,MAAMC,EAAUJ,KAAKE,aAAe,UAEpC,OACEG,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,KAAM,KACN,gBAAiBL,GAEnBM,MAAO,CACL,gBAAiBrB,EAAgBW,KAAKC,WACtC,qBAAsBR,EAAiBO,KAAKC,aAG9CI,EAAA,UAAAE,IAAA,2CAAQC,MAAM,gBACZH,EAAA,WAAAE,IAAA,2CACEC,MAAM,+BACNG,QAAQ,mBACRC,SAAQ,KACRC,MAAOT,EAAUV,EAA0B,UAC3CoB,GAAG,MAEFd,KAAKe,SAERV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,cAGfX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as e,H as s,c as i,h as t,a as r,t as d}from"./index.js";import{d as a}from"./p-BSNlp8Di.js";import{D as n,S as l}from"./p-Bz3jyrDV.js";const c=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}.shell-gradient-picker.sc-ds-shell-gradient-picker{box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:var(--dimension-size-400);gap:var(--dimension-space-100);padding:var(--dimension-space-100)}.shell-gradient-picker__divider.sc-ds-shell-gradient-picker{flex:0 0 auto;align-self:center;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background-color:var(--color-border-tertiary)}`;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.value=n;this.handleSwatchSelect=e=>{if(e===this.value)return;this.value=e;this.dsChange.emit(e)}}renderSwatch(e){return t("ds-shell-gradient-swatch",{key:e,preset:e,selected:this.value===e,onDsSelect:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}})}render(){return t(r,{key:"3d1f1b9728dde421b9ed5ac02ff7bb646c680932"},t("div",{key:"6c3cf8af7e742d623ced76266410241947d5f2e6",class:"shell-gradient-picker",role:"radiogroup","aria-label":"Shell gradient theme"},this.renderSwatch("none"),t("div",{key:"748467c2897e58fa2db724879793b8b2015fd4e7",class:"shell-gradient-picker__divider","aria-hidden":"true"}),l.map((e=>this.renderSwatch(e)))))}static get style(){return c()}},[2,"ds-shell-gradient-picker",{value:[1537]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-shell-gradient-picker":if(!customElements.get(d(e))){customElements.define(d(e),h)}break;case"ds-shell-gradient-swatch":if(!customElements.get(d(e))){a()}break}}))}o();export{h as S,o as d};
|
|
2
|
-
//# sourceMappingURL=p-CsaW5gDM.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["shellGradientPickerCss","ShellGradientPicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","DEFAULT_SHELL_GRADIENT_PRESET","handleSwatchSelect","preset","dsChange","emit","renderSwatch","h","key","selected","onDsSelect","e","stopPropagation","detail","render","Host","class","role","SHELL_GRADIENT_WASH_PRESETS","map"],"sources":["src/wc/components/ShellGradientPicker/ShellGradientPicker.css?tag=ds-shell-gradient-picker&encapsulation=scoped","src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* One row — same width footprint as menu items; 24px orbs + divider inside. */\n.shell-gradient-picker {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n min-height: var(--dimension-size-400);\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-100);\n}\n\n.shell-gradient-picker__divider {\n flex: 0 0 auto;\n align-self: center;\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-size-300);\n background-color: var(--color-border-tertiary);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n SHELL_GRADIENT_WASH_PRESETS,\n DEFAULT_SHELL_GRADIENT_PRESET,\n type ShellGradientPreset,\n} from '../ShellGradientSwatch/shell-gradient-swatch-types';\n\n@Component({\n tag: 'ds-shell-gradient-picker',\n styleUrl: 'ShellGradientPicker.css',\n scoped: true,\n})\nexport class ShellGradientPicker {\n /** Active shell wash preset. */\n @Prop({ mutable: true, reflect: true }) value: ShellGradientPreset =\n DEFAULT_SHELL_GRADIENT_PRESET;\n\n @Event() dsChange!: EventEmitter<ShellGradientPreset>;\n\n private handleSwatchSelect = (preset: ShellGradientPreset) => {\n if (preset === this.value) return;\n this.value = preset;\n this.dsChange.emit(preset);\n };\n\n private renderSwatch(preset: ShellGradientPreset) {\n return (\n <ds-shell-gradient-swatch\n key={preset}\n preset={preset}\n selected={this.value === preset}\n onDsSelect={(e: CustomEvent<ShellGradientPreset>) => {\n e.stopPropagation();\n this.handleSwatchSelect(e.detail);\n }}\n />\n );\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"shell-gradient-picker\"\n role=\"radiogroup\"\n aria-label=\"Shell gradient theme\"\n >\n {this.renderSwatch('none')}\n <div class=\"shell-gradient-picker__divider\" aria-hidden=\"true\" />\n {SHELL_GRADIENT_WASH_PRESETS.map(preset => this.renderSwatch(preset))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iJAAA,MAAMA,EAAyB,IAAM,ye,MCYxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO0CC,KAAAC,MACtCC,EAIMF,KAAAG,mBAAsBC,IAC5B,GAAIA,IAAWJ,KAAKC,MAAO,OAC3BD,KAAKC,MAAQG,EACbJ,KAAKK,SAASC,KAAKF,EAAO,CAgC7B,CA7BS,YAAAG,CAAaH,GACnB,OACEI,EAAA,4BACEC,IAAKL,EACLA,OAAQA,EACRM,SAAUV,KAAKC,QAAUG,EACzBO,WAAaC,IACXA,EAAEC,kBACFb,KAAKG,mBAAmBS,EAAEE,OAAO,G,CAMzC,MAAAC,GACE,OACEP,EAACQ,EAAI,CAAAP,IAAA,4CACHD,EAAA,OAAAC,IAAA,2CACEQ,MAAM,wBACNC,KAAK,aAAY,aACN,wBAEVlB,KAAKO,aAAa,QACnBC,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,iCAAgC,cAAa,SACvDE,EAA4BC,KAAIhB,GAAUJ,KAAKO,aAAaH,M","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
const t=[{threshold:1e9,suffix:"b"},{threshold:1e6,suffix:"m"},{threshold:1e3,suffix:"k"}];function e(e){const n=e<0?"-":"";const r=Math.abs(e);if(r<1e3)return String(e);for(let e=0;e<t.length;e++){const f=t[e];if(r<f.threshold)continue;let o=Math.round(r/f.threshold*10)/10;if(o>=1e3&&e>0){const f=t[e-1];o=Math.round(r/f.threshold*10)/10;return`${n}${o}${f.suffix}`}return`${n}${o}${f.suffix}`}return String(e)}export{e as f};
|
|
2
|
-
//# sourceMappingURL=p-DEpLlQZK.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["COMPACT_UNITS","threshold","suffix","formatCompactNumber","value","sign","abs","Math","String","i","length","unit","scaled","round","next"],"sources":["src/wc/utils/format-compact-number.ts"],"sourcesContent":["const COMPACT_UNITS: { threshold: number; suffix: string }[] = [\n { threshold: 1_000_000_000, suffix: 'b' },\n { threshold: 1_000_000, suffix: 'm' },\n { threshold: 1_000, suffix: 'k' },\n];\n\n/** Compact large numbers for display: 1000 -> \"1k\", 1500 -> \"1.5k\", 110100 -> \"110.1k\", 1000000 -> \"1m\". */\nexport function formatCompactNumber(value: number): string {\n const sign = value < 0 ? '-' : '';\n const abs = Math.abs(value);\n if (abs < 1000) return String(value);\n\n for (let i = 0; i < COMPACT_UNITS.length; i++) {\n const unit = COMPACT_UNITS[i];\n if (abs < unit.threshold) continue;\n\n let scaled = Math.round((abs / unit.threshold) * 10) / 10;\n // Carry over, e.g. 999.96k rounds to \"1000k\" — bump to the next unit instead.\n if (scaled >= 1000 && i > 0) {\n const next = COMPACT_UNITS[i - 1];\n scaled = Math.round((abs / next.threshold) * 10) / 10;\n return `${sign}${scaled}${next.suffix}`;\n }\n return `${sign}${scaled}${unit.suffix}`;\n }\n return String(value);\n}\n"],"mappings":"AAAA,MAAMA,EAAyD,CAC7D,CAAEC,UAAW,IAAeC,OAAQ,KACpC,CAAED,UAAW,IAAWC,OAAQ,KAChC,CAAED,UAAW,IAAOC,OAAQ,MAIxB,SAAUC,EAAoBC,GAClC,MAAMC,EAAOD,EAAQ,EAAI,IAAM,GAC/B,MAAME,EAAMC,KAAKD,IAAIF,GACrB,GAAIE,EAAM,IAAM,OAAOE,OAAOJ,GAE9B,IAAK,IAAIK,EAAI,EAAGA,EAAIT,EAAcU,OAAQD,IAAK,CAC7C,MAAME,EAAOX,EAAcS,GAC3B,GAAIH,EAAMK,EAAKV,UAAW,SAE1B,IAAIW,EAASL,KAAKM,MAAOP,EAAMK,EAAKV,UAAa,IAAM,GAEvD,GAAIW,GAAU,KAAQH,EAAI,EAAG,CAC3B,MAAMK,EAAOd,EAAcS,EAAI,GAC/BG,EAASL,KAAKM,MAAOP,EAAMQ,EAAKb,UAAa,IAAM,GACnD,MAAO,GAAGI,IAAOO,IAASE,EAAKZ,Q,CAEjC,MAAO,GAAGG,IAAOO,IAASD,EAAKT,Q,CAEjC,OAAOM,OAAOJ,EAChB,Q","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{d as e}from"./p-sBx2MuF2.js";import{T as r,a}from"./p-8WTsyLQ9.js";import{r as h}from"./p-BWUTr_XN.js";import{r as d}from"./p-C1cBr-Ri.js";import{C as l}from"./p-Cx-ywr1e.js";const c=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-label.sc-ds-tooltip{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.key-hint.sc-ds-tooltip{width:var(--ds-control-icon, var(--dimension-size-200));height:var(--ds-control-icon, var(--dimension-size-200));flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const p={md:a.size400,sm:a.size300,xs:a.size200};let u=0;let m=0;let f=null;function g(t){const i=document.createElement("ds-text");if(t.className)i.className=t.className;i.as="span";i.variant=t.variant;i.emphasis=t.emphasis??false;i.color=t.color??"inherit";i.textContent=t.text;return i}const v=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=r.space050;this.alignOffset=0;this.delay=a.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++m}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.skipEnterAnimation=false;this.isOpen=false;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()}}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){if(f===this)f=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.calculatePosition()}get viewportPadPx(){return h(a.space050,a.space050)}get sideOffsetPx(){return h(this.sideOffset,a.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get hoverDelayMs(){return d(this.delay,a.animationDelayMedium3)}get instantReopenMs(){return d(a.animationDurationMedium1,a.animationDurationMedium1)}get fadeOutMs(){return d(a.motionShort3,a.animationDurationShort3)}get tooltipFallbackWidthPx(){return h(a.tooltipFallbackWidth,a.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=p[this.size];return h(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s)return;this.anchor=s;s.setAttribute("aria-describedby",this.tooltipId);s.addEventListener("mouseenter",this.mouseEnterHandler);s.addEventListener("mouseleave",this.mouseLeaveHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}destroyPopup(){if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}hideInstant(){this.clearTimers();u=Date.now();if(f===this)f=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-u<this.instantReopenMs;if(f&&f!==this){f.hideInstant();t=true}f=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;u=Date.now();if(f===this)f=null;if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.calculatePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=l[this.size];const i=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const s="sc-ds-tooltip";const o=document.createElement("div");o.className=`tooltip-inner ${i} ${s}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const i=document.createElement("div");i.className=`key-hint ${s}`;i.setAttribute("aria-hidden","true");i.appendChild(g({variant:"text-caption",emphasis:true,text:this.shortcutKey}));o.appendChild(i)};n("start");o.appendChild(g({className:`tooltip-label ${s}`,variant:t,text:this.label}));n("end");this.popupEl.replaceChildren(o)}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth||this.tooltipFallbackWidthPx;const o=t.offsetHeight||this.tooltipFallbackHeightPx;const n=this.sideOffsetPx;const e=this.alignOffsetPx;const r=this.viewportPadPx;let a=0,h=0;switch(this.side){case"top":h=i.top-o-n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"bottom":h=i.bottom+n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"left":a=i.left-s-n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break;case"right":a=i.right+n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break}const d=Math.min(Math.max(a,r),window.innerWidth-s-r);const l=Math.min(Math.max(h,r),window.innerHeight-o-r);t.style.transform=`translate(${Math.round(d)}px, ${Math.round(l)}px)`}render(){return s(o,{key:"725a5d601989eebc24cacb145a8d329259e5a28a",style:{display:"contents"}},s("slot",{key:"13bbc251c68525b01845d7a8a246c751b1bbb87b"}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return c()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),v)}break;case"ds-text":if(!customElements.get(n(t))){e()}break}}))}b();export{v as T,b as d};
|
|
2
|
-
//# sourceMappingURL=p-DRqJ3RUb.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["tooltipCss","FALLBACK_HEIGHT","md","TOKEN_DEFAULTS","size400","sm","size300","xs","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","createDsText","opts","el","document","createElement","className","as","variant","emphasis","color","textContent","text","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","skipEnterAnimation","isOpen","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","e","next","relatedTarget","contains","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","destroyPopup","onContentOrPositionChange","label","trim","hideInstant","renderPopupContent","calculatePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slot","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","remove","Date","now","instant","mountPopup","setTimeout","classList","add","tip","id","Object","assign","style","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","CONTROL_TEXT_VARIANT","density","sc","inner","appendShortcut","shortcutKey","hint","replaceChildren","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","vpPad","x","y","right","width","bottom","height","nextX","Math","min","max","window","innerWidth","nextY","innerHeight","transform","round","render","h","Host","key","display"],"sources":["src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n.tooltip-popup {\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n animation: none;\n opacity: 1;\n}\n\n.tooltip-popup--closing {\n animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/* ds-text itself is the token-height flex item; the row centers it directly. */\n.tooltip-label {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n.key-hint {\n width: var(--ds-control-icon, var(--dimension-size-200));\n height: var(--ds-control-icon, var(--dimension-size-200));\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n border-bottom-width: var(--dimension-stroke-width-025);\n border-radius: var(--dimension-radius-025);\n color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n CONTROL_TEXT_VARIANT,\n resolveCssLengthPx,\n resolveCssTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n md: TOKEN_DEFAULTS.size400,\n sm: TOKEN_DEFAULTS.size300,\n xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n as: string;\n variant: TextVariant;\n emphasis: boolean;\n color: string;\n};\n\nfunction createDsText(opts: {\n variant: TextVariant;\n emphasis?: boolean;\n color?: string;\n className?: string;\n text: string;\n}): DsTextEl {\n const el = document.createElement('ds-text') as DsTextEl;\n if (opts.className) el.className = opts.className;\n el.as = 'span';\n el.variant = opts.variant;\n el.emphasis = opts.emphasis ?? false;\n el.color = opts.color ?? 'inherit';\n el.textContent = opts.text;\n return el;\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n tag: 'ds-tooltip',\n styleUrl: 'Tooltip.css',\n scoped: true,\n})\nexport class Tooltip {\n @Element() el!: HTMLElement;\n\n /**\n * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n */\n @Prop() label!: string;\n\n /** Control density (height, padding, type). */\n @Prop() size: TooltipSize = 'md';\n\n @Prop() side: TooltipSide = 'top';\n @Prop() align: TooltipAlign = 'center';\n /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n /**\n * Hover show delay before the tooltip appears.\n * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n * initial hover/focus show only — after a recent dismiss, reopen is instant.\n * Prefer the default; override only for denser chrome or rare/destructive actions.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n @Prop() shortcutKey: string | undefined;\n @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private anchor: HTMLElement | null = null;\n private popupEl: HTMLElement | null = null;\n private skipEnterAnimation = false;\n private isOpen = false;\n private mouseEnterHandler: () => void = () => this.show();\n private mouseLeaveHandler: () => void = () => this.hide();\n /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n private focusHandler: () => void = () => this.show();\n private blurHandler: (e: FocusEvent) => void = (e) => {\n const next = e.relatedTarget as Node | null;\n if (next && this.anchor?.contains(next)) return;\n this.hide();\n };\n\n componentDidLoad() {\n this.bindAnchor();\n }\n\n disconnectedCallback() {\n if (activeTooltip === this) activeTooltip = null;\n this.unbindAnchor();\n this.clearTimers();\n this.destroyPopup();\n }\n\n @Watch('label')\n @Watch('size')\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n @Watch('shortcutKey')\n @Watch('shortcutKeyPosition')\n onContentOrPositionChange() {\n if (!this.label?.trim()) {\n if (this.isOpen || this.popupEl) this.hideInstant();\n return;\n }\n if (!this.popupEl || !this.isOpen) return;\n this.renderPopupContent();\n this.calculatePosition();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get hoverDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n }\n\n private get instantReopenMs(): number {\n return resolveCssTimeMs(\n TOKEN_DEFAULTS.animationDurationMedium1,\n TOKEN_DEFAULTS.animationDurationMedium1,\n );\n }\n\n private get fadeOutMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get tooltipFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n }\n\n private get tooltipFallbackHeightPx(): number {\n const token = FALLBACK_HEIGHT[this.size];\n return resolveCssLengthPx(token, token);\n }\n\n private bindAnchor() {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const slotted = slot?.assignedElements?.() ?? [];\n const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (!child) return;\n this.anchor = child;\n child.setAttribute('aria-describedby', this.tooltipId);\n child.addEventListener('mouseenter', this.mouseEnterHandler);\n child.addEventListener('mouseleave', this.mouseLeaveHandler);\n child.addEventListener('focusin', this.focusHandler);\n child.addEventListener('focusout', this.blurHandler);\n }\n\n private unbindAnchor() {\n if (!this.anchor) return;\n this.anchor.removeAttribute('aria-describedby');\n this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);\n this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);\n this.anchor.removeEventListener('focusin', this.focusHandler);\n this.anchor.removeEventListener('focusout', this.blurHandler);\n this.anchor = null;\n }\n\n private clearTimers() {\n if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private destroyPopup() {\n if (!this.popupEl) return;\n this.popupEl.remove();\n this.popupEl = null;\n }\n\n /** Drop the open tip immediately (warm handoff to another tooltip). */\n private hideInstant() {\n this.clearTimers();\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }\n\n private show() {\n // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n // but no tip should appear.\n if (!this.label?.trim()) return;\n this.clearTimers();\n let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n if (activeTooltip && activeTooltip !== this) {\n activeTooltip.hideInstant();\n instant = true;\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance\n activeTooltip = this;\n this.skipEnterAnimation = instant;\n if (instant) {\n this.mountPopup();\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n if (!this.label?.trim()) return;\n this.mountPopup();\n }, this.hoverDelayMs);\n }\n\n private hide() {\n this.clearTimers();\n if (!this.popupEl && !this.isOpen) return;\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n if (!this.popupEl) {\n this.isOpen = false;\n return;\n }\n this.popupEl.classList.remove('tooltip-popup--instant');\n this.popupEl.classList.add('tooltip-popup--closing');\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }, this.fadeOutMs);\n }\n\n private mountPopup() {\n if (!this.popupEl) {\n const tip = document.createElement('div');\n tip.id = this.tooltipId;\n tip.setAttribute('role', 'tooltip');\n // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n tip.className = 'tooltip-popup sc-ds-tooltip';\n Object.assign(tip.style, {\n position: 'fixed',\n left: '0',\n top: '0',\n zIndex: 'var(--dimension-z-index-tooltip)',\n pointerEvents: 'none',\n });\n document.body.appendChild(tip);\n this.popupEl = tip;\n }\n\n this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n this.popupEl.classList.remove('tooltip-popup--closing');\n this.renderPopupContent();\n this.calculatePosition();\n this.isOpen = true;\n }\n\n private renderPopupContent() {\n if (!this.popupEl) return;\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const density =\n this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n const sc = 'sc-ds-tooltip';\n\n const inner = document.createElement('div');\n inner.className = `tooltip-inner ${density} ${sc}`;\n\n const appendShortcut = (position: 'start' | 'end') => {\n if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n const hint = document.createElement('div');\n hint.className = `key-hint ${sc}`;\n hint.setAttribute('aria-hidden', 'true');\n hint.appendChild(\n createDsText({ variant: 'text-caption', emphasis: true, text: this.shortcutKey }),\n );\n inner.appendChild(hint);\n };\n\n appendShortcut('start');\n\n inner.appendChild(\n createDsText({\n className: `tooltip-label ${sc}`,\n variant: textVariant,\n text: this.label,\n }),\n );\n\n appendShortcut('end');\n\n this.popupEl.replaceChildren(inner);\n }\n\n private calculatePosition() {\n if (!this.anchor || !this.popupEl) return;\n const tip = this.popupEl;\n const a = this.anchor.getBoundingClientRect();\n const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n const sideOffset = this.sideOffsetPx;\n const alignOffset = this.alignOffsetPx;\n const vpPad = this.viewportPadPx;\n let x = 0, y = 0;\n\n switch (this.side) {\n case 'top':\n y = a.top - th - sideOffset;\n x = this.align === 'start' ? a.left + alignOffset\n : this.align === 'end' ? a.right - tw + alignOffset\n : a.left + a.width / 2 - tw / 2 + alignOffset;\n break;\n case 'bottom':\n y = a.bottom + sideOffset;\n x = this.align === 'start' ? a.left + alignOffset\n : this.align === 'end' ? a.right - tw + alignOffset\n : a.left + a.width / 2 - tw / 2 + alignOffset;\n break;\n case 'left':\n x = a.left - tw - sideOffset;\n y = this.align === 'start' ? a.top + alignOffset\n : this.align === 'end' ? a.bottom - th + alignOffset\n : a.top + a.height / 2 - th / 2 + alignOffset;\n break;\n case 'right':\n x = a.right + sideOffset;\n y = this.align === 'start' ? a.top + alignOffset\n : this.align === 'end' ? a.bottom - th + alignOffset\n : a.top + a.height / 2 - th / 2 + alignOffset;\n break;\n }\n\n const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);\n const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);\n tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <slot />\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["tabGroupNavCss","TabGroupNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectionFollowsFocus","rovingEnabled","focusedTabId","selectableTabs","getSelectableTabs","componentWillLoad","syncFocusedTabId","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","el","contains","activeId","getAttribute","nextTab","querySelector","focus","preventScroll","blur","onTabsChange","some","tab","id","focusTab","btn","focusLastTab","last","reverse","find","isInactive","focusFirstTab","first","preferred","selectTab","options","dsChange","emit","getFocusedIndex","findIndex","findEnabledLinear","from","step","i","length","findEnabled","len","n","moveFocusToIndex","nextIdx","activateFocusedTab","e","key","item","preventDefault","handleKeyDown","currentIdx","t","isVertical","exit","candidate","lastEnabled","dsRovingExit","getBgClass","background","tabIndexForTab","render","bgClass","isNavigation","h","Host","class","role","ariaLabel","ariaLabelledby","map","index","isTabDivider","isSelected","type","panelId","disabled","tabIndex","onClick","onFocus","tab__label","dot","as","variant","emphasis","color","label"],"sources":["src/wc/components/TabGroupNav/TabGroupNav.css?tag=ds-tab-group-nav&encapsulation=scoped","src/wc/components/TabGroupNav/TabGroupNav.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n display: block;\n}\n\n.tab-list {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n position: relative;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n flex-direction: column;\n align-items: stretch;\n}\n\n.tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-025);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n color: var(--color-foreground-secondary);\n position: relative;\n /* Only transition color — hover bg is instant (see ::after below) */\n transition: color var(--effect-motion-short-2);\n flex-shrink: 0;\n height: var(--dimension-size-400);\n min-width: var(--dimension-size-400);\n box-sizing: border-box;\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n --_dot: var(--color-foreground-bold-brand);\n --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025, 2px);\n background: transparent;\n pointer-events: none;\n transition: none;\n}\n\n.tab:hover::after { background: var(--_hover-bg); transition: none; }\n.tab:active::after { background: var(--_pressed-bg); transition: none; }\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n/* Inactive: `.ds-control-inactive` (25% opacity) — applied via class in TSX. */\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n position: relative;\n display: inline-flex;\n align-items: center;\n padding: 0 var(--dimension-space-025);\n white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n --_hover-bg: var(--color-interaction-on-medium-background-hover);\n --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n --_dot-ring: var(--color-background-medium-neutral);\n --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.on-bold {\n --_hover-bg: var(--color-interaction-on-bold-background-hover);\n --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n --_dot-ring: var(--color-background-bold-neutral);\n --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n --_hover-bg: var(--color-interaction-on-strong-background-hover);\n --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n --_dot-ring: var(--color-background-strong-neutral);\n --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n --_hover-bg: var(--color-always-dark-interaction-hover);\n --_pressed-bg: var(--color-always-dark-interaction-pressed);\n --_dot-ring: var(--color-always-dark-background);\n --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.on-navigation {\n color: var(--color-navigation-foreground-secondary);\n --_hover-bg: var(--color-navigation-interaction-hover);\n --_pressed-bg: var(--color-navigation-interaction-pressed);\n --_dot: var(--color-navigation-foreground-brand);\n --_dot-ring: var(--color-navigation-background);\n --ds-focus-ring-color: var(--color-navigation-interaction-focus);\n}\n\n.on-navigation.tab--selected { color: var(--color-navigation-foreground-primary); }\n\n.tab-list--on-navigation .tab-divider__line {\n background-color: var(--color-navigation-border-tertiary);\n}\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav */\n.tab-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--dimension-space-100);\n height: var(--dimension-size-400);\n padding-block: var(--dimension-space-075);\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.tab-divider__line {\n width: var(--dimension-stroke-width-012);\n align-self: stretch;\n background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n width: auto;\n height: var(--dimension-space-100);\n align-self: stretch;\n padding-block: 0;\n padding-inline: var(--dimension-space-075);\n}\n\n.tab-divider--vertical .tab-divider__line {\n width: auto;\n height: var(--dimension-stroke-width-012);\n align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, Method, State, h, Host } from '@stencil/core';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\nexport type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';\n\n@Component({\n tag: 'ds-tab-group-nav',\n styleUrl: 'TabGroupNav.css',\n scoped: true,\n})\nexport class TabGroupNav {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() tabs: TabItem[] = [];\n @Prop() background: TabGroupNavBackground | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * When `false`, arrow keys move focus only — Space/Enter (or click) commits selection.\n * Used by bar nav where each tab is a full page transition.\n */\n @Prop() selectionFollowsFocus: boolean = true;\n\n /** When `false`, every tab uses `tabindex=\"-1\"` (another chrome control owns the tab stop). */\n @Prop() rovingEnabled: boolean = true;\n\n @Event() dsChange!: EventEmitter<string>;\n\n /** Fired when arrow navigation reaches the first/last tab in manual selection mode. */\n @Event() dsRovingExit!: EventEmitter<'start' | 'end'>;\n\n @State() private focusedTabId: string = '';\n\n private get selectableTabs(): TabItemTab[] {\n return getSelectableTabs(this.tabs);\n }\n\n componentWillLoad() {\n this.syncFocusedTabId(this.value);\n }\n\n @Watch('value')\n onValueChange(next: string, prev: string | undefined) {\n if (!this.selectionFollowsFocus) {\n if (prev === undefined || next !== this.focusedTabId) {\n this.syncFocusedTabId(next);\n }\n return;\n }\n\n if (prev === undefined || next === prev) return;\n\n requestAnimationFrame(() => {\n const active = document.activeElement as HTMLElement | null;\n if (!active || !this.el.contains(active)) return;\n\n const activeId = active.getAttribute('data-tab-id');\n if (activeId === next) return;\n\n const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n if (nextTab) {\n nextTab.focus({ preventScroll: true });\n } else {\n active.blur();\n }\n });\n }\n\n @Watch('tabs')\n onTabsChange() {\n if (!this.selectableTabs.some(tab => tab.id === this.focusedTabId)) {\n this.syncFocusedTabId(this.value);\n }\n }\n\n @Method()\n async focusTab(id: string) {\n this.focusedTabId = id;\n const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n btn?.focus({ preventScroll: true });\n }\n\n @Method()\n async focusLastTab() {\n const tabs = this.selectableTabs;\n const last = [...tabs].reverse().find(tab => !tab.isInactive);\n if (last) await this.focusTab(last.id);\n }\n\n @Method()\n async focusFirstTab() {\n const first = this.selectableTabs.find(tab => !tab.isInactive);\n if (first) await this.focusTab(first.id);\n }\n\n private syncFocusedTabId(preferred: string) {\n const tabs = this.selectableTabs;\n if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n this.focusedTabId = preferred;\n return;\n }\n const first = tabs.find(tab => !tab.isInactive);\n this.focusedTabId = first?.id ?? '';\n }\n\n private selectTab(id: string, options?: { focus?: boolean }) {\n this.value = id;\n this.focusedTabId = id;\n this.dsChange.emit(id);\n if (options?.focus !== false) {\n void this.focusTab(id);\n }\n }\n\n private getFocusedIndex(): number {\n return this.selectableTabs.findIndex(tab => tab.id === this.focusedTabId);\n }\n\n private findEnabledLinear(from: number, step: 1 | -1): number | null {\n const tabs = this.selectableTabs;\n for (let i = from + step; i >= 0 && i < tabs.length; i += step) {\n if (!tabs[i]?.isInactive) return i;\n }\n return null;\n }\n\n /**\n * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n * Returns `from` unchanged if no other enabled tab exists.\n */\n private findEnabled(from: number, step: 1 | -1): number {\n const tabs = this.selectableTabs;\n const len = tabs.length;\n for (let n = 0; n < len; n++) {\n const i = (from + step * (n + 1) + len * (n + 1)) % len;\n if (!tabs[i]?.isInactive) return i;\n }\n return from;\n }\n\n private moveFocusToIndex(nextIdx: number) {\n const next = this.selectableTabs[nextIdx];\n if (!next) return;\n this.focusedTabId = next.id;\n void this.focusTab(next.id);\n }\n\n private activateFocusedTab(e: KeyboardEvent) {\n if (e.key !== 'Enter' && e.key !== ' ') return;\n const tab = this.selectableTabs.find(item => item.id === this.focusedTabId);\n if (!tab || tab.isInactive) return;\n e.preventDefault();\n this.selectTab(tab.id, { focus: true });\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n const tabs = this.selectableTabs;\n if (!tabs.length) return;\n\n if (!this.selectionFollowsFocus) {\n if (e.key === 'Enter' || e.key === ' ') {\n this.activateFocusedTab(e);\n return;\n }\n }\n\n const currentIdx = this.selectionFollowsFocus\n ? tabs.findIndex(t => t.id === this.value)\n : this.getFocusedIndex();\n if (currentIdx < 0) return;\n\n const isVertical = this.orientation === 'vertical';\n let nextIdx: number | null = null;\n let exit: 'start' | 'end' | null = null;\n\n if (!isVertical) {\n if (e.key === 'ArrowRight') {\n if (this.selectionFollowsFocus) {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else {\n const candidate = this.findEnabledLinear(currentIdx, 1);\n if (candidate === null) exit = 'end';\n else nextIdx = candidate;\n }\n } else if (e.key === 'ArrowLeft') {\n if (this.selectionFollowsFocus) {\n nextIdx = this.findEnabled(currentIdx, -1);\n } else {\n const candidate = this.findEnabledLinear(currentIdx, -1);\n if (candidate === null) exit = 'start';\n else nextIdx = candidate;\n }\n }\n } else {\n if (e.key === 'ArrowDown') {\n if (this.selectionFollowsFocus) {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else {\n const candidate = this.findEnabledLinear(currentIdx, 1);\n if (candidate === null) exit = 'end';\n else nextIdx = candidate;\n }\n } else if (e.key === 'ArrowUp') {\n if (this.selectionFollowsFocus) {\n nextIdx = this.findEnabled(currentIdx, -1);\n } else {\n const candidate = this.findEnabledLinear(currentIdx, -1);\n if (candidate === null) exit = 'start';\n else nextIdx = candidate;\n }\n }\n }\n\n if (e.key === 'Home') {\n const first = tabs.findIndex(t => !t.isInactive);\n nextIdx = first === -1 ? null : first;\n } else if (e.key === 'End') {\n const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n }\n\n if (exit) {\n e.preventDefault();\n this.dsRovingExit.emit(exit);\n return;\n }\n\n if (nextIdx !== null && nextIdx !== currentIdx) {\n e.preventDefault();\n const next = tabs[nextIdx];\n if (this.selectionFollowsFocus) {\n this.selectTab(next.id);\n } else {\n this.moveFocusToIndex(nextIdx);\n }\n }\n }\n\n private getBgClass(): string {\n if (!this.background || this.background === 'faint') return '';\n if (this.background === 'always-dark') return 'on-always-dark';\n if (this.background === 'navigation') return 'on-navigation';\n return `on-${this.background}`;\n }\n\n private tabIndexForTab(tab: TabItemTab): number {\n if (!this.rovingEnabled) return -1;\n if (this.selectionFollowsFocus) {\n return tab.id === this.value ? 0 : -1;\n }\n return tab.id === this.focusedTabId ? 0 : -1;\n }\n\n render() {\n const bgClass = this.getBgClass();\n const isVertical = this.orientation === 'vertical';\n const isNavigation = this.background === 'navigation';\n\n return (\n <Host class=\"tab-group-nav-host\">\n <div\n role=\"tablist\"\n class={{\n 'tab-list': true,\n 'tab-list--vertical': isVertical,\n 'tab-list--on-navigation': isNavigation,\n }}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-orientation={isVertical ? 'vertical' : undefined}\n >\n {this.tabs.map((tab, index) => {\n if (isTabDivider(tab)) {\n return (\n <div\n key={`divider-${index}`}\n class={{\n 'tab-divider': true,\n 'tab-divider--vertical': isVertical,\n }}\n aria-hidden=\"true\"\n >\n <div class=\"tab-divider__line\" />\n </div>\n );\n }\n\n const isSelected = tab.id === this.value;\n return (\n <button\n key={tab.id}\n type=\"button\"\n role=\"tab\"\n data-tab-id={tab.id}\n class={{\n tab: true,\n 'tab--selected': isSelected,\n 'ds-focus-ring-inset': true,\n 'ds-control-inactive': !!tab.isInactive,\n [bgClass]: !!bgClass,\n }}\n aria-selected={isSelected}\n aria-disabled={tab.isInactive || undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.isInactive}\n tabIndex={this.tabIndexForTab(tab)}\n onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n onFocus={() => {\n if (!this.selectionFollowsFocus) {\n this.focusedTabId = tab.id;\n }\n }}\n >\n <span class={{\n tab__label: true,\n 'tab__label--dot': !!tab.dot,\n }}>\n <ds-text as=\"span\" variant=\"text-body-medium\" emphasis={isSelected} color=\"inherit\">\n {tab.label}\n </ds-text>\n {tab.dot && (\n <ds-badge\n class=\"tab__dot\"\n variant=\"dot\"\n background=\"var(--_dot-ring)\"\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n </button>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,a as d,t as r}from"./index.js";function i(t){return`ds-text--${t.replace(/^text-/,"")}`}function a(t){return t==="span"||t==="label"?"ds-text--inline-box":"ds-text--block-box"}const o=()=>`.ds-text--display-medium.sc-ds-text-h,.ds-text--display-medium.sc-ds-text{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-text-h,.ds-text--display-small.sc-ds-text{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-text-h,.ds-text--title-large.sc-ds-text{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-text-h,.ds-text--title-medium.sc-ds-text{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-text-h,.ds-text--title-small.sc-ds-text{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-text-h,.ds-text--body-large.sc-ds-text{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-text-h,.ds-text--body-medium.sc-ds-text{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-text-h,.ds-text--body-small.sc-ds-text{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-text-h,.ds-text--caption.sc-ds-text{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-text-h,.ds-text--display-small.ds-text--emphasis.sc-ds-text-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-text,.ds-text--display-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-text-h,.ds-text--display-small.ds-text--regular.sc-ds-text-h,.ds-text--display-medium.ds-text--regular.sc-ds-text,.ds-text--display-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-text-h,.ds-text--title-large.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-text-h,.ds-text--title-large.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-text-h,.ds-text--title-small.ds-text--emphasis.sc-ds-text-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-text,.ds-text--title-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-text-h,.ds-text--title-small.ds-text--regular.sc-ds-text-h,.ds-text--title-medium.ds-text--regular.sc-ds-text,.ds-text--title-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-text-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-text-h,.ds-text--body-large.ds-text--emphasis.sc-ds-text,.ds-text--body-medium.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-text-h,.ds-text--body-medium.ds-text--regular.sc-ds-text-h,.ds-text--body-large.ds-text--regular.sc-ds-text,.ds-text--body-medium.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-text-h,.ds-text--body-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-text-h,.ds-text--body-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-text-h,.ds-text--caption.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-text-h,.ds-text--caption.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.sc-ds-text-h{box-sizing:border-box;max-width:100%;min-width:0;margin:0;padding:0;border:0;font-family:var(--typography-font-family)}.ds-text--inline-box.sc-ds-text-h{display:inline-block}.ds-text--block-box.sc-ds-text-h{display:block;width:100%}.ds-text__element.sc-ds-text{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;border:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;text-transform:inherit;text-align:inherit;text-decoration:inherit;font-style:inherit;font-variant-numeric:inherit;font-feature-settings:inherit;white-space:inherit;text-wrap:inherit;overflow-wrap:inherit;word-break:inherit;overflow:inherit;text-overflow:inherit}.ds-text--truncate-1.sc-ds-text-h{overflow:hidden}.ds-text--truncate-1.sc-ds-text-h .ds-text__element.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-text--truncate-2.sc-ds-text-h,.ds-text--truncate-3.sc-ds-text-h,.ds-text--truncate-4.sc-ds-text-h,.ds-text--truncate-5.sc-ds-text-h{overflow:hidden}.ds-text--truncate-2.sc-ds-text-h .ds-text__element.sc-ds-text,.ds-text--truncate-3.sc-ds-text-h .ds-text__element.sc-ds-text,.ds-text--truncate-4.sc-ds-text-h .ds-text__element.sc-ds-text,.ds-text--truncate-5.sc-ds-text-h .ds-text__element.sc-ds-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.ds-text--truncate-2.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:2}.ds-text--truncate-3.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:3}.ds-text--truncate-4.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:4}.ds-text--truncate-5.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:5}.ds-text--nowrap.sc-ds-text-h,.ds-text--nowrap.sc-ds-text-h .ds-text__element.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.ds-text--balance.sc-ds-text-h,.ds-text--balance.sc-ds-text-h .ds-text__element.sc-ds-text{text-wrap:balance}.ds-text--pretty.sc-ds-text-h,.ds-text--pretty.sc-ds-text-h .ds-text__element.sc-ds-text{text-wrap:pretty}.ds-text--color-primary.sc-ds-text-h{color:var(--color-foreground-primary)}.ds-text--color-secondary.sc-ds-text-h{color:var(--color-foreground-secondary)}.ds-text--color-tertiary.sc-ds-text-h{color:var(--color-foreground-tertiary)}.ds-text--color-brand.sc-ds-text-h{color:var(--color-foreground-bold-brand)}.ds-text--color-negative.sc-ds-text-h{color:var(--color-foreground-bold-negative)}.ds-text--color-positive.sc-ds-text-h{color:var(--color-foreground-bold-positive)}.ds-text--color-warning.sc-ds-text-h{color:var(--color-foreground-bold-warning)}.ds-text--color-caution.sc-ds-text-h{color:var(--color-foreground-bold-caution)}.ds-text--color-ai.sc-ds-text-h{color:var(--color-foreground-bold-ai)}.ds-text--color-on-strong.sc-ds-text-h{color:var(--color-foreground-on-strong-background-primary)}.ds-text--color-on-bold.sc-ds-text-h{color:var(--color-foreground-on-bold-background-primary)}.ds-text--color-inherit.sc-ds-text-h{color:inherit}.ds-text--decoration-underline.sc-ds-text-h{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.ds-text--decoration-dotted-underline.sc-ds-text-h{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.ds-text--italic.sc-ds-text-h{font-style:italic}.ds-text--font-feature-tabular-nums.sc-ds-text-h{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}.ds-text--align-left.sc-ds-text-h{text-align:left}.ds-text--align-center.sc-ds-text-h{text-align:center}.ds-text--align-right.sc-ds-text-h{text-align:right}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.emphasis=false;this.italic=false;this.lineTruncation="none";this.fontFeature="normal";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const r={"ds-text":true,[a(this.as)]:true,[i(this.variant)]:true,"ds-text--emphasis":this.emphasis,"ds-text--regular":!this.emphasis,"ds-text--nowrap":this.wrap==="nowrap","ds-text--balance":this.wrap==="balance","ds-text--pretty":this.wrap==="pretty","ds-text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","ds-text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","ds-text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","ds-text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","ds-text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","ds-text--color-primary":this.color==="primary","ds-text--color-secondary":this.color==="secondary","ds-text--color-tertiary":this.color==="tertiary","ds-text--color-brand":this.color==="brand","ds-text--color-negative":this.color==="negative","ds-text--color-positive":this.color==="positive","ds-text--color-warning":this.color==="warning","ds-text--color-caution":this.color==="caution","ds-text--color-ai":this.color==="ai","ds-text--color-on-strong":this.color==="on-strong","ds-text--color-on-bold":this.color==="on-bold","ds-text--color-inherit":this.color==="inherit","ds-text--decoration-underline":this.decoration==="underline","ds-text--decoration-dotted-underline":this.decoration==="dotted-underline","ds-text--italic":this.italic,"ds-text--align-left":this.align==="left","ds-text--align-center":this.align==="center","ds-text--align-right":this.align==="right","ds-text--font-feature-tabular-nums":this.fontFeature==="tabular-nums"};const o=this.color&&e(this.color)?{color:this.color}:undefined;const n={};if(this.as==="label"&&this.for)n["for"]=this.for;if(this.textId)n["id"]=this.textId;return s(d,{key:"57e8236cb273f91e020d20865626aaa0722d87b9",class:r,style:o},s(t,{key:"b651222dcdd1b8c1d7b58d59a677cd0b5786c35a",class:"ds-text__element",...n},s("slot",{key:"bc73684e85c5536ee3a490e81fa9ac9dd91bd2d9"})))}static get style(){return o()}},[262,"ds-text",{variant:[1],emphasis:[4],color:[1],decoration:[1],italic:[4],align:[1],lineTruncation:[8,"line-truncation"],wrap:[1],fontFeature:[1,"font-feature"],as:[1],for:[1],textId:[1,"text-id"]}]);function x(){if(typeof customElements==="undefined"){return}const t=["ds-text"];t.forEach((t=>{switch(t){case"ds-text":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}x();export{n as T,x as d};
|
|
2
|
-
//# sourceMappingURL=p-sBx2MuF2.js.map
|