@ds-mo/ui 15.4.1 → 15.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +53 -6
- package/dist/angular/ds-select.d.ts +1 -1
- package/dist/angular/ds-select.js +3 -3
- package/dist/angular/ds-table.d.ts +7 -1
- package/dist/angular/ds-table.js +11 -5
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.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-page-title.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-calendar.js +1 -1
- package/dist/components/ds-card-action-center.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-data-customize.js +1 -1
- package/dist/components/ds-data-filter.js +1 -1
- package/dist/components/ds-data-group.js +1 -1
- package/dist/components/ds-data-preferences.js +1 -1
- package/dist/components/ds-data-saved-views.js +1 -1
- package/dist/components/ds-data-search.js +1 -1
- package/dist/components/ds-data-sort.js +1 -1
- package/dist/components/ds-data-toolbar.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-input-date.js +1 -1
- package/dist/components/ds-input-date.js.map +1 -1
- package/dist/components/ds-input-time.js +1 -1
- package/dist/components/ds-input-time.js.map +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-map-entity-marker.js +1 -1
- package/dist/components/ds-map-entity-marker.js.map +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio-tile.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-scroll-overlay.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-textarea.js +1 -1
- package/dist/components/ds-textarea.js.map +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/{p-YYiDYQhS.js → p--VQc5GDy.js} +2 -2
- package/dist/components/{p-LENgfPDe.js → p-7MwoWtTJ.js} +2 -2
- package/dist/components/p-B95UP66y.js +2 -0
- package/dist/components/p-B95UP66y.js.map +1 -0
- package/dist/components/{p-D-J7GgjY.js → p-BLeHHoVb.js} +2 -2
- package/dist/components/{p-D-J7GgjY.js.map → p-BLeHHoVb.js.map} +1 -1
- package/dist/components/{p-CXGjCWSh.js → p-BfVMaZZE.js} +2 -2
- package/dist/components/{p-wRhYxngW.js → p-BlbfbYg6.js} +2 -2
- package/dist/components/{p-PtxCwf5S.js → p-BuDxlhnQ.js} +2 -2
- package/dist/components/p-BuGlC5r8.js +2 -0
- package/dist/components/p-BuGlC5r8.js.map +1 -0
- package/dist/components/{p-BkvAqrXg.js → p-C1ZfBbJ_.js} +2 -2
- package/dist/components/{p-BcpIK9S6.js → p-C35Tki38.js} +2 -2
- package/dist/components/{p-jwVzQaTZ.js → p-C378wwRj.js} +2 -2
- package/dist/components/{p-B6TX55c5.js → p-C9H-3JOA.js} +2 -2
- package/dist/components/{p-COD1C3Gj.js → p-CNeDJTGX.js} +2 -2
- package/dist/components/p-CXlklL-0.js +2 -0
- package/dist/components/{p-dUti7zhW.js.map → p-CXlklL-0.js.map} +1 -1
- package/dist/components/{p-D7wLvTHz.js → p-CcwxySms.js} +2 -2
- package/dist/components/p-CzdE3M3g.js +2 -0
- package/dist/components/p-CzdE3M3g.js.map +1 -0
- package/dist/components/{p-DQfKS7dz.js → p-D9_iDlkT.js} +2 -2
- package/dist/components/{p-DkxhNqT-.js → p-DPwptvZl.js} +2 -2
- package/dist/components/{p-Dg6hnCc2.js → p-DVsGfz7J.js} +2 -2
- package/dist/components/{p-Dg6hnCc2.js.map → p-DVsGfz7J.js.map} +1 -1
- package/dist/components/{p--STJbKuN.js → p-DYsRXun3.js} +2 -2
- package/dist/components/{p-BYeG0b5N.js → p-DZLtFn-r.js} +2 -2
- package/dist/components/{p-B0BQCVkq.js → p-D_iZPukF.js} +2 -2
- package/dist/components/p-Da3aFRk2.js +2 -0
- package/dist/components/p-Da3aFRk2.js.map +1 -0
- package/dist/components/{p-BK_4OHJO.js → p-Df9S0aWi.js} +2 -2
- package/dist/components/{p-YDMY8T0d.js → p-a-cIN_BX.js} +2 -2
- package/dist/components/{p-YDMY8T0d.js.map → p-a-cIN_BX.js.map} +1 -1
- package/dist/components/{p-C_9VGgPf.js → p-bQE1NZVe.js} +2 -2
- package/dist/components/{p-CcZSzCfs.js → p-sDm8BEMy.js} +2 -2
- package/dist/docs/components.json +417 -74
- package/dist/lint/index.js +1 -1
- package/dist/mcp-data/registry/button-filled.json +1 -1
- package/dist/mcp-data/registry/map-entity-marker.json +5 -5
- package/dist/mcp-data/registry/registry.json +52 -5
- package/dist/mcp-data/registry/select.json +54 -3
- package/dist/mcp-data/registry/table.json +138 -12
- package/dist/react/ds-table.d.ts +3 -1
- package/dist/react/ds-table.js +2 -0
- package/dist/styles/table.css +399 -8
- package/dist/types/components/MapEntityMarker/MapEntityMarker.d.ts +1 -1
- package/dist/types/components/Select/Select.d.ts +6 -0
- package/dist/types/components/Table/Table.d.ts +35 -0
- package/dist/types/components/Table/index.d.ts +1 -1
- package/dist/types/components/Table/table-body-renderer.d.ts +1 -0
- package/dist/types/components/Table/table-cell-editor.d.ts +4 -0
- package/dist/types/components/Table/table-grid-model.d.ts +23 -0
- package/dist/types/components/Table/table-layout-controller.d.ts +1 -0
- package/dist/types/components/Table/table-review-fixtures.d.ts +10 -0
- package/dist/types/components/Table/table-row-view.d.ts +11 -2
- package/dist/types/components/Table/table-skeleton-view.d.ts +3 -1
- package/dist/types/components/Table/table-structure.d.ts +38 -0
- package/dist/types/components/Table/table-types.d.ts +71 -1
- package/dist/types/components/Table/table-virtual-controller.d.ts +1 -0
- package/dist/types/components.d.ts +80 -4
- package/dist/types/utils/select-controller.d.ts +1 -0
- package/dist/vue/ds-select.js +3 -0
- package/dist/vue/ds-table.js +8 -0
- package/package.json +1 -1
- package/dist/components/p-buM-T4vF.js +0 -2
- package/dist/components/p-buM-T4vF.js.map +0 -1
- package/dist/components/p-dUti7zhW.js +0 -2
- /package/dist/components/{p-YYiDYQhS.js.map → p--VQc5GDy.js.map} +0 -0
- /package/dist/components/{p-LENgfPDe.js.map → p-7MwoWtTJ.js.map} +0 -0
- /package/dist/components/{p-CXGjCWSh.js.map → p-BfVMaZZE.js.map} +0 -0
- /package/dist/components/{p-wRhYxngW.js.map → p-BlbfbYg6.js.map} +0 -0
- /package/dist/components/{p-PtxCwf5S.js.map → p-BuDxlhnQ.js.map} +0 -0
- /package/dist/components/{p-BkvAqrXg.js.map → p-C1ZfBbJ_.js.map} +0 -0
- /package/dist/components/{p-BcpIK9S6.js.map → p-C35Tki38.js.map} +0 -0
- /package/dist/components/{p-jwVzQaTZ.js.map → p-C378wwRj.js.map} +0 -0
- /package/dist/components/{p-B6TX55c5.js.map → p-C9H-3JOA.js.map} +0 -0
- /package/dist/components/{p-COD1C3Gj.js.map → p-CNeDJTGX.js.map} +0 -0
- /package/dist/components/{p-D7wLvTHz.js.map → p-CcwxySms.js.map} +0 -0
- /package/dist/components/{p-DQfKS7dz.js.map → p-D9_iDlkT.js.map} +0 -0
- /package/dist/components/{p-DkxhNqT-.js.map → p-DPwptvZl.js.map} +0 -0
- /package/dist/components/{p--STJbKuN.js.map → p-DYsRXun3.js.map} +0 -0
- /package/dist/components/{p-BYeG0b5N.js.map → p-DZLtFn-r.js.map} +0 -0
- /package/dist/components/{p-B0BQCVkq.js.map → p-D_iZPukF.js.map} +0 -0
- /package/dist/components/{p-BK_4OHJO.js.map → p-Df9S0aWi.js.map} +0 -0
- /package/dist/components/{p-C_9VGgPf.js.map → p-bQE1NZVe.js.map} +0 -0
- /package/dist/components/{p-CcZSzCfs.js.map → p-sDm8BEMy.js.map} +0 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as e,H as t,c as s,h as r,a,t as i}from"./index.js";import{l as o,t as d}from"./p-TVkFIMXz.js";import{d as n}from"./p-D8OWhnID.js";import{D as c}from"./p-DOUk4KoT.js";import{s as l,r as h}from"./p-DGVZhrMd.js";import{C as x}from"./p-CuwopElg.js";import{c as f}from"./p-DuFm-ieS.js";const u=()=>`.text-field-support.sc-ds-textarea{display:flex;align-items:baseline;gap:var(--dimension-space-100);width:100%}.text-field-support.sc-ds-textarea>.sc-ds-textarea:first-child:not(.text-field-count){flex:1;min-width:0}.text-field-count.sc-ds-textarea{flex:none;white-space:nowrap}@media (forced-colors: active){.sc-ds-textarea:root,.sc-ds-textarea-h,.ds-forced-colors-scope.sc-ds-textarea{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-textarea-h,.ds-interaction-fill.sc-ds-textarea{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-textarea-h::before,.ds-interaction-fill.sc-ds-textarea::before,.ds-interaction-fill.sc-ds-textarea-h::after,.ds-interaction-fill.sc-ds-textarea::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-textarea-h::before,.ds-interaction-fill.sc-ds-textarea::before{z-index:1}.ds-interaction-fill.sc-ds-textarea-h::after,.ds-interaction-fill.sc-ds-textarea::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-textarea-h,.ds-interaction-fill--bordered.sc-ds-textarea{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-textarea-h::before,.ds-interaction-fill--selected.sc-ds-textarea::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-textarea-h,.ds-interaction-fill--selected.sc-ds-textarea{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-textarea-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-textarea:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-textarea-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-textarea:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-textarea-h::after,.ds-interaction-fill--grouped.sc-ds-textarea::after,.ds-interaction-fill--grouped.sc-ds-textarea-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-textarea:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-textarea-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-textarea:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-textarea-h,.ds-interaction-fill--grouped.sc-ds-textarea{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-textarea-h>.ds-interaction-fill__content.sc-ds-textarea,.ds-interaction-fill.sc-ds-textarea>.ds-interaction-fill__content.sc-ds-textarea,.ds-interaction-fill__content.sc-ds-textarea{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-textarea-h,.ds-interaction-fill--on-faint.sc-ds-textarea{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-textarea-h,.ds-interaction-fill--on-medium.sc-ds-textarea{--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-textarea-h,.ds-interaction-fill--on-bold.sc-ds-textarea{--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-textarea-h,.ds-interaction-fill--on-strong.sc-ds-textarea{--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-translucent.sc-ds-textarea-h,.ds-interaction-fill--on-translucent.sc-ds-textarea{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-textarea-h,.ds-interaction-fill--on-inverted.sc-ds-textarea{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-textarea-h,.ds-interaction-fill--on-media.sc-ds-textarea{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-textarea-h,.ds-interaction-fill--on-always-dark.sc-ds-textarea{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-textarea-h,.ds-interaction-fill--on-chrome.sc-ds-textarea{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-textarea-h,.ds-interaction-fill--on-navigation.sc-ds-textarea{--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-interaction-fill.ds-interaction-fill--surface-open.sc-ds-textarea-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-textarea:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-textarea-h::after,.ds-interaction-fill.sc-ds-textarea::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-textarea-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-textarea:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-textarea-h::before,.ds-interaction-fill--selected.sc-ds-textarea::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-textarea-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-textarea:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-textarea:root,.sc-ds-textarea-h,.ds-forced-colors-scope.sc-ds-textarea{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-textarea-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-textarea-h,.ds-focus-ring.sc-ds-textarea,.ds-focus-ring-inset.sc-ds-textarea-h,.ds-focus-ring-inset.sc-ds-textarea{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-textarea-h:focus-visible,.ds-focus-ring.sc-ds-textarea: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-textarea-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-textarea{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-textarea-h:focus-visible,.ds-focus-ring-inset.sc-ds-textarea:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-textarea-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-textarea: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-textarea-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-textarea{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-textarea-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-textarea::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-textarea-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-textarea:root,.sc-ds-textarea-h,.ds-forced-colors-scope.sc-ds-textarea{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-textarea-h,.ds-control-inactive.sc-ds-textarea{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-textarea-h,.ds-control-inactive.sc-ds-textarea{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-textarea-h,.sc-ds-textarea:where(.ds-table),.sc-ds-textarea:where(.tooltip-popup),.sc-ds-textarea:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-textarea,.ds-control--lg.sc-ds-textarea-h,.ds-control--md.sc-ds-textarea-h,.ds-control--md.sc-ds-textarea,.ds-control--sm.sc-ds-textarea-h,.ds-control--sm.sc-ds-textarea,.ds-control--xs.sc-ds-textarea-h,.ds-control--xs.sc-ds-textarea{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-textarea-h,.ds-control--lg.sc-ds-textarea{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-textarea-h,.ds-control--md.sc-ds-textarea{--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--sm.sc-ds-textarea-h,.ds-control--sm.sc-ds-textarea{--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--xs.sc-ds-textarea-h,.ds-control--xs.sc-ds-textarea{--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:0}.ds-control-width--hug.sc-ds-textarea-h,.ds-control-width--hug.sc-ds-textarea{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-textarea-h,.ds-control-width--fill.sc-ds-textarea{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-textarea-h,.ds-field-stack.sc-ds-textarea{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.ds-field-stack.ds-field-stack--supporting-inset.sc-ds-textarea-h .error-text.sc-ds-textarea,.ds-field-stack.ds-field-stack--supporting-inset.sc-ds-textarea .error-text.sc-ds-textarea,.ds-field-stack.ds-field-stack--supporting-inset.sc-ds-textarea .field__description.sc-ds-textarea,.ds-field-stack.ds-field-stack--supporting-inset.sc-ds-textarea .field__error.sc-ds-textarea{padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-text--display-medium.sc-ds-textarea-h,.ds-text--display-medium.sc-ds-textarea{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-textarea-h,.ds-text--display-small.sc-ds-textarea{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-textarea-h,.ds-text--title-large.sc-ds-textarea{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-textarea-h,.ds-text--title-medium.sc-ds-textarea{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-textarea-h,.ds-text--title-small.sc-ds-textarea{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-textarea-h,.ds-text--body-large.sc-ds-textarea{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-textarea-h,.ds-text--body-medium.sc-ds-textarea{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-textarea-h,.ds-text--body-small.sc-ds-textarea{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-textarea-h,.ds-text--caption.sc-ds-textarea{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-textarea-h,.ds-text--display-small.ds-text--emphasis.sc-ds-textarea-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-textarea,.ds-text--display-small.ds-text--emphasis.sc-ds-textarea{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-textarea-h,.ds-text--display-small.ds-text--regular.sc-ds-textarea-h,.ds-text--display-medium.ds-text--regular.sc-ds-textarea,.ds-text--display-small.ds-text--regular.sc-ds-textarea{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-textarea-h,.ds-text--title-large.ds-text--emphasis.sc-ds-textarea{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-textarea-h,.ds-text--title-large.ds-text--regular.sc-ds-textarea{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-textarea-h,.ds-text--title-small.ds-text--emphasis.sc-ds-textarea-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-textarea,.ds-text--title-small.ds-text--emphasis.sc-ds-textarea{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-textarea-h,.ds-text--title-small.ds-text--regular.sc-ds-textarea-h,.ds-text--title-medium.ds-text--regular.sc-ds-textarea,.ds-text--title-small.ds-text--regular.sc-ds-textarea{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-textarea-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-textarea-h,.ds-text--body-large.ds-text--emphasis.sc-ds-textarea,.ds-text--body-medium.ds-text--emphasis.sc-ds-textarea{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-textarea-h,.ds-text--body-medium.ds-text--regular.sc-ds-textarea-h,.ds-text--body-large.ds-text--regular.sc-ds-textarea,.ds-text--body-medium.ds-text--regular.sc-ds-textarea{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-textarea-h,.ds-text--body-small.ds-text--emphasis.sc-ds-textarea{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-textarea-h,.ds-text--body-small.ds-text--regular.sc-ds-textarea{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-textarea-h,.ds-text--caption.ds-text--emphasis.sc-ds-textarea{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-textarea-h,.ds-text--caption.ds-text--regular.sc-ds-textarea{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}@media (forced-colors: active){.sc-ds-textarea:root,.sc-ds-textarea-h,.ds-forced-colors-scope.sc-ds-textarea{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.textarea-host.sc-ds-textarea-h{display:inline-flex;--ds-textarea-fg:var(--color-foreground-primary);--ds-textarea-placeholder:var(--color-foreground-secondary);--ds-textarea-placeholder-active:var(--color-foreground-quaternary);--ds-textarea-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-textarea-h,.ds-control-width--fill.sc-ds-textarea-h .textarea-control.sc-ds-textarea{width:100%}.textarea-control.sc-ds-textarea{display:flex;box-sizing:border-box;min-width:0;overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-textarea-fg)}.textarea-control--resizable.sc-ds-textarea{padding-block-end:var(--dimension-space-025);padding-inline-end:var(--dimension-space-025)}.textarea-control--bordered.sc-ds-textarea{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-textarea-border)}.textarea-control--error.sc-ds-textarea{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.textarea-control--bordered.sc-ds-textarea:focus-within:not(.textarea-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-textarea-h .textarea-control.sc-ds-textarea::after{background:transparent}.native-textarea.sc-ds-textarea{position:relative;z-index:2;box-sizing:border-box;min-width:0;width:100%;padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-textarea-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-textarea--resize-vertical.sc-ds-textarea{resize:vertical}.native-textarea--resize-none.sc-ds-textarea{resize:none}.native-textarea.sc-ds-textarea:disabled{cursor:not-allowed}.native-textarea.sc-ds-textarea:read-only:not(:disabled){cursor:default}.native-textarea.sc-ds-textarea::placeholder{color:var(--ds-textarea-placeholder)}.native-textarea.sc-ds-textarea:focus::placeholder{color:var(--ds-textarea-placeholder-active)}.error-text.sc-ds-textarea{width:100%}@media (forced-colors: active){.textarea-control--bordered.sc-ds-textarea:focus-within:not(.textarea-control--error)::after{outline-color:var(--ds-forced-color-selected)}.textarea-control--error.sc-ds-textarea::after{outline-style:dashed}}`;let v=0;const g=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange",7);this.internals=this.attachInternals();this.generatedId=`ds-textarea-${++v}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage=c;this.lengthBehavior="error";this.showCharacterCount=true;this.rows=4;this.resize="vertical";this.inputMode="";this.enterKeyHint="";this.spellCheck=true;this.size="md";this.width="fill";this.hasBorder=true;this.hasInteractionFill=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.constraintMessage="";this.submitted=false;this.initialValue="";this.formDisabled=false;this.focused=false;this.touched=false;this.handleInput=e=>{this.value=e.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true}}get managedByField(){return Boolean(this.el.closest("ds-field"))}get visibleConstraintMessage(){return this.touched||this.submitted||this.maxLength!==undefined&&this.value.length>this.maxLength?this.constraintMessage:""}get hasCounter(){return this.showCharacterCount&&o(this.maxLength)!==undefined}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const e=this.isInactive||this.disabled||this.formDisabled;l(this.internals,this.value,{inactive:e});const t=e||this.readOnly?{flags:{},message:""}:d(this);this.constraintMessage=t.message;this.internals.setValidity(t.flags,t.message)}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.value=this.initialValue;this.touched=false;this.submitted=false}formStateRestoreCallback(e){this.value=h(e)}async setFocus(){this.textareaEl?.focus()}render(){const e=this.inputId??this.generatedId;const t=this.isInactive||this.disabled||this.formDisabled;const s=this.value.length>0;const i=this.value!==this.initialValue;const d=this.error&&this.errorMessage?this.errorMessage:this.visibleConstraintMessage;const n=this.error||Boolean(this.visibleConstraintMessage);const c=Boolean(d)&&!this.managedByField;const l=this.hasCounter&&!this.managedByField;const h=x[this.size];const u=Number.isFinite(this.rows)?Math.max(1,Math.floor(this.rows)):4;const v=[this.ariaDescribedby,c?this.errorId:undefined,l?`${this.generatedId}-count`:undefined].filter(Boolean).join(" ")||undefined;return r(a,{key:"fcc92f1a0a4d536817f4f7376fe664ae9ed6e3f3",class:{"textarea-host":true,"ds-field-stack":true,"ds-field-stack--supporting-inset":!this.hasBorder,"ds-control-inactive":t,[`ds-control--${this.size}`]:true,...f(this.width)},"data-disabled":t?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":n?"":undefined,"data-constraint-message":this.visibleConstraintMessage||undefined,"data-character-count":this.hasCounter?String(this.value.length):undefined,"data-character-limit":this.hasCounter?String(o(this.maxLength)):undefined,onInvalid:()=>{this.submitted=true},"data-filled":s?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":i?"":undefined,"data-touched":this.touched?"":undefined},r("div",{key:"f2926f2bbc4eebe34170edf16f78f1572891c553",class:{"textarea-control":true,"textarea-control--resizable":this.resize==="vertical","textarea-control--bordered":this.hasBorder,"textarea-control--error":this.hasBorder&&n,"ds-interaction-fill":this.hasInteractionFill,[`ds-control--${this.size}`]:true}},r("textarea",{key:"333bd1ad0a9149186512815f60328b5450c62153",ref:e=>{this.textareaEl=e},id:e,value:this.value,placeholder:this.placeholder,rows:u,disabled:t,readOnly:this.readOnly,required:this.required,minLength:o(this.minLength),maxLength:this.lengthBehavior==="restrict"?o(this.maxLength):undefined,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,spellcheck:this.spellCheck,class:`native-textarea native-textarea--resize-${this.resize} ds-text--${h.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":v,"aria-invalid":n?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})),(c||l)&&r("div",{key:"9716c5609c7ad9333609dfa64880edf94be30113",class:"text-field-support"},c&&r("ds-text",{key:"52d0ad55236d531d6e71344b4f219954b05cadf5",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},d),l&&r("ds-text",{key:"96d2e1af9d31c1833a33e95efa61c2e101cc6e1e",as:"span",class:"text-field-count",variant:"text-body-small",color:n?"negative":"secondary",textId:`${this.generatedId}-count`},this.value.length,"/",o(this.maxLength))))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],readOnly:[{syncFormValue:0}],minLength:[{syncFormValue:0}],maxLength:[{syncFormValue:0}],requiredMessage:[{syncFormValue:0}]}}static get style(){return u()}},[66,"ds-textarea",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],minLength:[2,"min-length"],maxLength:[2,"max-length"],lengthBehavior:[1,"length-behavior"],showCharacterCount:[4,"show-character-count"],placeholder:[1],rows:[2],resize:[1],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],spellCheck:[4,"spellcheck"],size:[1],width:[1],hasBorder:[4,"has-border"],hasInteractionFill:[4,"has-interaction-fill"],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],constraintMessage:[32],submitted:[32],formDisabled:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],readOnly:[{syncFormValue:0}],minLength:[{syncFormValue:0}],maxLength:[{syncFormValue:0}],requiredMessage:[{syncFormValue:0}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-textarea","ds-text"];e.forEach((e=>{switch(e){case"ds-textarea":if(!customElements.get(i(e))){customElements.define(i(e),g)}break;case"ds-text":if(!customElements.get(i(e))){n()}break}}))}p();export{g as T,p as d};
|
|
2
|
+
//# sourceMappingURL=p-B95UP66y.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["textareaCss","idCounter","Textarea","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","disabled","readOnly","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","lengthBehavior","showCharacterCount","rows","resize","inputMode","enterKeyHint","spellCheck","size","width","hasBorder","hasInteractionFill","isInactive","autoFocus","error","ariaLabel","constraintMessage","submitted","initialValue","formDisabled","focused","touched","handleInput","event","target","dsChange","emit","handleFocus","handleBlur","managedByField","Boolean","el","closest","visibleConstraintMessage","maxLength","undefined","length","hasCounter","lengthLimit","componentWillLoad","syncFormValue","inactive","setFormControlValue","internals","validity","flags","message","textConstraintValidity","setValidity","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restoreStringFormState","setFocus","textareaEl","focus","render","inputId","filled","dirty","errorMessage","invalid","showError","showCounter","textVariant","CONTROL_TEXT_VARIANT","Number","isFinite","Math","max","floor","describedBy","ariaDescribedby","filter","join","h","Host","key","class","controlWidthClass","String","onInvalid","ref","element","id","placeholder","minLength","autoComplete","spellcheck","replace","ariaLabelledby","onInput","onFocus","onBlur","as","variant","color","textId","role"],"sources":["src/wc/components/Textarea/Textarea.css?tag=ds-textarea&encapsulation=scoped","src/wc/components/Textarea/Textarea.tsx"],"sourcesContent":["@import '../../utils/text-field-support.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.textarea-host) {\n display: inline-flex;\n --ds-textarea-fg: var(--color-foreground-primary);\n --ds-textarea-placeholder: var(--color-foreground-secondary);\n --ds-textarea-placeholder-active: var(--color-foreground-quaternary);\n --ds-textarea-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .textarea-control {\n width: 100%;\n}\n\n.textarea-control {\n display: flex;\n box-sizing: border-box;\n min-width: 0;\n overflow: hidden;\n background: transparent;\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n color: var(--ds-textarea-fg);\n}\n\n.textarea-control--resizable {\n padding-block-end: var(--dimension-space-025);\n padding-inline-end: var(--dimension-space-025);\n}\n\n.textarea-control--bordered {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--ds-textarea-border);\n}\n\n.textarea-control--error {\n --ds-interaction-border-width: var(--dimension-stroke-width-018);\n --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.textarea-control--bordered:focus-within:not(.textarea-control--error) {\n --ds-interaction-border-width: var(--dimension-stroke-width-018);\n --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .textarea-control::after {\n background: transparent;\n}\n\n.native-textarea {\n position: relative;\n z-index: 2;\n box-sizing: border-box;\n min-width: 0;\n width: 100%;\n padding-block: var(--ds-control-padding-inline, var(--dimension-space-075));\n padding-inline: calc(\n var(--ds-control-padding-inline, var(--dimension-space-075)) +\n var(--ds-control-label-inset, var(--dimension-space-025))\n );\n background: transparent;\n border: none;\n border-radius: inherit;\n outline: none;\n color: var(--ds-textarea-fg);\n font-family: inherit;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.native-textarea--resize-vertical {\n resize: vertical;\n}\n\n.native-textarea--resize-none {\n resize: none;\n}\n\n.native-textarea:disabled {\n cursor: not-allowed;\n}\n\n.native-textarea:read-only:not(:disabled) {\n cursor: default;\n}\n\n.native-textarea::placeholder {\n color: var(--ds-textarea-placeholder);\n}\n\n.native-textarea:focus::placeholder {\n color: var(--ds-textarea-placeholder-active);\n}\n\n.error-text {\n width: 100%;\n}\n\n@media (forced-colors: active) {\n .textarea-control--bordered:focus-within:not(.textarea-control--error)::after {\n outline-color: var(--ds-forced-color-selected);\n }\n\n .textarea-control--error::after {\n outline-style: dashed;\n }\n}\n","import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport {\n controlWidthClass,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n restoreStringFormState,\n setFormControlValue,\n type ControlWidth,\n} from '../../utils';\n\nimport { lengthLimit, textConstraintValidity } from '../../utils/text-constraints';\n\nexport type TextareaSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type TextareaWidth = ControlWidth;\nexport type TextareaResize = 'vertical' | 'none';\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-textarea',\n styleUrl: 'Textarea.css',\n scoped: true,\n formAssociated: true,\n})\nexport class Textarea {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private generatedId = `ds-textarea-${++idCounter}`;\n private errorId = `${this.generatedId}-error`;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Keeps the value focusable and submittable while preventing edits. */\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n /** Minimum non-empty text length, in native UTF-16 code units. */\n @Prop() minLength: number | undefined;\n /** Maximum text length. A visible counter accompanies this constraint by default. */\n @Prop() maxLength: number | undefined;\n /** Error preserves extra text; restrict uses the browser's hard input limit. */\n @Prop() lengthBehavior: 'error' | 'restrict' = 'error';\n @Prop() showCharacterCount: boolean = true;\n @Prop() placeholder: string | undefined;\n /** Visible text rows before the field scrolls. */\n @Prop() rows: number = 4;\n /** Whether the user can resize the field vertically. */\n @Prop() resize: TextareaResize = 'vertical';\n /** Native browser autofill hint. */\n @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n /** Preferred virtual keyboard without changing the value semantics. */\n @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n /** Preferred virtual-keyboard action label. */\n @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n /** Whether the browser should check spelling and grammar. */\n @Prop({ attribute: 'spellcheck' }) spellCheck: boolean = true;\n /** Control density for typography and inset spacing. */\n @Prop() size: TextareaSize = 'md';\n /** Width fit — fill the parent (default) or hug the available content. */\n @Prop() width: TextareaWidth = 'fill';\n /** Show the standard inset border, including focused and invalid strokes. */\n @Prop() hasBorder: boolean = true;\n /** Show the standard hover and pressed fill when the field is not embedded in interactive chrome. */\n @Prop() hasInteractionFill: boolean = true;\n @Prop() isInactive: boolean = false;\n @Prop() autoFocus: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string | undefined;\n /** Associates the internal textarea with an external <label>. */\n @Prop() inputId: string | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n @State() private constraintMessage = '';\n @State() private submitted = false;\n private get managedByField(): boolean {\n return Boolean(this.el.closest('ds-field'));\n }\n private get visibleConstraintMessage(): string {\n return this.touched ||\n this.submitted ||\n (this.maxLength !== undefined && this.value.length > this.maxLength)\n ? this.constraintMessage\n : '';\n }\n private get hasCounter(): boolean {\n return this.showCharacterCount && lengthLimit(this.maxLength) !== undefined;\n }\n\n private initialValue = '';\n private textareaEl?: HTMLTextAreaElement;\n @State() private formDisabled = false;\n @State() private focused = false;\n @State() private touched = false;\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.syncFormValue();\n }\n\n @Watch('value')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('required')\n @Watch('readOnly')\n @Watch('minLength')\n @Watch('maxLength')\n @Watch('requiredMessage')\n syncFormValue() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n setFormControlValue(this.internals, this.value, { inactive });\n const validity =\n inactive || this.readOnly ? { flags: {}, message: '' } : textConstraintValidity(this);\n this.constraintMessage = validity.message;\n this.internals.setValidity(validity.flags, validity.message);\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n this.touched = false;\n this.submitted = false;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.value = restoreStringFormState(state);\n }\n\n @Method()\n async setFocus() {\n this.textareaEl?.focus();\n }\n\n private handleInput = (event: Event) => {\n this.value = (event.target as HTMLTextAreaElement).value;\n this.dsChange.emit(this.value);\n };\n\n private handleFocus = () => {\n this.focused = true;\n };\n\n private handleBlur = () => {\n this.focused = false;\n this.touched = true;\n };\n\n render() {\n const inputId = this.inputId ?? this.generatedId;\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n const filled = this.value.length > 0;\n const dirty = this.value !== this.initialValue;\n const message =\n this.error && this.errorMessage ? this.errorMessage : this.visibleConstraintMessage;\n const invalid = this.error || Boolean(this.visibleConstraintMessage);\n const showError = Boolean(message) && !this.managedByField;\n const showCounter = this.hasCounter && !this.managedByField;\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const rows = Number.isFinite(this.rows) ? Math.max(1, Math.floor(this.rows)) : 4;\n const describedBy =\n [\n this.ariaDescribedby,\n showError ? this.errorId : undefined,\n showCounter ? `${this.generatedId}-count` : undefined,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n return (\n <Host\n class={{\n 'textarea-host': true,\n 'ds-field-stack': true,\n 'ds-field-stack--supporting-inset': !this.hasBorder,\n 'ds-control-inactive': inactive,\n [`ds-control--${this.size}`]: true,\n ...controlWidthClass(this.width),\n }}\n data-disabled={inactive ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-required={this.required ? '' : undefined}\n data-invalid={invalid ? '' : undefined}\n data-constraint-message={this.visibleConstraintMessage || undefined}\n data-character-count={this.hasCounter ? String(this.value.length) : undefined}\n data-character-limit={this.hasCounter ? String(lengthLimit(this.maxLength)) : undefined}\n onInvalid={() => {\n this.submitted = true;\n }}\n data-filled={filled ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n >\n <div\n class={{\n 'textarea-control': true,\n 'textarea-control--resizable': this.resize === 'vertical',\n 'textarea-control--bordered': this.hasBorder,\n 'textarea-control--error': this.hasBorder && invalid,\n 'ds-interaction-fill': this.hasInteractionFill,\n [`ds-control--${this.size}`]: true,\n }}\n >\n <textarea\n ref={element => {\n this.textareaEl = element;\n }}\n id={inputId}\n value={this.value}\n placeholder={this.placeholder}\n rows={rows}\n disabled={inactive}\n readOnly={this.readOnly}\n required={this.required}\n minLength={lengthLimit(this.minLength)}\n maxLength={this.lengthBehavior === 'restrict' ? lengthLimit(this.maxLength) : undefined}\n autoFocus={this.autoFocus}\n autoComplete={this.autoComplete}\n inputMode={this.inputMode || undefined}\n enterKeyHint={this.enterKeyHint || undefined}\n spellcheck={this.spellCheck}\n class={`native-textarea native-textarea--resize-${this.resize} ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={describedBy}\n aria-invalid={invalid ? 'true' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n {(showError || showCounter) && (\n <div class=\"text-field-support\">\n {showError && (\n <ds-text\n class=\"error-text\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {message}\n </ds-text>\n )}\n {showCounter && (\n <ds-text\n as=\"span\"\n class=\"text-field-count\"\n variant=\"text-body-small\"\n color={invalid ? 'negative' : 'secondary'}\n textId={`${this.generatedId}-count`}\n >\n {this.value.length}/{lengthLimit(this.maxLength)}\n </ds-text>\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as n,H as t,c as i,h as o,a as s,t as e}from"./index.js";import{r as d,b as r}from"./p-DZ58Sg5a.js";import{d as l}from"./p-CwdRaJER.js";import{d as a}from"./p-pPtjNRqC.js";import{d as c}from"./p-0XTyQNRG.js";import{d as u}from"./p-D8OWhnID.js";import{d as f}from"./p-DvGrsLgt.js";import{c as b}from"./p-DuFm-ieS.js";const h=899;function v(n){return n>0&&n<=h}function g(n){return n.contentBoxSize[0]?.inlineSize??n.contentRect.width}function p(n,t){if(typeof ResizeObserver==="undefined"){t(false);return()=>undefined}const i=n.closest("ds-table")??n.closest("ds-data-toolbar");if(!i){t(false);return()=>undefined}const o=n=>{if(n<=0)return;t(v(n))};const s=new ResizeObserver((n=>{o(n[0]?g(n[0]):0)}));s.observe(i);o(i.clientWidth);return()=>s.disconnect()}const m=()=>`.sc-ds-button-unfilled-h,.sc-ds-button-unfilled:where(.ds-table),.sc-ds-button-unfilled:where(.tooltip-popup),.sc-ds-button-unfilled:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-button-unfilled-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-button-unfilled-h,.ds-focus-ring.sc-ds-button-unfilled,.ds-focus-ring-inset.sc-ds-button-unfilled-h,.ds-focus-ring-inset.sc-ds-button-unfilled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-unfilled-h:focus-visible,.ds-focus-ring.sc-ds-button-unfilled: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-button-unfilled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{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-button-unfilled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-unfilled: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-button-unfilled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-button-unfilled-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-button-unfilled-h::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-button-unfilled-h,.ds-interaction-fill--grouped.sc-ds-button-unfilled{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-button-unfilled-h,.ds-interaction-fill--on-faint.sc-ds-button-unfilled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--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-translucent.sc-ds-button-unfilled-h,.ds-interaction-fill--on-translucent.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-unfilled-h,.ds-interaction-fill--on-inverted.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-unfilled-h,.ds-interaction-fill--on-media.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-button-unfilled-h,.ds-interaction-fill--on-chrome.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--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-interaction-fill.ds-interaction-fill--surface-open.sc-ds-button-unfilled-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-button-unfilled:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-button-unfilled-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-button-unfilled:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-control-press-scale.sc-ds-button-unfilled{transition:scale var(--effect-motion-short-2)}.ds-control-press-scale.sc-ds-button-unfilled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:var(--ds-control-press-active-scale, var(--dimension-scale-subtle))}@media (prefers-reduced-motion: reduce){.ds-control-press-scale.sc-ds-button-unfilled,.ds-control-press-scale.sc-ds-button-unfilled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:none;transition:none}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-button-unfilled,.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled,.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled,.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--lg.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--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--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--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--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--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:0}.ds-control--lg.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--lg.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-025))}.ds-control--md.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--md.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-025))}.ds-control--sm.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--sm.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-025))}.ds-control--xs.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--xs.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-025) - var(--dimension-space-025))}.ds-control--lg.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--lg.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-050))}.ds-control--md.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--md.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-050))}.ds-control--sm.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--sm.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-050))}.ds-control-frame.sc-ds-button-unfilled{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-button-unfilled{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-button-unfilled{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-button-unfilled{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-button-unfilled{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none}.ds-button-host--icon.ds-control-width--hug.sc-ds-button-unfilled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-button-host--icon.ds-control-width--fill.sc-ds-button-unfilled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-unfilled-h .ds-button.sc-ds-button-unfilled{width:100%}.ds-button.sc-ds-button-unfilled{justify-content:center;overflow:hidden;min-inline-size:var(--ds-control-height);border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));border-start-start-radius:var( --ds-button-radius-start-start, var(--ds-control-radius, var(--dimension-radius-025)) );border-start-end-radius:var( --ds-button-radius-start-end, var(--ds-control-radius, var(--dimension-radius-025)) );border-end-start-radius:var( --ds-button-radius-end-start, var(--ds-control-radius, var(--dimension-radius-025)) );border-end-end-radius:var( --ds-button-radius-end-end, var(--ds-control-radius, var(--dimension-radius-025)) );cursor:default;-webkit-user-select:none;user-select:none}.ds-button--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.ds-button--rounded.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-half)}.ds-button--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012)}.ds-button--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-button__icon-wrap.sc-ds-button-unfilled,.ds-button__label.sc-ds-button-unfilled,.ds-button__chevron.sc-ds-button-unfilled{position:relative;z-index:2}.ds-button__label.sc-ds-button-unfilled{flex-shrink:0;min-width:0;white-space:nowrap}.ds-button__label--loading.sc-ds-button-unfilled,.ds-button__chevron--loading.sc-ds-button-unfilled{visibility:hidden}.ds-button.sc-ds-button-unfilled>.ds-button__loader-overlay.sc-ds-button-unfilled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.ds-button__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}@media (forced-colors: active){.ds-button.sc-ds-button-unfilled{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}.ds-button-split.sc-ds-button-unfilled{position:relative;display:inline-flex;align-items:stretch;min-width:0;overflow:hidden;gap:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent}.ds-control-width--fill.sc-ds-button-unfilled-h .ds-button-split.sc-ds-button-unfilled{width:100%}.ds-button-split.sc-ds-button-unfilled>.ds-button-split__primary.sc-ds-button-unfilled{flex:1 1 auto;width:auto;min-width:0;border-start-end-radius:var(--dimension-radius-000);border-end-end-radius:var(--dimension-radius-000)}.ds-button-split.sc-ds-button-unfilled>.ds-button-split__menu.sc-ds-button-unfilled{flex:0 0 var(--ds-control-height);width:var(--ds-control-height);min-width:var(--ds-control-height);border-start-start-radius:var(--dimension-radius-000);border-end-start-radius:var(--dimension-radius-000)}.ds-button-split__divider.sc-ds-button-unfilled{position:relative;z-index:3;align-self:stretch;flex:0 0 0;margin-inline-start:calc(-1 * var(--dimension-stroke-width-012));border-inline-start:var(--dimension-stroke-width-012) solid var(--ds-button-split-divider);pointer-events:none}.ds-button-split__divider--content-height.sc-ds-button-unfilled{align-self:center;block-size:var(--ds-button-split-divider-content-height)}.ds-button-split__outline.sc-ds-button-unfilled{position:absolute;z-index:3;inset:0;border:var(--dimension-stroke-width-012) solid var(--ds-button-split-border);border-radius:inherit;pointer-events:none}.ds-control--lg.sc-ds-button-unfilled-h{--ds-button-split-divider-content-height:var(--dimension-size-300)}.ds-control--md.sc-ds-button-unfilled-h{--ds-button-split-divider-content-height:var(--dimension-size-250)}.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled-h{--ds-button-split-divider-content-height:var(--dimension-size-200)}.ds-button-split-host--primary-icon.ds-control-width--hug.sc-ds-button-unfilled-h .ds-button-split.sc-ds-button-unfilled>.ds-button-split__primary.sc-ds-button-unfilled{flex:0 0 var(--ds-control-height);width:var(--ds-control-height);min-width:var(--ds-control-height);height:var(--ds-control-height)}.ds-button-split--rounded.sc-ds-button-unfilled{border-radius:var(--dimension-radius-half)}.ds-table-caption-control.sc-ds-button-unfilled-h{--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs)}.ds-table-caption-control.ds-table-caption-control--compact.sc-ds-button-unfilled-h{flex:0 0 auto;width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400));max-width:var(--ds-control-height, var(--dimension-size-400));inline-size:var(--ds-control-height, var(--dimension-size-400));min-inline-size:var(--ds-control-height, var(--dimension-size-400));max-inline-size:var(--ds-control-height, var(--dimension-size-400))}.ds-table-caption-control.ds-table-caption-control--compact.sc-ds-button-unfilled-h .trigger.sc-ds-button-unfilled{justify-content:center;inline-size:100%;min-inline-size:100%;height:100%;padding-inline:0}.ds-table-caption-control.ds-table-caption-control--compact.sc-ds-button-unfilled-h .trigger--has-value.sc-ds-button-unfilled:not(.trigger--label-placeholder){--ds-select-prefix-fg:var(--ds-select-fg-active)}@container ds-table (max-width: 899px){.sc-ds-button-unfilled-h.ds-table-caption-control{flex:0 0 auto;inline-size:var(--ds-control-height, var(--dimension-size-400));min-inline-size:var(--ds-control-height, var(--dimension-size-400));max-inline-size:var(--ds-control-height, var(--dimension-size-400))}.sc-ds-button-unfilled-h.ds-table-caption-control .trigger{justify-content:center;inline-size:100%;min-inline-size:100%;padding-inline:0}.sc-ds-button-unfilled-h.ds-table-caption-control .trigger--has-value:not(.trigger--label-placeholder){--ds-select-prefix-fg:var(--ds-select-fg-active)}}.sc-ds-button-unfilled-h{--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary);--ds-button-split-border:var(--color-border-secondary);--ds-button-split-divider:var(--color-border-tertiary)}.button-unfilled-host--background-medium.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-border-on-medium-background-secondary);--ds-button-split-divider:var(--color-border-on-medium-background-tertiary)}.button-unfilled-host--background-bold.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-border-on-bold-background-secondary);--ds-button-split-divider:var(--color-border-on-bold-background-tertiary)}.button-unfilled-host--background-strong.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-border-on-strong-background-secondary);--ds-button-split-divider:var(--color-border-on-strong-background-tertiary)}.button-unfilled-host--background-translucent.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-translucent-border-secondary);--ds-button-split-divider:var(--color-translucent-border-tertiary)}.button-unfilled-host--background-inverted.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-inverted-border-secondary);--ds-button-split-divider:var(--color-inverted-border-tertiary)}.button-unfilled-host--background-media.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-media-border-secondary);--ds-button-split-divider:var(--color-media-border-tertiary)}.button-unfilled-host--background-always-dark.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-always-dark-border-secondary);--ds-button-split-divider:var(--color-always-dark-border-tertiary)}.button-unfilled-host--background-chrome.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-chrome-border-secondary);--ds-button-split-divider:var(--color-chrome-divider)}.button-unfilled.sc-ds-button-unfilled{background:transparent;color:var(--ds-button-unfilled-fg)}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--background-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--background-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--background-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--background-translucent.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-translucent-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-translucent-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-translucent-translucent);--ds-button-unfilled-border:var(--color-translucent-border-secondary)}.button-unfilled--background-inverted.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-inverted-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-inverted-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-inverted-background);--ds-button-unfilled-border:var(--color-inverted-border-secondary)}.button-unfilled--background-media.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-media-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-media-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-media-background);--ds-button-unfilled-border:var(--color-media-border-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled--background-chrome.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-chrome-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-chrome-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-chrome-background-theme);--ds-button-unfilled-border:var(--color-chrome-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}`;const k=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=i(this,"dsClick",7);this.dsMenuClick=i(this,"dsMenuClick",7);this.dsChange=i(this,"dsChange",7);this.variant="label";this.size="md";this.isInset=false;this.insetDepth="single";this.width="hug";this.label="";this.labelEmphasis=true;this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.rounded=false;this.pressScale=true;this.dot=false;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.split=false;this.menuAriaLabel="More options";this.collapseLabel=false;this.hasMenu=false;this.captionCompact=false;this.buttonEl=null;this.menuButtonEl=null;this.hasLoaded=false;this.handleClick=n=>{if(this.isInactive||this.isLoading){n.preventDefault();n.stopPropagation();return}this.dsClick.emit(n);if(this.pressed!==undefined)this.dsChange.emit(!this.pressed)};this.handleMenuClick=n=>{if(this.isInactive||this.isLoading){n.preventDefault();n.stopPropagation();return}this.dsMenuClick.emit(n)}}componentDidLoad(){this.hasLoaded=true;this.syncCaptionCompactObserver()}connectedCallback(){if(this.hasLoaded)this.syncCaptionCompactObserver()}disconnectedCallback(){this.disconnectCaptionCompactObserver()}onCollapseLabelChange(){this.syncCaptionCompactObserver()}async setFocus(n="primary"){(n==="menu"?this.menuButtonEl:this.buttonEl)?.focus()}get captionIconOnly(){return this.collapseLabel&&this.captionCompact&&this.variant==="icon-label"&&Boolean(this.icon)}get visualVariant(){return this.captionIconOnly?"icon":this.variant}get showDot(){return this.variant==="icon"&&this.dot&&!this.isLoading}syncCaptionCompactObserver(){this.disconnectCaptionCompactObserver();if(!this.collapseLabel){if(this.captionCompact)this.captionCompact=false;return}this.captionCompactDisconnect=p(this.el,(n=>{if(this.captionCompact!==n)this.captionCompact=n}))}disconnectCaptionCompactObserver(){this.captionCompactDisconnect?.();this.captionCompactDisconnect=undefined}get resolvedHaspopup(){return this.haspopup??(this.hasMenu?"menu":undefined)}get doubleInset(){return this.isInset&&this.insetDepth==="double"&&this.size!=="xs"}get resolvedSurfaceOpen(){const n=this.expanded===true&&(this.split||this.resolvedHaspopup!==undefined);return(this.surfaceOpen??n)&&!this.isInactive}get visuallyActive(){return this.isActive||this.pressed===true}get dotRing(){if((this.isActive||this.pressed===true)&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}buttonClass(n,t,i){const o=this.background;const s={"button-unfilled":true,"ds-button":true,"ds-focus-ring-inset":true,"ds-control-press-scale":this.pressScale&&!this.split,"ds-interaction-fill":true,"ds-interaction-fill--selected":(this.isActive||this.pressed===true)&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-faint":o==="faint","ds-interaction-fill--on-medium":o==="medium","ds-interaction-fill--on-bold":o==="bold","ds-interaction-fill--on-strong":o==="strong","ds-interaction-fill--on-translucent":o==="translucent","ds-interaction-fill--on-inverted":o==="inverted","ds-interaction-fill--on-media":o==="media","ds-interaction-fill--on-always-dark":o==="always-dark","ds-interaction-fill--on-chrome":o==="chrome","button-unfilled--active":this.visuallyActive,"button-unfilled--expanded":t,"ds-interaction-fill--surface-open":t,"ds-button--expanded":t,"button-unfilled--bordered":i,"ds-button--bordered":i,"button-unfilled--rounded":this.rounded,"ds-button--rounded":this.rounded,"ds-control-inactive":this.isInactive,"ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,"ds-control-frame":true,"button-unfilled--icon":n==="icon","ds-button--icon":n==="icon","button-unfilled--label":n==="label","button-unfilled--icon-label":n==="icon-label","button-unfilled--background-faint":o==="faint","button-unfilled--background-medium":o==="medium","button-unfilled--background-bold":o==="bold","button-unfilled--background-strong":o==="strong","button-unfilled--background-translucent":o==="translucent","button-unfilled--background-inverted":o==="inverted","button-unfilled--background-media":o==="media","button-unfilled--on-always-dark":o==="always-dark","button-unfilled--background-chrome":o==="chrome"};return s}render(){const n=o("button",{key:"f4de57793646de4d1fff4e5c51c365da2f069f4c",ref:n=>{this.buttonEl=n??null},type:this.type,class:{...this.buttonClass(this.visualVariant,!this.split&&this.resolvedSurfaceOpen,this.hasBorder&&!this.split),"ds-button-split__primary":this.split},disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,"aria-controls":this.split?undefined:this.controls,"aria-expanded":this.split||this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.split?undefined:this.resolvedHaspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onPointerDown:n=>r(n,this.pressScale&&!this.split&&!this.isInactive&&!this.isLoading),onClick:this.handleClick},d({namespace:"button-unfilled",variant:this.visualVariant,size:this.size,label:this.label,labelEmphasis:this.labelEmphasis,icon:this.icon,hasMenu:!this.split&&this.hasMenu,isLoading:this.isLoading,dot:{visible:this.showDot,background:this.dotRing}}));const t=this.split?o("div",{class:{"ds-button-split":true,"ds-button-split--rounded":this.rounded}},n,o("span",{class:{"ds-button-split__divider":true,"ds-button-split__divider--content-height":!this.hasBorder},"aria-hidden":"true"}),o("button",{ref:n=>{this.menuButtonEl=n??null},class:{...this.buttonClass("icon",this.resolvedSurfaceOpen,false),"ds-button-split__menu":true},type:"button",disabled:this.isInactive||this.isLoading,tabIndex:this.focusTabIndex??0,"aria-label":this.menuAriaLabel,"aria-controls":this.controls,"aria-expanded":String(this.expanded===true),"aria-haspopup":"menu",onClick:this.handleMenuClick},d({namespace:"button-unfilled",variant:"icon",size:this.size,label:"",labelEmphasis:true,icon:"ChevronDown",hasMenu:false,isLoading:false})),this.hasBorder?o("span",{class:"ds-button-split__outline","aria-hidden":"true"}):null):n;return o(s,{key:"1d5e2d228dfb8bd2d7cae1a4f4cab466d2b3ae5a",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.visualVariant==="icon"&&!this.split,"ds-button-host--icon":this.visualVariant==="icon"&&!this.split,"ds-button-split-host":this.split,"ds-button-split-host--primary-icon":this.split&&this.visualVariant==="icon",[`button-unfilled-host--background-${this.background}`]:this.split&&this.background!==undefined,"ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,"ds-table-caption-control":this.collapseLabel,"ds-table-caption-control--compact":this.captionIconOnly,...b(this.width)},tabIndex:-1},this.collapseLabel?o("ds-tooltip",{label:this.captionIconOnly?this.label||this.accessibleName||"":"",side:"top",size:"sm"},t):t)}get el(){return this}static get watchers(){return{collapseLabel:[{onCollapseLabelChange:0}]}}static get style(){return m()}},[2,"ds-button-unfilled",{variant:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],width:[1],label:[1],labelEmphasis:[4,"label-emphasis"],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],rounded:[4],pressScale:[4,"press-scale"],dot:[4],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],surfaceOpen:[4,"surface-open"],haspopup:[1],split:[4],menuAriaLabel:[1,"menu-aria-label"],pressed:[4],collapseLabel:[516,"collapse-label"],hasMenu:[4,"has-menu"],focusTabIndex:[2,"tab-index"],captionCompact:[32],setFocus:[64]},undefined,{collapseLabel:[{onCollapseLabelChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-loader","ds-text","ds-tooltip"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(e(n))){customElements.define(e(n),k)}break;case"ds-badge":if(!customElements.get(e(n))){l()}break;case"ds-icon":if(!customElements.get(e(n))){a()}break;case"ds-loader":if(!customElements.get(e(n))){c()}break;case"ds-text":if(!customElements.get(e(n))){u()}break;case"ds-tooltip":if(!customElements.get(e(n))){f()}break}}))}y();export{k as B,y as d,p as o};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as n,H as t,c as o,h as i,a as s,t as e}from"./index.js";import{r as d,b as r}from"./p-DZ58Sg5a.js";import{d as l}from"./p-CwdRaJER.js";import{d as a}from"./p-pPtjNRqC.js";import{d as c}from"./p-0XTyQNRG.js";import{d as u}from"./p-D8OWhnID.js";import{d as f}from"./p-DvGrsLgt.js";import{c as b}from"./p-DuFm-ieS.js";const h=899;function v(n){return n>0&&n<=h}function g(n){return n.contentBoxSize[0]?.inlineSize??n.contentRect.width}function p(n,t){if(typeof ResizeObserver==="undefined"){t(false);return()=>undefined}const o=n.closest("ds-table")??n.closest("ds-data-toolbar");if(!o){t(false);return()=>undefined}const i=n=>{if(n<=0)return;t(v(n))};const s=new ResizeObserver((n=>{i(n[0]?g(n[0]):0)}));s.observe(o);i(o.clientWidth);return()=>s.disconnect()}const m=()=>`.sc-ds-button-unfilled-h,.sc-ds-button-unfilled:where(.ds-table),.sc-ds-button-unfilled:where(.tooltip-popup),.sc-ds-button-unfilled:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-button-unfilled-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-button-unfilled-h,.ds-focus-ring.sc-ds-button-unfilled,.ds-focus-ring-inset.sc-ds-button-unfilled-h,.ds-focus-ring-inset.sc-ds-button-unfilled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-unfilled-h:focus-visible,.ds-focus-ring.sc-ds-button-unfilled: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-button-unfilled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{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-button-unfilled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-unfilled: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-button-unfilled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-button-unfilled-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-button-unfilled-h::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-button-unfilled-h,.ds-interaction-fill--grouped.sc-ds-button-unfilled{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-button-unfilled-h,.ds-interaction-fill--on-faint.sc-ds-button-unfilled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--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-translucent.sc-ds-button-unfilled-h,.ds-interaction-fill--on-translucent.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-unfilled-h,.ds-interaction-fill--on-inverted.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-unfilled-h,.ds-interaction-fill--on-media.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-button-unfilled-h,.ds-interaction-fill--on-chrome.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--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-interaction-fill.ds-interaction-fill--surface-open.sc-ds-button-unfilled-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-button-unfilled:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-button-unfilled-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-button-unfilled:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-control-press-scale.sc-ds-button-unfilled{transition:scale var(--effect-motion-short-2)}.ds-control-press-scale.sc-ds-button-unfilled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:var(--ds-control-press-active-scale, var(--dimension-scale-subtle))}@media (prefers-reduced-motion: reduce){.ds-control-press-scale.sc-ds-button-unfilled,.ds-control-press-scale.sc-ds-button-unfilled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:none;transition:none}}@media (forced-colors: active){.sc-ds-button-unfilled:root,.sc-ds-button-unfilled-h,.ds-forced-colors-scope.sc-ds-button-unfilled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-button-unfilled,.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled,.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled,.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--lg.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--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--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--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--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--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:0}.ds-control--lg.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--lg.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-025))}.ds-control--md.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--md.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-025))}.ds-control--sm.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--sm.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-025))}.ds-control--xs.ds-control--inset.sc-ds-button-unfilled-h,.ds-control--xs.ds-control--inset.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-025) - var(--dimension-space-025))}.ds-control--lg.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--lg.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-050))}.ds-control--md.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--md.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-050))}.ds-control--sm.ds-control--inset-double.sc-ds-button-unfilled-h,.ds-control--sm.ds-control--inset-double.sc-ds-button-unfilled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-050))}.ds-control-frame.sc-ds-button-unfilled{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-button-unfilled{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-button-unfilled{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-button-unfilled{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-button-unfilled{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none}.ds-button-host--icon.ds-control-width--hug.sc-ds-button-unfilled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-button-host--icon.ds-control-width--fill.sc-ds-button-unfilled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-unfilled-h .ds-button.sc-ds-button-unfilled{width:100%}.ds-button.sc-ds-button-unfilled{justify-content:center;overflow:hidden;min-inline-size:var(--ds-control-height);border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));border-start-start-radius:var( --ds-button-radius-start-start, var(--ds-control-radius, var(--dimension-radius-025)) );border-start-end-radius:var( --ds-button-radius-start-end, var(--ds-control-radius, var(--dimension-radius-025)) );border-end-start-radius:var( --ds-button-radius-end-start, var(--ds-control-radius, var(--dimension-radius-025)) );border-end-end-radius:var( --ds-button-radius-end-end, var(--ds-control-radius, var(--dimension-radius-025)) );cursor:default;-webkit-user-select:none;user-select:none}.ds-button--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.ds-button--rounded.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-half)}.ds-button--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012)}.ds-button--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-button__icon-wrap.sc-ds-button-unfilled,.ds-button__label.sc-ds-button-unfilled,.ds-button__chevron.sc-ds-button-unfilled{position:relative;z-index:2}.ds-button__label.sc-ds-button-unfilled{flex-shrink:0;min-width:0;white-space:nowrap}.ds-button__label--loading.sc-ds-button-unfilled,.ds-button__chevron--loading.sc-ds-button-unfilled{visibility:hidden}.ds-button.sc-ds-button-unfilled>.ds-button__loader-overlay.sc-ds-button-unfilled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.ds-button__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}@media (forced-colors: active){.ds-button.sc-ds-button-unfilled{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}.ds-button-split.sc-ds-button-unfilled{position:relative;display:inline-flex;align-items:stretch;min-width:0;overflow:hidden;gap:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent}.ds-control-width--fill.sc-ds-button-unfilled-h .ds-button-split.sc-ds-button-unfilled{width:100%}.ds-button-split.sc-ds-button-unfilled>.ds-button-split__primary.sc-ds-button-unfilled{flex:1 1 auto;width:auto;min-width:0;border-start-end-radius:var(--dimension-radius-000);border-end-end-radius:var(--dimension-radius-000)}.ds-button-split.sc-ds-button-unfilled>.ds-button-split__menu.sc-ds-button-unfilled{flex:0 0 var(--ds-control-height);width:var(--ds-control-height);min-width:var(--ds-control-height);border-start-start-radius:var(--dimension-radius-000);border-end-start-radius:var(--dimension-radius-000)}.ds-button-split__divider.sc-ds-button-unfilled{position:relative;z-index:3;align-self:stretch;flex:0 0 0;margin-inline-start:calc(-1 * var(--dimension-stroke-width-012));border-inline-start:var(--dimension-stroke-width-012) solid var(--ds-button-split-divider);pointer-events:none}.ds-button-split__divider--content-height.sc-ds-button-unfilled{align-self:center;block-size:var(--ds-button-split-divider-content-height)}.ds-button-split__outline.sc-ds-button-unfilled{position:absolute;z-index:3;inset:0;border:var(--dimension-stroke-width-012) solid var(--ds-button-split-border);border-radius:inherit;pointer-events:none}.ds-control--lg.sc-ds-button-unfilled-h{--ds-button-split-divider-content-height:var(--dimension-size-300)}.ds-control--md.sc-ds-button-unfilled-h{--ds-button-split-divider-content-height:var(--dimension-size-250)}.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled-h{--ds-button-split-divider-content-height:var(--dimension-size-200)}.ds-button-split-host--primary-icon.ds-control-width--hug.sc-ds-button-unfilled-h .ds-button-split.sc-ds-button-unfilled>.ds-button-split__primary.sc-ds-button-unfilled{flex:0 0 var(--ds-control-height);width:var(--ds-control-height);min-width:var(--ds-control-height);height:var(--ds-control-height)}.ds-button-split--rounded.sc-ds-button-unfilled{border-radius:var(--dimension-radius-half)}.ds-table-caption-control.sc-ds-button-unfilled-h{--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs)}.ds-table-caption-control.ds-table-caption-control--compact.sc-ds-button-unfilled-h{flex:0 0 auto;width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400));max-width:var(--ds-control-height, var(--dimension-size-400));inline-size:var(--ds-control-height, var(--dimension-size-400));min-inline-size:var(--ds-control-height, var(--dimension-size-400));max-inline-size:var(--ds-control-height, var(--dimension-size-400))}.ds-table-caption-control.ds-table-caption-control--compact.sc-ds-button-unfilled-h .trigger.sc-ds-button-unfilled{justify-content:center;inline-size:100%;min-inline-size:100%;height:100%;padding-inline:0}.ds-table-caption-control.ds-table-caption-control--compact.sc-ds-button-unfilled-h .trigger--has-value.sc-ds-button-unfilled:not(.trigger--label-placeholder){--ds-select-prefix-fg:var(--ds-select-fg-active)}.sc-ds-button-unfilled-h{--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary);--ds-button-split-border:var(--color-border-secondary);--ds-button-split-divider:var(--color-border-tertiary)}.button-unfilled-host--background-medium.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-border-on-medium-background-secondary);--ds-button-split-divider:var(--color-border-on-medium-background-tertiary)}.button-unfilled-host--background-bold.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-border-on-bold-background-secondary);--ds-button-split-divider:var(--color-border-on-bold-background-tertiary)}.button-unfilled-host--background-strong.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-border-on-strong-background-secondary);--ds-button-split-divider:var(--color-border-on-strong-background-tertiary)}.button-unfilled-host--background-translucent.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-translucent-border-secondary);--ds-button-split-divider:var(--color-translucent-border-tertiary)}.button-unfilled-host--background-inverted.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-inverted-border-secondary);--ds-button-split-divider:var(--color-inverted-border-tertiary)}.button-unfilled-host--background-media.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-media-border-secondary);--ds-button-split-divider:var(--color-media-border-tertiary)}.button-unfilled-host--background-always-dark.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-always-dark-border-secondary);--ds-button-split-divider:var(--color-always-dark-border-tertiary)}.button-unfilled-host--background-chrome.sc-ds-button-unfilled-h{--ds-button-split-border:var(--color-chrome-border-secondary);--ds-button-split-divider:var(--color-chrome-divider)}.button-unfilled.sc-ds-button-unfilled{background:transparent;color:var(--ds-button-unfilled-fg)}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--background-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--background-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--background-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--background-translucent.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-translucent-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-translucent-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-translucent-translucent);--ds-button-unfilled-border:var(--color-translucent-border-secondary)}.button-unfilled--background-inverted.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-inverted-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-inverted-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-inverted-background);--ds-button-unfilled-border:var(--color-inverted-border-secondary)}.button-unfilled--background-media.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-media-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-media-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-media-background);--ds-button-unfilled-border:var(--color-media-border-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled--background-chrome.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-chrome-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-chrome-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-chrome-background-theme);--ds-button-unfilled-border:var(--color-chrome-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}`;const k=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick",7);this.dsMenuClick=o(this,"dsMenuClick",7);this.dsChange=o(this,"dsChange",7);this.variant="label";this.size="md";this.isInset=false;this.insetDepth="single";this.width="hug";this.label="";this.labelEmphasis=true;this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.rounded=false;this.pressScale=true;this.dot=false;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.split=false;this.menuAriaLabel="More options";this.collapseLabel=false;this.hasMenu=false;this.captionCompact=false;this.buttonEl=null;this.menuButtonEl=null;this.hasLoaded=false;this.handleClick=n=>{if(this.isInactive||this.isLoading){n.preventDefault();n.stopPropagation();return}this.dsClick.emit(n);if(this.pressed!==undefined)this.dsChange.emit(!this.pressed)};this.handleMenuClick=n=>{if(this.isInactive||this.isLoading){n.preventDefault();n.stopPropagation();return}this.dsMenuClick.emit(n)}}componentDidLoad(){this.hasLoaded=true;this.syncCaptionCompactObserver()}connectedCallback(){if(this.hasLoaded)this.syncCaptionCompactObserver()}disconnectedCallback(){this.disconnectCaptionCompactObserver()}onCollapseLabelChange(){this.syncCaptionCompactObserver()}async setFocus(n="primary"){(n==="menu"?this.menuButtonEl:this.buttonEl)?.focus()}get captionIconOnly(){return this.collapseLabel&&this.captionCompact&&this.variant==="icon-label"&&Boolean(this.icon)}get visualVariant(){return this.captionIconOnly?"icon":this.variant}get showDot(){return this.variant==="icon"&&this.dot&&!this.isLoading}syncCaptionCompactObserver(){this.disconnectCaptionCompactObserver();if(!this.collapseLabel){if(this.captionCompact)this.captionCompact=false;return}this.captionCompactDisconnect=p(this.el,(n=>{if(this.captionCompact!==n)this.captionCompact=n}))}disconnectCaptionCompactObserver(){this.captionCompactDisconnect?.();this.captionCompactDisconnect=undefined}get resolvedHaspopup(){return this.haspopup??(this.hasMenu?"menu":undefined)}get doubleInset(){return this.isInset&&this.insetDepth==="double"&&this.size!=="xs"}get resolvedSurfaceOpen(){const n=this.expanded===true&&(this.split||this.resolvedHaspopup!==undefined);return(this.surfaceOpen??n)&&!this.isInactive}get visuallyActive(){return this.isActive||this.pressed===true}get dotRing(){if((this.isActive||this.pressed===true)&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}buttonClass(n,t,o){const i=this.background;const s={"button-unfilled":true,"ds-button":true,"ds-focus-ring-inset":true,"ds-control-press-scale":this.pressScale&&!this.split,"ds-interaction-fill":true,"ds-interaction-fill--selected":(this.isActive||this.pressed===true)&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-faint":i==="faint","ds-interaction-fill--on-medium":i==="medium","ds-interaction-fill--on-bold":i==="bold","ds-interaction-fill--on-strong":i==="strong","ds-interaction-fill--on-translucent":i==="translucent","ds-interaction-fill--on-inverted":i==="inverted","ds-interaction-fill--on-media":i==="media","ds-interaction-fill--on-always-dark":i==="always-dark","ds-interaction-fill--on-chrome":i==="chrome","button-unfilled--active":this.visuallyActive,"button-unfilled--expanded":t,"ds-interaction-fill--surface-open":t,"ds-button--expanded":t,"button-unfilled--bordered":o,"ds-button--bordered":o,"button-unfilled--rounded":this.rounded,"ds-button--rounded":this.rounded,"ds-control-inactive":this.isInactive,"ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,"ds-control-frame":true,"button-unfilled--icon":n==="icon","ds-button--icon":n==="icon","button-unfilled--label":n==="label","button-unfilled--icon-label":n==="icon-label","button-unfilled--background-faint":i==="faint","button-unfilled--background-medium":i==="medium","button-unfilled--background-bold":i==="bold","button-unfilled--background-strong":i==="strong","button-unfilled--background-translucent":i==="translucent","button-unfilled--background-inverted":i==="inverted","button-unfilled--background-media":i==="media","button-unfilled--on-always-dark":i==="always-dark","button-unfilled--background-chrome":i==="chrome"};return s}render(){const n=i("button",{key:"f4de57793646de4d1fff4e5c51c365da2f069f4c",ref:n=>{this.buttonEl=n??null},type:this.type,class:{...this.buttonClass(this.visualVariant,!this.split&&this.resolvedSurfaceOpen,this.hasBorder&&!this.split),"ds-button-split__primary":this.split},disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,"aria-controls":this.split?undefined:this.controls,"aria-expanded":this.split||this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.split?undefined:this.resolvedHaspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onPointerDown:n=>r(n,this.pressScale&&!this.split&&!this.isInactive&&!this.isLoading),onClick:this.handleClick},d({namespace:"button-unfilled",variant:this.visualVariant,size:this.size,label:this.label,labelEmphasis:this.labelEmphasis,icon:this.icon,hasMenu:!this.split&&this.hasMenu,isLoading:this.isLoading,dot:{visible:this.showDot,background:this.dotRing}}));const t=this.split?i("div",{class:{"ds-button-split":true,"ds-button-split--rounded":this.rounded}},n,i("span",{class:{"ds-button-split__divider":true,"ds-button-split__divider--content-height":!this.hasBorder},"aria-hidden":"true"}),i("button",{ref:n=>{this.menuButtonEl=n??null},class:{...this.buttonClass("icon",this.resolvedSurfaceOpen,false),"ds-button-split__menu":true},type:"button",disabled:this.isInactive||this.isLoading,tabIndex:this.focusTabIndex??0,"aria-label":this.menuAriaLabel,"aria-controls":this.controls,"aria-expanded":String(this.expanded===true),"aria-haspopup":"menu",onClick:this.handleMenuClick},d({namespace:"button-unfilled",variant:"icon",size:this.size,label:"",labelEmphasis:true,icon:"ChevronDown",hasMenu:false,isLoading:false})),this.hasBorder?i("span",{class:"ds-button-split__outline","aria-hidden":"true"}):null):n;return i(s,{key:"1d5e2d228dfb8bd2d7cae1a4f4cab466d2b3ae5a",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.visualVariant==="icon"&&!this.split,"ds-button-host--icon":this.visualVariant==="icon"&&!this.split,"ds-button-split-host":this.split,"ds-button-split-host--primary-icon":this.split&&this.visualVariant==="icon",[`button-unfilled-host--background-${this.background}`]:this.split&&this.background!==undefined,"ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,"ds-table-caption-control":this.collapseLabel,"ds-table-caption-control--compact":this.captionIconOnly,...b(this.width)},tabIndex:-1},this.collapseLabel?i("ds-tooltip",{label:this.captionIconOnly?this.label||this.accessibleName||"":"",side:"top",size:"sm"},t):t)}get el(){return this}static get watchers(){return{collapseLabel:[{onCollapseLabelChange:0}]}}static get style(){return m()}},[2,"ds-button-unfilled",{variant:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],width:[1],label:[1],labelEmphasis:[4,"label-emphasis"],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],rounded:[4],pressScale:[4,"press-scale"],dot:[4],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],surfaceOpen:[4,"surface-open"],haspopup:[1],split:[4],menuAriaLabel:[1,"menu-aria-label"],pressed:[4],collapseLabel:[516,"collapse-label"],hasMenu:[4,"has-menu"],focusTabIndex:[2,"tab-index"],captionCompact:[32],setFocus:[64]},undefined,{collapseLabel:[{onCollapseLabelChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-loader","ds-text","ds-tooltip"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(e(n))){customElements.define(e(n),k)}break;case"ds-badge":if(!customElements.get(e(n))){l()}break;case"ds-icon":if(!customElements.get(e(n))){a()}break;case"ds-loader":if(!customElements.get(e(n))){c()}break;case"ds-text":if(!customElements.get(e(n))){u()}break;case"ds-tooltip":if(!customElements.get(e(n))){f()}break}}))}y();export{k as B,y as d,p as o};
|
|
2
|
+
//# sourceMappingURL=p-BLeHHoVb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["TABLE_CAPTION_COMPACT_MAX_PX","isTableCaptionCompact","width","tableCaptionInlineSize","entry","contentBoxSize","inlineSize","contentRect","observeTableCaptionCompact","host","onChange","ResizeObserver","undefined","owner","closest","sync","observer","entries","observe","clientWidth","disconnect","buttonUnfilledCss","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","isInset","insetDepth","label","labelEmphasis","icon","isActive","activeFill","hasBorder","rounded","pressScale","dot","isInactive","isLoading","type","ariaLabel","split","menuAriaLabel","collapseLabel","hasMenu","captionCompact","buttonEl","menuButtonEl","hasLoaded","handleClick","event","preventDefault","stopPropagation","dsClick","emit","pressed","dsChange","handleMenuClick","dsMenuClick","componentDidLoad","syncCaptionCompactObserver","connectedCallback","disconnectedCallback","disconnectCaptionCompactObserver","onCollapseLabelChange","setFocus","segment","focus","captionIconOnly","Boolean","visualVariant","showDot","captionCompactDisconnect","el","compact","resolvedHaspopup","haspopup","doubleInset","resolvedSurfaceOpen","legacy","expanded","surfaceOpen","visuallyActive","dotRing","accessibleName","buttonClass","bordered","bg","background","cls","render","primaryButton","h","key","ref","class","disabled","tabIndex","focusTabIndex","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace","visible","control","Host","controlWidthClass","side"],"sources":["src/wc/utils/table-caption-compact.ts","src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["/** Shared compact breakpoint for table captions and standalone data toolbars. */\nexport const TABLE_CAPTION_COMPACT_MAX_PX = 899;\n\nexport function isTableCaptionCompact(width: number): boolean {\n return width > 0 && width <= TABLE_CAPTION_COMPACT_MAX_PX;\n}\n\nexport function tableCaptionInlineSize(entry: ResizeObserverEntry): number {\n return entry.contentBoxSize[0]?.inlineSize ?? entry.contentRect.width;\n}\n\nexport function observeTableCaptionCompact(\n host: HTMLElement,\n onChange: (compact: boolean) => void\n): () => void {\n if (typeof ResizeObserver === 'undefined') {\n onChange(false);\n return () => undefined;\n }\n\n // Table captions own the complete control row; their slotted toolbar uses\n // display: contents and has no measurable box. Standalone toolbars own theirs.\n const owner = host.closest('ds-table') ?? host.closest('ds-data-toolbar');\n if (!owner) {\n onChange(false);\n return () => undefined;\n }\n\n const sync = (width: number) => {\n if (width <= 0) return;\n onChange(isTableCaptionCompact(width));\n };\n\n const observer = new ResizeObserver(entries => {\n sync(entries[0] ? tableCaptionInlineSize(entries[0]) : 0);\n });\n observer.observe(owner);\n sync(owner.clientWidth);\n return () => observer.disconnect();\n}\n","@import '../../utils/radius.css';\n@import '../../utils/button-base.css';\n@import '../../utils/button-split.css';\n@import '../../utils/table-caption-control.css';\n\n:host {\n --ds-button-unfilled-fg: var(--color-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n --ds-button-unfilled-border: var(--color-border-secondary);\n --ds-button-split-border: var(--color-border-secondary);\n --ds-button-split-divider: var(--color-border-tertiary);\n}\n\n:host(.button-unfilled-host--background-medium) {\n --ds-button-split-border: var(--color-border-on-medium-background-secondary);\n --ds-button-split-divider: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.button-unfilled-host--background-bold) {\n --ds-button-split-border: var(--color-border-on-bold-background-secondary);\n --ds-button-split-divider: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.button-unfilled-host--background-strong) {\n --ds-button-split-border: var(--color-border-on-strong-background-secondary);\n --ds-button-split-divider: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.button-unfilled-host--background-translucent) {\n --ds-button-split-border: var(--color-translucent-border-secondary);\n --ds-button-split-divider: var(--color-translucent-border-tertiary);\n}\n\n:host(.button-unfilled-host--background-inverted) {\n --ds-button-split-border: var(--color-inverted-border-secondary);\n --ds-button-split-divider: var(--color-inverted-border-tertiary);\n}\n\n:host(.button-unfilled-host--background-media) {\n --ds-button-split-border: var(--color-media-border-secondary);\n --ds-button-split-divider: var(--color-media-border-tertiary);\n}\n\n:host(.button-unfilled-host--background-always-dark) {\n --ds-button-split-border: var(--color-always-dark-border-secondary);\n --ds-button-split-divider: var(--color-always-dark-border-tertiary);\n}\n\n:host(.button-unfilled-host--background-chrome) {\n --ds-button-split-border: var(--color-chrome-border-secondary);\n --ds-button-split-divider: var(--color-chrome-divider);\n}\n\n.button-unfilled {\n background: transparent;\n color: var(--ds-button-unfilled-fg);\n /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n Active foreground changes remain independent from popup-open pressed paint. */\n}\n\n.button-unfilled--active {\n color: var(--ds-button-unfilled-fg-active);\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. Keep the\n * pressed wash visible for the popup's complete rendered lifecycle without\n * promoting the resting foreground or selected fill.\n */\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-media-background);\n --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n.button-unfilled--background-chrome {\n --ds-button-unfilled-fg: var(--color-chrome-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-chrome-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-chrome-background-theme);\n --ds-button-unfilled-border: var(--color-chrome-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\nimport type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';\n\nexport type ButtonUnfilledBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark'\n | 'chrome';\n\nexport type ButtonUnfilledVariant = ButtonVariant;\nexport type ButtonUnfilledSize = ButtonSize;\nexport type ButtonUnfilledWidth = ButtonWidth;\nexport type ButtonUnfilledPopup = ButtonPopup;\n\n@Component({\n tag: 'ds-button-unfilled',\n styleUrl: 'ButtonUnfilled.css',\n scoped: true,\n})\nexport class ButtonUnfilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonUnfilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonUnfilledSize = 'md';\n\n /** Use reduced outer geometry when nested inside a control of the same size. */\n @Prop() isInset: boolean = false;\n\n /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n @Prop() insetDepth: ControlInsetDepth = 'single';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonUnfilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Whether the visible label uses the emphasized weight. */\n @Prop() labelEmphasis: boolean = true;\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /**\n * Owner-controlled visual emphasis inside a composite. This does not add\n * toggle semantics and does not emit dsChange.\n */\n @Prop() isActive: boolean = false;\n\n /**\n * When active, render the selected interaction fill.\n * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n * `false` so selection is foreground-only (primary color, no fill).\n */\n @Prop() activeFill: boolean = true;\n\n /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n @Prop() hasBorder: boolean = true;\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /**\n * Scale down during a physical pointer press.\n * Disable when an owning composite requires fixed child or background geometry.\n */\n @Prop() pressScale: boolean = true;\n\n /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n @Prop() dot: boolean = false;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * Actual parent surface context. Omit on primary and secondary surfaces; use\n * chrome for shell surfaces.\n */\n @Prop() background: ButtonUnfilledBackground | undefined;\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop() controls: string | undefined;\n /**\n * Controlled disclosure state forwarded to aria-expanded.\n * Using expanded alone for surface-open styling is deprecated; set surfaceOpen\n * explicitly to separate the rendered surface lifecycle from disclosure state.\n */\n @Prop() expanded: boolean | undefined;\n\n /**\n * The associated menu, picker, or panel is visible, including its exit motion.\n * Holds only the pressed wash; does not set ARIA, selection, or press scaling.\n * In split mode this applies only to the menu segment. Explicit false disables\n * the legacy expanded-derived wash; omission preserves that compatibility path.\n */\n @Prop() surfaceOpen: boolean | undefined;\n @Prop() haspopup: ButtonUnfilledPopup | undefined;\n\n /**\n * Append a separate ChevronDown menu segment while preserving this button's\n * variant, size, surface, active, loading, border, and width treatment.\n */\n @Prop() split: boolean = false;\n\n /** Accessible name for the appended menu segment in split mode. */\n @Prop() menuAriaLabel: string = 'More options';\n\n /**\n * Controlled state for a genuine toggle button. Adds aria-pressed, promotes\n * active styling, and makes activation emit dsChange with the requested state.\n */\n @Prop() pressed: boolean | undefined;\n\n /**\n * Collapse the visible label and chevron to an icon-only control when the\n * owning `ds-table` caption is narrower than 900px. The trigger omits those\n * parts rather than clipping them.\n */\n @Prop({ reflect: true }) collapseLabel: boolean = false;\n\n /**\n * Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\n * both menu-button shapes:\n *\n * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n * the affordance.\n * - `icon` — the button *is* a menu. No chevron is added, so the glyph must\n * convey the menu on its own. Use `Ellipses` for generic more-options;\n * use a specific icon when the menu has a named purpose, such as\n * `Table` for Customize table.\n *\n * Use `haspopup` directly for non-menu popups.\n */\n @Prop() hasMenu: boolean = false;\n\n /**\n * Native `tabindex` for roving keyboard groups in shell chrome.\n * Omit for the default button tab stop (`0`).\n */\n @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n @Event() dsMenuClick!: EventEmitter<MouseEvent>;\n @Event() dsChange!: EventEmitter<boolean>;\n\n @State() private captionCompact = false;\n\n private buttonEl: HTMLButtonElement | null = null;\n private menuButtonEl: HTMLButtonElement | null = null;\n private captionCompactDisconnect: (() => void) | undefined;\n private hasLoaded = false;\n\n componentDidLoad(): void {\n this.hasLoaded = true;\n this.syncCaptionCompactObserver();\n }\n\n connectedCallback(): void {\n if (this.hasLoaded) this.syncCaptionCompactObserver();\n }\n\n disconnectedCallback(): void {\n this.disconnectCaptionCompactObserver();\n }\n\n @Watch('collapseLabel')\n onCollapseLabelChange() {\n this.syncCaptionCompactObserver();\n }\n\n @Method()\n async setFocus(segment: 'primary' | 'menu' = 'primary') {\n (segment === 'menu' ? this.menuButtonEl : this.buttonEl)?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsClick.emit(event);\n if (this.pressed !== undefined) this.dsChange.emit(!this.pressed);\n };\n\n private handleMenuClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsMenuClick.emit(event);\n };\n\n private get captionIconOnly(): boolean {\n return (\n this.collapseLabel &&\n this.captionCompact &&\n this.variant === 'icon-label' &&\n Boolean(this.icon)\n );\n }\n\n private get visualVariant(): ButtonUnfilledVariant {\n return this.captionIconOnly ? 'icon' : this.variant;\n }\n\n private get showDot(): boolean {\n return this.variant === 'icon' && this.dot && !this.isLoading;\n }\n\n private syncCaptionCompactObserver(): void {\n this.disconnectCaptionCompactObserver();\n if (!this.collapseLabel) {\n if (this.captionCompact) this.captionCompact = false;\n return;\n }\n this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n if (this.captionCompact !== compact) this.captionCompact = compact;\n });\n }\n\n private disconnectCaptionCompactObserver(): void {\n this.captionCompactDisconnect?.();\n this.captionCompactDisconnect = undefined;\n }\n\n private get resolvedHaspopup(): ButtonUnfilledPopup | undefined {\n return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n }\n\n private get doubleInset(): boolean {\n return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n }\n\n private get resolvedSurfaceOpen(): boolean {\n const legacy = this.expanded === true && (this.split || this.resolvedHaspopup !== undefined);\n return (this.surfaceOpen ?? legacy) && !this.isInactive;\n }\n\n private get visuallyActive(): boolean {\n return this.isActive || this.pressed === true;\n }\n\n /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n private get dotRing(): string {\n if ((this.isActive || this.pressed === true) && this.activeFill) {\n return 'var(--ds-interaction-active)';\n }\n return 'var(--ds-button-unfilled-dot-ring)';\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n private buttonClass(\n variant: ButtonUnfilledVariant,\n expanded: boolean,\n bordered: boolean\n ): Record<string, boolean> {\n const bg = this.background;\n const cls: Record<string, boolean> = {\n 'button-unfilled': true,\n 'ds-button': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-press-scale': this.pressScale && !this.split,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected':\n (this.isActive || this.pressed === true) && this.activeFill && !this.isInactive,\n 'ds-interaction-fill--on-faint': bg === 'faint',\n 'ds-interaction-fill--on-medium': bg === 'medium',\n 'ds-interaction-fill--on-bold': bg === 'bold',\n 'ds-interaction-fill--on-strong': bg === 'strong',\n 'ds-interaction-fill--on-translucent': bg === 'translucent',\n 'ds-interaction-fill--on-inverted': bg === 'inverted',\n 'ds-interaction-fill--on-media': bg === 'media',\n 'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n 'ds-interaction-fill--on-chrome': bg === 'chrome',\n 'button-unfilled--active': this.visuallyActive,\n 'button-unfilled--expanded': expanded,\n 'ds-interaction-fill--surface-open': expanded,\n 'ds-button--expanded': expanded,\n 'button-unfilled--bordered': bordered,\n 'ds-button--bordered': bordered,\n 'button-unfilled--rounded': this.rounded,\n 'ds-button--rounded': this.rounded,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-control-frame': true,\n 'button-unfilled--icon': variant === 'icon',\n 'ds-button--icon': variant === 'icon',\n 'button-unfilled--label': variant === 'label',\n 'button-unfilled--icon-label': variant === 'icon-label',\n 'button-unfilled--background-faint': bg === 'faint',\n 'button-unfilled--background-medium': bg === 'medium',\n 'button-unfilled--background-bold': bg === 'bold',\n 'button-unfilled--background-strong': bg === 'strong',\n 'button-unfilled--background-translucent': bg === 'translucent',\n 'button-unfilled--background-inverted': bg === 'inverted',\n 'button-unfilled--background-media': bg === 'media',\n 'button-unfilled--on-always-dark': bg === 'always-dark',\n 'button-unfilled--background-chrome': bg === 'chrome',\n };\n return cls;\n }\n\n render() {\n const primaryButton = (\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={{\n ...this.buttonClass(\n this.visualVariant,\n !this.split && this.resolvedSurfaceOpen,\n this.hasBorder && !this.split\n ),\n 'ds-button-split__primary': this.split,\n }}\n disabled={this.isInactive}\n tabIndex={this.focusTabIndex ?? 0}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-disabled={this.isLoading ? 'true' : undefined}\n aria-controls={this.split ? undefined : this.controls}\n aria-expanded={\n this.split || this.expanded === undefined ? undefined : String(this.expanded)\n }\n aria-haspopup={this.split ? undefined : this.resolvedHaspopup}\n aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n onPointerDown={event =>\n beginElevatedControlPress(\n event,\n this.pressScale && !this.split && !this.isInactive && !this.isLoading\n )\n }\n onClick={this.handleClick}\n >\n {renderButtonContent({\n namespace: 'button-unfilled',\n variant: this.visualVariant,\n size: this.size,\n label: this.label,\n labelEmphasis: this.labelEmphasis,\n icon: this.icon,\n hasMenu: !this.split && this.hasMenu,\n isLoading: this.isLoading,\n dot: {\n visible: this.showDot,\n background: this.dotRing,\n },\n })}\n </button>\n );\n\n const control = this.split ? (\n <div\n class={{\n 'ds-button-split': true,\n 'ds-button-split--rounded': this.rounded,\n }}\n >\n {primaryButton}\n <span\n class={{\n 'ds-button-split__divider': true,\n 'ds-button-split__divider--content-height': !this.hasBorder,\n }}\n aria-hidden=\"true\"\n />\n <button\n ref={el => {\n this.menuButtonEl = el ?? null;\n }}\n class={{\n ...this.buttonClass('icon', this.resolvedSurfaceOpen, false),\n 'ds-button-split__menu': true,\n }}\n type=\"button\"\n disabled={this.isInactive || this.isLoading}\n tabIndex={this.focusTabIndex ?? 0}\n aria-label={this.menuAriaLabel}\n aria-controls={this.controls}\n aria-expanded={String(this.expanded === true)}\n aria-haspopup=\"menu\"\n onClick={this.handleMenuClick}\n >\n {renderButtonContent({\n namespace: 'button-unfilled',\n variant: 'icon',\n size: this.size,\n label: '',\n labelEmphasis: true,\n icon: 'ChevronDown',\n hasMenu: false,\n isLoading: false,\n })}\n </button>\n {this.hasBorder ? <span class=\"ds-button-split__outline\" aria-hidden=\"true\" /> : null}\n </div>\n ) : (\n primaryButton\n );\n\n return (\n <Host\n class={{\n 'button-unfilled-host': true,\n 'button-unfilled-host--icon': this.visualVariant === 'icon' && !this.split,\n 'ds-button-host--icon': this.visualVariant === 'icon' && !this.split,\n 'ds-button-split-host': this.split,\n 'ds-button-split-host--primary-icon': this.split && this.visualVariant === 'icon',\n [`button-unfilled-host--background-${this.background}`]:\n this.split && this.background !== undefined,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-table-caption-control': this.collapseLabel,\n 'ds-table-caption-control--compact': this.captionIconOnly,\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n {this.collapseLabel ? (\n <ds-tooltip\n label={this.captionIconOnly ? this.label || this.accessibleName || '' : ''}\n side=\"top\"\n size=\"sm\"\n >\n {control}\n </ds-tooltip>\n ) : (\n control\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["TABLE_CAPTION_COMPACT_MAX_PX","isTableCaptionCompact","width","tableCaptionInlineSize","entry","contentBoxSize","inlineSize","contentRect","observeTableCaptionCompact","host","onChange","ResizeObserver","undefined","owner","closest","sync","observer","entries","observe","clientWidth","disconnect","buttonUnfilledCss","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","isInset","insetDepth","label","labelEmphasis","icon","isActive","activeFill","hasBorder","rounded","pressScale","dot","isInactive","isLoading","type","ariaLabel","split","menuAriaLabel","collapseLabel","hasMenu","captionCompact","buttonEl","menuButtonEl","hasLoaded","handleClick","event","preventDefault","stopPropagation","dsClick","emit","pressed","dsChange","handleMenuClick","dsMenuClick","componentDidLoad","syncCaptionCompactObserver","connectedCallback","disconnectedCallback","disconnectCaptionCompactObserver","onCollapseLabelChange","setFocus","segment","focus","captionIconOnly","Boolean","visualVariant","showDot","captionCompactDisconnect","el","compact","resolvedHaspopup","haspopup","doubleInset","resolvedSurfaceOpen","legacy","expanded","surfaceOpen","visuallyActive","dotRing","accessibleName","buttonClass","bordered","bg","background","cls","render","primaryButton","h","key","ref","class","disabled","tabIndex","focusTabIndex","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace","visible","control","Host","controlWidthClass","side"],"sources":["src/wc/utils/table-caption-compact.ts","src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["/** Shared compact breakpoint for table captions and standalone data toolbars. */\nexport const TABLE_CAPTION_COMPACT_MAX_PX = 899;\n\nexport function isTableCaptionCompact(width: number): boolean {\n return width > 0 && width <= TABLE_CAPTION_COMPACT_MAX_PX;\n}\n\nexport function tableCaptionInlineSize(entry: ResizeObserverEntry): number {\n return entry.contentBoxSize[0]?.inlineSize ?? entry.contentRect.width;\n}\n\nexport function observeTableCaptionCompact(\n host: HTMLElement,\n onChange: (compact: boolean) => void\n): () => void {\n if (typeof ResizeObserver === 'undefined') {\n onChange(false);\n return () => undefined;\n }\n\n // Table captions own the complete control row; their slotted toolbar uses\n // display: contents and has no measurable box. Standalone toolbars own theirs.\n const owner = host.closest('ds-table') ?? host.closest('ds-data-toolbar');\n if (!owner) {\n onChange(false);\n return () => undefined;\n }\n\n const sync = (width: number) => {\n if (width <= 0) return;\n onChange(isTableCaptionCompact(width));\n };\n\n const observer = new ResizeObserver(entries => {\n sync(entries[0] ? tableCaptionInlineSize(entries[0]) : 0);\n });\n observer.observe(owner);\n sync(owner.clientWidth);\n return () => observer.disconnect();\n}\n","@import '../../utils/radius.css';\n@import '../../utils/button-base.css';\n@import '../../utils/button-split.css';\n@import '../../utils/table-caption-control.css';\n\n:host {\n --ds-button-unfilled-fg: var(--color-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n --ds-button-unfilled-border: var(--color-border-secondary);\n --ds-button-split-border: var(--color-border-secondary);\n --ds-button-split-divider: var(--color-border-tertiary);\n}\n\n:host(.button-unfilled-host--background-medium) {\n --ds-button-split-border: var(--color-border-on-medium-background-secondary);\n --ds-button-split-divider: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.button-unfilled-host--background-bold) {\n --ds-button-split-border: var(--color-border-on-bold-background-secondary);\n --ds-button-split-divider: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.button-unfilled-host--background-strong) {\n --ds-button-split-border: var(--color-border-on-strong-background-secondary);\n --ds-button-split-divider: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.button-unfilled-host--background-translucent) {\n --ds-button-split-border: var(--color-translucent-border-secondary);\n --ds-button-split-divider: var(--color-translucent-border-tertiary);\n}\n\n:host(.button-unfilled-host--background-inverted) {\n --ds-button-split-border: var(--color-inverted-border-secondary);\n --ds-button-split-divider: var(--color-inverted-border-tertiary);\n}\n\n:host(.button-unfilled-host--background-media) {\n --ds-button-split-border: var(--color-media-border-secondary);\n --ds-button-split-divider: var(--color-media-border-tertiary);\n}\n\n:host(.button-unfilled-host--background-always-dark) {\n --ds-button-split-border: var(--color-always-dark-border-secondary);\n --ds-button-split-divider: var(--color-always-dark-border-tertiary);\n}\n\n:host(.button-unfilled-host--background-chrome) {\n --ds-button-split-border: var(--color-chrome-border-secondary);\n --ds-button-split-divider: var(--color-chrome-divider);\n}\n\n.button-unfilled {\n background: transparent;\n color: var(--ds-button-unfilled-fg);\n /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n Active foreground changes remain independent from popup-open pressed paint. */\n}\n\n.button-unfilled--active {\n color: var(--ds-button-unfilled-fg-active);\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. Keep the\n * pressed wash visible for the popup's complete rendered lifecycle without\n * promoting the resting foreground or selected fill.\n */\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-media-background);\n --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n.button-unfilled--background-chrome {\n --ds-button-unfilled-fg: var(--color-chrome-foreground-secondary);\n --ds-button-unfilled-fg-active: var(--color-chrome-foreground-primary);\n --ds-button-unfilled-dot-ring: var(--color-chrome-background-theme);\n --ds-button-unfilled-border: var(--color-chrome-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\nimport type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';\n\nexport type ButtonUnfilledBackground =\n | 'faint'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'translucent'\n | 'inverted'\n | 'media'\n | 'always-dark'\n | 'chrome';\n\nexport type ButtonUnfilledVariant = ButtonVariant;\nexport type ButtonUnfilledSize = ButtonSize;\nexport type ButtonUnfilledWidth = ButtonWidth;\nexport type ButtonUnfilledPopup = ButtonPopup;\n\n@Component({\n tag: 'ds-button-unfilled',\n styleUrl: 'ButtonUnfilled.css',\n scoped: true,\n})\nexport class ButtonUnfilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonUnfilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonUnfilledSize = 'md';\n\n /** Use reduced outer geometry when nested inside a control of the same size. */\n @Prop() isInset: boolean = false;\n\n /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n @Prop() insetDepth: ControlInsetDepth = 'single';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonUnfilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Whether the visible label uses the emphasized weight. */\n @Prop() labelEmphasis: boolean = true;\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /**\n * Owner-controlled visual emphasis inside a composite. This does not add\n * toggle semantics and does not emit dsChange.\n */\n @Prop() isActive: boolean = false;\n\n /**\n * When active, render the selected interaction fill.\n * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n * `false` so selection is foreground-only (primary color, no fill).\n */\n @Prop() activeFill: boolean = true;\n\n /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n @Prop() hasBorder: boolean = true;\n\n /** Use the half-radius treatment instead of the default control radius. */\n @Prop() rounded: boolean = false;\n\n /**\n * Scale down during a physical pointer press.\n * Disable when an owning composite requires fixed child or background geometry.\n */\n @Prop() pressScale: boolean = true;\n\n /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n @Prop() dot: boolean = false;\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n @Prop() isLoading: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * Actual parent surface context. Omit on primary and secondary surfaces; use\n * chrome for shell surfaces.\n */\n @Prop() background: ButtonUnfilledBackground | undefined;\n\n /** Accessible name override. Required for icon-only buttons. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop() controls: string | undefined;\n /**\n * Controlled disclosure state forwarded to aria-expanded.\n * Using expanded alone for surface-open styling is deprecated; set surfaceOpen\n * explicitly to separate the rendered surface lifecycle from disclosure state.\n */\n @Prop() expanded: boolean | undefined;\n\n /**\n * The associated menu, picker, or panel is visible, including its exit motion.\n * Holds only the pressed wash; does not set ARIA, selection, or press scaling.\n * In split mode this applies only to the menu segment. Explicit false disables\n * the legacy expanded-derived wash; omission preserves that compatibility path.\n */\n @Prop() surfaceOpen: boolean | undefined;\n @Prop() haspopup: ButtonUnfilledPopup | undefined;\n\n /**\n * Append a separate ChevronDown menu segment while preserving this button's\n * variant, size, surface, active, loading, border, and width treatment.\n */\n @Prop() split: boolean = false;\n\n /** Accessible name for the appended menu segment in split mode. */\n @Prop() menuAriaLabel: string = 'More options';\n\n /**\n * Controlled state for a genuine toggle button. Adds aria-pressed, promotes\n * active styling, and makes activation emit dsChange with the requested state.\n */\n @Prop() pressed: boolean | undefined;\n\n /**\n * Collapse the visible label and chevron to an icon-only control when the\n * owning `ds-table` caption is narrower than 900px. The trigger omits those\n * parts rather than clipping them.\n */\n @Prop({ reflect: true }) collapseLabel: boolean = false;\n\n /**\n * Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\n * both menu-button shapes:\n *\n * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n * the affordance.\n * - `icon` — the button *is* a menu. No chevron is added, so the glyph must\n * convey the menu on its own. Use `Ellipses` for generic more-options;\n * use a specific icon when the menu has a named purpose, such as\n * `Table` for Customize table.\n *\n * Use `haspopup` directly for non-menu popups.\n */\n @Prop() hasMenu: boolean = false;\n\n /**\n * Native `tabindex` for roving keyboard groups in shell chrome.\n * Omit for the default button tab stop (`0`).\n */\n @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n @Event() dsMenuClick!: EventEmitter<MouseEvent>;\n @Event() dsChange!: EventEmitter<boolean>;\n\n @State() private captionCompact = false;\n\n private buttonEl: HTMLButtonElement | null = null;\n private menuButtonEl: HTMLButtonElement | null = null;\n private captionCompactDisconnect: (() => void) | undefined;\n private hasLoaded = false;\n\n componentDidLoad(): void {\n this.hasLoaded = true;\n this.syncCaptionCompactObserver();\n }\n\n connectedCallback(): void {\n if (this.hasLoaded) this.syncCaptionCompactObserver();\n }\n\n disconnectedCallback(): void {\n this.disconnectCaptionCompactObserver();\n }\n\n @Watch('collapseLabel')\n onCollapseLabelChange() {\n this.syncCaptionCompactObserver();\n }\n\n @Method()\n async setFocus(segment: 'primary' | 'menu' = 'primary') {\n (segment === 'menu' ? this.menuButtonEl : this.buttonEl)?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsClick.emit(event);\n if (this.pressed !== undefined) this.dsChange.emit(!this.pressed);\n };\n\n private handleMenuClick = (event: MouseEvent) => {\n if (this.isInactive || this.isLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.dsMenuClick.emit(event);\n };\n\n private get captionIconOnly(): boolean {\n return (\n this.collapseLabel &&\n this.captionCompact &&\n this.variant === 'icon-label' &&\n Boolean(this.icon)\n );\n }\n\n private get visualVariant(): ButtonUnfilledVariant {\n return this.captionIconOnly ? 'icon' : this.variant;\n }\n\n private get showDot(): boolean {\n return this.variant === 'icon' && this.dot && !this.isLoading;\n }\n\n private syncCaptionCompactObserver(): void {\n this.disconnectCaptionCompactObserver();\n if (!this.collapseLabel) {\n if (this.captionCompact) this.captionCompact = false;\n return;\n }\n this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n if (this.captionCompact !== compact) this.captionCompact = compact;\n });\n }\n\n private disconnectCaptionCompactObserver(): void {\n this.captionCompactDisconnect?.();\n this.captionCompactDisconnect = undefined;\n }\n\n private get resolvedHaspopup(): ButtonUnfilledPopup | undefined {\n return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n }\n\n private get doubleInset(): boolean {\n return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n }\n\n private get resolvedSurfaceOpen(): boolean {\n const legacy = this.expanded === true && (this.split || this.resolvedHaspopup !== undefined);\n return (this.surfaceOpen ?? legacy) && !this.isInactive;\n }\n\n private get visuallyActive(): boolean {\n return this.isActive || this.pressed === true;\n }\n\n /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n private get dotRing(): string {\n if ((this.isActive || this.pressed === true) && this.activeFill) {\n return 'var(--ds-interaction-active)';\n }\n return 'var(--ds-button-unfilled-dot-ring)';\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n return undefined;\n }\n\n private buttonClass(\n variant: ButtonUnfilledVariant,\n expanded: boolean,\n bordered: boolean\n ): Record<string, boolean> {\n const bg = this.background;\n const cls: Record<string, boolean> = {\n 'button-unfilled': true,\n 'ds-button': true,\n 'ds-focus-ring-inset': true,\n 'ds-control-press-scale': this.pressScale && !this.split,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected':\n (this.isActive || this.pressed === true) && this.activeFill && !this.isInactive,\n 'ds-interaction-fill--on-faint': bg === 'faint',\n 'ds-interaction-fill--on-medium': bg === 'medium',\n 'ds-interaction-fill--on-bold': bg === 'bold',\n 'ds-interaction-fill--on-strong': bg === 'strong',\n 'ds-interaction-fill--on-translucent': bg === 'translucent',\n 'ds-interaction-fill--on-inverted': bg === 'inverted',\n 'ds-interaction-fill--on-media': bg === 'media',\n 'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n 'ds-interaction-fill--on-chrome': bg === 'chrome',\n 'button-unfilled--active': this.visuallyActive,\n 'button-unfilled--expanded': expanded,\n 'ds-interaction-fill--surface-open': expanded,\n 'ds-button--expanded': expanded,\n 'button-unfilled--bordered': bordered,\n 'ds-button--bordered': bordered,\n 'button-unfilled--rounded': this.rounded,\n 'ds-button--rounded': this.rounded,\n 'ds-control-inactive': this.isInactive,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-control-frame': true,\n 'button-unfilled--icon': variant === 'icon',\n 'ds-button--icon': variant === 'icon',\n 'button-unfilled--label': variant === 'label',\n 'button-unfilled--icon-label': variant === 'icon-label',\n 'button-unfilled--background-faint': bg === 'faint',\n 'button-unfilled--background-medium': bg === 'medium',\n 'button-unfilled--background-bold': bg === 'bold',\n 'button-unfilled--background-strong': bg === 'strong',\n 'button-unfilled--background-translucent': bg === 'translucent',\n 'button-unfilled--background-inverted': bg === 'inverted',\n 'button-unfilled--background-media': bg === 'media',\n 'button-unfilled--on-always-dark': bg === 'always-dark',\n 'button-unfilled--background-chrome': bg === 'chrome',\n };\n return cls;\n }\n\n render() {\n const primaryButton = (\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={{\n ...this.buttonClass(\n this.visualVariant,\n !this.split && this.resolvedSurfaceOpen,\n this.hasBorder && !this.split\n ),\n 'ds-button-split__primary': this.split,\n }}\n disabled={this.isInactive}\n tabIndex={this.focusTabIndex ?? 0}\n aria-label={this.accessibleName}\n aria-busy={this.isLoading ? 'true' : undefined}\n aria-disabled={this.isLoading ? 'true' : undefined}\n aria-controls={this.split ? undefined : this.controls}\n aria-expanded={\n this.split || this.expanded === undefined ? undefined : String(this.expanded)\n }\n aria-haspopup={this.split ? undefined : this.resolvedHaspopup}\n aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n onPointerDown={event =>\n beginElevatedControlPress(\n event,\n this.pressScale && !this.split && !this.isInactive && !this.isLoading\n )\n }\n onClick={this.handleClick}\n >\n {renderButtonContent({\n namespace: 'button-unfilled',\n variant: this.visualVariant,\n size: this.size,\n label: this.label,\n labelEmphasis: this.labelEmphasis,\n icon: this.icon,\n hasMenu: !this.split && this.hasMenu,\n isLoading: this.isLoading,\n dot: {\n visible: this.showDot,\n background: this.dotRing,\n },\n })}\n </button>\n );\n\n const control = this.split ? (\n <div\n class={{\n 'ds-button-split': true,\n 'ds-button-split--rounded': this.rounded,\n }}\n >\n {primaryButton}\n <span\n class={{\n 'ds-button-split__divider': true,\n 'ds-button-split__divider--content-height': !this.hasBorder,\n }}\n aria-hidden=\"true\"\n />\n <button\n ref={el => {\n this.menuButtonEl = el ?? null;\n }}\n class={{\n ...this.buttonClass('icon', this.resolvedSurfaceOpen, false),\n 'ds-button-split__menu': true,\n }}\n type=\"button\"\n disabled={this.isInactive || this.isLoading}\n tabIndex={this.focusTabIndex ?? 0}\n aria-label={this.menuAriaLabel}\n aria-controls={this.controls}\n aria-expanded={String(this.expanded === true)}\n aria-haspopup=\"menu\"\n onClick={this.handleMenuClick}\n >\n {renderButtonContent({\n namespace: 'button-unfilled',\n variant: 'icon',\n size: this.size,\n label: '',\n labelEmphasis: true,\n icon: 'ChevronDown',\n hasMenu: false,\n isLoading: false,\n })}\n </button>\n {this.hasBorder ? <span class=\"ds-button-split__outline\" aria-hidden=\"true\" /> : null}\n </div>\n ) : (\n primaryButton\n );\n\n return (\n <Host\n class={{\n 'button-unfilled-host': true,\n 'button-unfilled-host--icon': this.visualVariant === 'icon' && !this.split,\n 'ds-button-host--icon': this.visualVariant === 'icon' && !this.split,\n 'ds-button-split-host': this.split,\n 'ds-button-split-host--primary-icon': this.split && this.visualVariant === 'icon',\n [`button-unfilled-host--background-${this.background}`]:\n this.split && this.background !== undefined,\n 'ds-control--lg': this.size === 'lg',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'ds-control--inset': this.isInset && !this.doubleInset,\n 'ds-control--inset-double': this.doubleInset,\n 'ds-table-caption-control': this.collapseLabel,\n 'ds-table-caption-control--compact': this.captionIconOnly,\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n {this.collapseLabel ? (\n <ds-tooltip\n label={this.captionIconOnly ? this.label || this.accessibleName || '' : ''}\n side=\"top\"\n size=\"sm\"\n >\n {control}\n </ds-tooltip>\n ) : (\n control\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|