@ds-mo/ui 4.2.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/.build-stamp +1 -1
  2. package/dist/agent.json +5 -1
  3. package/dist/angular/ds-skeleton.d.ts +1 -1
  4. package/dist/angular/ds-skeleton.js +3 -3
  5. package/dist/components/ds-badge.js +1 -1
  6. package/dist/components/ds-banner.js +1 -1
  7. package/dist/components/ds-bar-nav.js +1 -1
  8. package/dist/components/ds-button-filled.js +1 -1
  9. package/dist/components/ds-button-unfilled.js +1 -1
  10. package/dist/components/ds-card-data-viz-donut.js +1 -1
  11. package/dist/components/ds-card-setting.js +1 -1
  12. package/dist/components/ds-card.js +1 -1
  13. package/dist/components/ds-chart-legend.js +1 -1
  14. package/dist/components/ds-checkbox.js +1 -1
  15. package/dist/components/ds-chip.js +1 -1
  16. package/dist/components/ds-divider.js +1 -1
  17. package/dist/components/ds-divider.js.map +1 -1
  18. package/dist/components/ds-empty-state.js +1 -1
  19. package/dist/components/ds-field.js +1 -1
  20. package/dist/components/ds-input.js +1 -1
  21. package/dist/components/ds-menu.js +1 -1
  22. package/dist/components/ds-modal.js +1 -1
  23. package/dist/components/ds-pagination.js +1 -1
  24. package/dist/components/ds-panel-nav.js +1 -1
  25. package/dist/components/ds-panel-tools.js +1 -1
  26. package/dist/components/ds-radio-group.js +1 -1
  27. package/dist/components/ds-select.js +1 -1
  28. package/dist/components/ds-skeleton.js +1 -1
  29. package/dist/components/ds-slider.js +1 -1
  30. package/dist/components/ds-tab-group-nav.js +1 -1
  31. package/dist/components/ds-tab-group.js +1 -1
  32. package/dist/components/ds-table.js +1 -1
  33. package/dist/components/ds-table.js.map +1 -1
  34. package/dist/components/ds-tag.js +1 -1
  35. package/dist/components/ds-text.js +1 -1
  36. package/dist/components/ds-tooltip-data-viz.js +1 -1
  37. package/dist/components/ds-tooltip-data-viz.js.map +1 -1
  38. package/dist/components/ds-tooltip.js +1 -1
  39. package/dist/components/{p-yC55Ye2r.js → p-BCiKXnx7.js} +2 -2
  40. package/dist/components/{p-CIwWLU82.js → p-BX7jIHFD.js} +2 -2
  41. package/dist/components/p-BeIuJQO9.js +2 -0
  42. package/dist/components/p-BeIuJQO9.js.map +1 -0
  43. package/dist/components/p-BieM8MH5.js +2 -0
  44. package/dist/components/p-BieM8MH5.js.map +1 -0
  45. package/dist/components/p-CKjNw4Tl.js +2 -0
  46. package/dist/components/{p-BBpXpv4D.js.map → p-CKjNw4Tl.js.map} +1 -1
  47. package/dist/components/{p-DUUi278M.js → p-D-7A_rRS.js} +2 -2
  48. package/dist/components/{p-1UYS0fLz.js → p-D7RssoPm.js} +2 -2
  49. package/dist/components/{p-ZCMVoS5b.js → p-DhO43V4c.js} +2 -2
  50. package/dist/components/{p-BkFpy8zp.js → p-K6uLVQKX.js} +2 -2
  51. package/dist/components/p-drBA73M_.js.map +1 -1
  52. package/dist/docs/components.json +74 -1
  53. package/dist/types/components/Skeleton/Skeleton.d.ts +3 -0
  54. package/dist/types/components/Skeleton/index.d.ts +1 -1
  55. package/dist/types/components.d.ts +13 -2
  56. package/package.json +3 -3
  57. package/dist/components/p-BBpXpv4D.js +0 -2
  58. package/dist/components/p-BglQMVBV.js +0 -2
  59. package/dist/components/p-BglQMVBV.js.map +0 -1
  60. package/dist/components/p-i0Nhc5A4.js +0 -2
  61. package/dist/components/p-i0Nhc5A4.js.map +0 -1
  62. /package/dist/components/{p-yC55Ye2r.js.map → p-BCiKXnx7.js.map} +0 -0
  63. /package/dist/components/{p-CIwWLU82.js.map → p-BX7jIHFD.js.map} +0 -0
  64. /package/dist/components/{p-DUUi278M.js.map → p-D-7A_rRS.js.map} +0 -0
  65. /package/dist/components/{p-1UYS0fLz.js.map → p-D7RssoPm.js.map} +0 -0
  66. /package/dist/components/{p-ZCMVoS5b.js.map → p-DhO43V4c.js.map} +0 -0
  67. /package/dist/components/{p-BkFpy8zp.js.map → p-K6uLVQKX.js.map} +0 -0
package/dist/components/ds-table.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as t,c as s,h as a,a as r,t as i}from"./index.js";import{d as o}from"./p-BglQMVBV.js";import{d as n}from"./p-BBpXpv4D.js";const d=()=>`.sc-ds-table-h{display:block;width:100%}.table-wrapper.sc-ds-table{display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--dimension-radius-075)}.table-scroll.sc-ds-table{overflow-x:auto;width:100%}.table.sc-ds-table{display:grid;width:100%;min-width:max-content}.header-row.sc-ds-table{display:contents}.header-cell.sc-ds-table{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075) var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}.header-cell--sortable.sc-ds-table{cursor:pointer}.header-cell--sortable.sc-ds-table:hover{background-color:var(--color-background-translucent)}.header-cell--sortable.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.sort-indicator.sc-ds-table{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-secondary)}.row.sc-ds-table{display:contents}.row--clickable.sc-ds-table{cursor:pointer}.row.sc-ds-table:hover .cell.sc-ds-table{background-color:var(--color-interaction-hover)}.row--selected.sc-ds-table .cell.sc-ds-table{background-color:var(--color-background-faint-brand)}.row--clickable.sc-ds-table:focus-visible .cell.sc-ds-table{background-color:var(--color-interaction-hover);box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus)}.cell.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-075) var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);min-height:var(--dimension-size-500);background-color:var(--color-background-primary);transition:background-color var(--effect-motion-short-2)}.align-right.sc-ds-table{justify-content:flex-end;text-align:right}.align-center.sc-ds-table{justify-content:center;text-align:center}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.table-pagination.sc-ds-table{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary);background-color:var(--color-background-primary)}.page-button.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-050) var(--dimension-space-100);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;transition:background-color var(--effect-motion-short-2)}.page-button.sc-ds-table:hover:not(:disabled){background-color:var(--color-interaction-hover)}.page-button.sc-ds-table:disabled{opacity:0.4;cursor:not-allowed}.page-button.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}`;function l(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s,a){const r=s==="asc"?1:-1;if(e==null&&t==null)return 0;if(e==null)return r;if(t==null)return-r;if(typeof e==="number"&&typeof t==="number")return(e-t)*r;return a.compare(String(e),String(t))*r}const b=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSort=s(this,"dsSort");this.dsRowClick=s(this,"dsRowClick");this.dsPageChange=s(this,"dsPageChange");this.columns=[];this.data=[];this.loading=false;this.emptyMessage="No results found.";this.loadingLabel="Loading";this.previousPageLabel="Previous";this.nextPageLabel="Next";this.pageStatusLabel="Page {page} of {total}";this.selectedRows="";this.pageSize=20}get activeSort(){return this.sortState??this.internalSort}get visibleCols(){return this.columns.filter((e=>!e.hide))}get gridTemplate(){return this.visibleCols.map((e=>{if(e.width)return typeof e.width==="number"?`${e.width}px`:e.width;return"minmax(120px, 1fr)"})).join(" ")}get sortedData(){const e=this.activeSort;if(!e)return this.data;const t=this.columns.find((t=>t.id===e.columnId));if(!t)return this.data;return[...this.data].sort(((s,a)=>c(l(t,s),l(t,a),e.direction,new Intl.Collator(this.locale))))}get pagedData(){if(this.pageIndex===undefined)return this.sortedData;const e=this.pageIndex*this.pageSize;return this.sortedData.slice(e,e+this.pageSize)}get totalPages(){if(this.pageIndex===undefined)return 1;return Math.ceil(this.sortedData.length/this.pageSize)}get selectedSet(){if(!this.selectedRows)return new Set;return new Set(this.selectedRows.split(",").map(Number).filter((e=>!isNaN(e))))}handleSort(e){this.dsSort.emit({columnId:e});if(!this.sortState){const t=this.internalSort;this.internalSort=t?.columnId===e?{columnId:e,direction:t.direction==="asc"?"desc":"asc"}:{columnId:e,direction:"asc"}}}render(){const{visibleCols:e,pagedData:t,totalPages:s,loading:i}=this;const o=!i&&t.length===0;const n=this.selectedSet;const d=this.activeSort;const c=this.pageIndex!==undefined&&s>1;return a(r,{key:"ad7672998fa0dc6813baddc301d869d85f8ad361"},a("div",{key:"061d981229fb1f0afcc43f3bb3c6f334f73740f6",class:"table-wrapper","aria-busy":i||undefined},a("div",{key:"04701c4d8d7239c5fd3d5e7ea4af2f5be9a9702e",class:"table-scroll"},a("div",{key:"3faef7e102ac70b4d658e8436426c3afbc8739a7",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},a("div",{key:"c738a79b1f7b19b9cb69c1fca8377cb40e65474b",class:"header-row",role:"row"},e.map((e=>{const t=d?.columnId===e.id;const s=e.sortable?t?d.direction==="asc"?"ascending":"descending":"none":undefined;return a("div",{key:e.id,class:{"header-cell":true,"header-cell--sortable":!!e.sortable,"align-right":e.align==="right","align-center":e.align==="center"},role:"columnheader","aria-sort":s,tabIndex:e.sortable?0:undefined,onClick:()=>e.sortable&&this.handleSort(e.id),onKeyDown:t=>{if(e.sortable&&(t.key==="Enter"||t.key===" ")){t.preventDefault();this.handleSort(e.id)}},style:e.minWidth?{minWidth:typeof e.minWidth==="number"?`${e.minWidth}px`:e.minWidth}:undefined},a("ds-text",{as:"span",variant:"text-body-small",emphasis:true,color:"secondary"},e.header),t&&a("span",{class:"sort-indicator","aria-hidden":"true"},d.direction==="asc"?"↑":"↓"))}))),i&&Array.from({length:5}).map(((t,s)=>a("div",{key:`sk-${s}`,class:"row",role:s===0?"status":"row","aria-label":s===0?this.loadingLabel:undefined},e.map((e=>a("div",{key:e.id,class:"cell",role:"cell"},a("ds-skeleton",{variant:"text",width:"60%"}))))))),o&&a("ds-text",{key:"a65d3efe761e7988b4e6aeeeeb7982594928dea2",class:"empty-row",as:"p",variant:"text-body-medium",color:"secondary",style:{gridColumn:"1 / -1"}},this.emptyMessage),!i&&t.map(((t,s)=>{const r=n.has(s);return a("div",{key:s,class:{row:true,"row--selected":r,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?r:undefined,onClick:()=>this.dsRowClick.emit({row:t,rowIndex:s}),onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.dsRowClick.emit({row:t,rowIndex:s})}}},e.map((e=>a("ds-text",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},as:"span",variant:"text-body-medium",lineTruncation:1,role:"cell"},String(l(e,t)??"")))))})))),c&&a("div",{key:"17f90fa0fedd7b59354c5a11b14447aca7bea843",class:"table-pagination"},a("button",{key:"b728a6f34a89b1f5e95a99fadfeaf52dc58b50ff",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},a("ds-text",{key:"a1bd7fa43a978438332ae9c1c37f8c31584cb2bd",as:"span",variant:"text-body-small"},this.previousPageLabel)),a("ds-text",{key:"eb612af325fa936a0f35d6434d36e9506fa6a0d9",as:"span",variant:"text-body-small",color:"secondary"},this.pageStatusLabel.replace("{page}",String(this.pageIndex+1)).replace("{total}",String(s))),a("button",{key:"0444a0e7a6c7a5fda2aa4d953815dbcd80f5b256",type:"button",class:"page-button",disabled:this.pageIndex>=s-1,onClick:()=>{this.pageIndex=this.pageIndex+1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},a("ds-text",{key:"7caa3ae47c92e6c50633c216c82cd304a681c78c",as:"span",variant:"text-body-small"},this.nextPageLabel)))))}static get style(){return d()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],loadingLabel:[1,"loading-label"],previousPageLabel:[1,"previous-page-label"],nextPageLabel:[1,"next-page-label"],pageStatusLabel:[1,"page-status-label"],locale:[1],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-table","ds-skeleton","ds-text"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(i(e))){customElements.define(i(e),b)}break;case"ds-skeleton":if(!customElements.get(i(e))){o()}break;case"ds-text":if(!customElements.get(i(e))){n()}break}}))}u();const h=b;const f=u;export{h as DsTable,f as defineCustomElement};
1
+ import{p as e,H as t,c as s,h as a,a as r,t as i}from"./index.js";import{d as o}from"./p-BeIuJQO9.js";import{d as n}from"./p-CKjNw4Tl.js";const d=()=>`.sc-ds-table-h{display:block;width:100%}.table-wrapper.sc-ds-table{display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--dimension-radius-075)}.table-scroll.sc-ds-table{overflow-x:auto;width:100%}.table.sc-ds-table{display:grid;width:100%;min-width:max-content}.header-row.sc-ds-table{display:contents}.header-cell.sc-ds-table{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075) var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}.header-cell--sortable.sc-ds-table{cursor:pointer}.header-cell--sortable.sc-ds-table:hover{background-color:var(--color-translucent-translucent)}.header-cell--sortable.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.sort-indicator.sc-ds-table{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-secondary)}.row.sc-ds-table{display:contents}.row--clickable.sc-ds-table{cursor:pointer}.row.sc-ds-table:hover .cell.sc-ds-table{background-color:var(--color-interaction-hover)}.row--selected.sc-ds-table .cell.sc-ds-table{background-color:var(--color-background-faint-brand)}.row--clickable.sc-ds-table:focus-visible .cell.sc-ds-table{background-color:var(--color-interaction-hover);box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus)}.cell.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-075) var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);min-height:var(--dimension-size-500);background-color:var(--color-background-primary);transition:background-color var(--effect-motion-short-2)}.align-right.sc-ds-table{justify-content:flex-end;text-align:right}.align-center.sc-ds-table{justify-content:center;text-align:center}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.table-pagination.sc-ds-table{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary);background-color:var(--color-background-primary)}.page-button.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-050) var(--dimension-space-100);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;transition:background-color var(--effect-motion-short-2)}.page-button.sc-ds-table:hover:not(:disabled){background-color:var(--color-interaction-hover)}.page-button.sc-ds-table:disabled{opacity:0.4;cursor:not-allowed}.page-button.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}`;function l(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s,a){const r=s==="asc"?1:-1;if(e==null&&t==null)return 0;if(e==null)return r;if(t==null)return-r;if(typeof e==="number"&&typeof t==="number")return(e-t)*r;return a.compare(String(e),String(t))*r}const b=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSort=s(this,"dsSort");this.dsRowClick=s(this,"dsRowClick");this.dsPageChange=s(this,"dsPageChange");this.columns=[];this.data=[];this.loading=false;this.emptyMessage="No results found.";this.loadingLabel="Loading";this.previousPageLabel="Previous";this.nextPageLabel="Next";this.pageStatusLabel="Page {page} of {total}";this.selectedRows="";this.pageSize=20}get activeSort(){return this.sortState??this.internalSort}get visibleCols(){return this.columns.filter((e=>!e.hide))}get gridTemplate(){return this.visibleCols.map((e=>{if(e.width)return typeof e.width==="number"?`${e.width}px`:e.width;return"minmax(120px, 1fr)"})).join(" ")}get sortedData(){const e=this.activeSort;if(!e)return this.data;const t=this.columns.find((t=>t.id===e.columnId));if(!t)return this.data;return[...this.data].sort(((s,a)=>c(l(t,s),l(t,a),e.direction,new Intl.Collator(this.locale))))}get pagedData(){if(this.pageIndex===undefined)return this.sortedData;const e=this.pageIndex*this.pageSize;return this.sortedData.slice(e,e+this.pageSize)}get totalPages(){if(this.pageIndex===undefined)return 1;return Math.ceil(this.sortedData.length/this.pageSize)}get selectedSet(){if(!this.selectedRows)return new Set;return new Set(this.selectedRows.split(",").map(Number).filter((e=>!isNaN(e))))}handleSort(e){this.dsSort.emit({columnId:e});if(!this.sortState){const t=this.internalSort;this.internalSort=t?.columnId===e?{columnId:e,direction:t.direction==="asc"?"desc":"asc"}:{columnId:e,direction:"asc"}}}render(){const{visibleCols:e,pagedData:t,totalPages:s,loading:i}=this;const o=!i&&t.length===0;const n=this.selectedSet;const d=this.activeSort;const c=this.pageIndex!==undefined&&s>1;return a(r,{key:"ad7672998fa0dc6813baddc301d869d85f8ad361"},a("div",{key:"061d981229fb1f0afcc43f3bb3c6f334f73740f6",class:"table-wrapper","aria-busy":i||undefined},a("div",{key:"04701c4d8d7239c5fd3d5e7ea4af2f5be9a9702e",class:"table-scroll"},a("div",{key:"3faef7e102ac70b4d658e8436426c3afbc8739a7",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},a("div",{key:"c738a79b1f7b19b9cb69c1fca8377cb40e65474b",class:"header-row",role:"row"},e.map((e=>{const t=d?.columnId===e.id;const s=e.sortable?t?d.direction==="asc"?"ascending":"descending":"none":undefined;return a("div",{key:e.id,class:{"header-cell":true,"header-cell--sortable":!!e.sortable,"align-right":e.align==="right","align-center":e.align==="center"},role:"columnheader","aria-sort":s,tabIndex:e.sortable?0:undefined,onClick:()=>e.sortable&&this.handleSort(e.id),onKeyDown:t=>{if(e.sortable&&(t.key==="Enter"||t.key===" ")){t.preventDefault();this.handleSort(e.id)}},style:e.minWidth?{minWidth:typeof e.minWidth==="number"?`${e.minWidth}px`:e.minWidth}:undefined},a("ds-text",{as:"span",variant:"text-body-small",emphasis:true,color:"secondary"},e.header),t&&a("span",{class:"sort-indicator","aria-hidden":"true"},d.direction==="asc"?"↑":"↓"))}))),i&&Array.from({length:5}).map(((t,s)=>a("div",{key:`sk-${s}`,class:"row",role:s===0?"status":"row","aria-label":s===0?this.loadingLabel:undefined},e.map((e=>a("div",{key:e.id,class:"cell",role:"cell"},a("ds-skeleton",{variant:"text",width:"60%"}))))))),o&&a("ds-text",{key:"a65d3efe761e7988b4e6aeeeeb7982594928dea2",class:"empty-row",as:"p",variant:"text-body-medium",color:"secondary",style:{gridColumn:"1 / -1"}},this.emptyMessage),!i&&t.map(((t,s)=>{const r=n.has(s);return a("div",{key:s,class:{row:true,"row--selected":r,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?r:undefined,onClick:()=>this.dsRowClick.emit({row:t,rowIndex:s}),onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.dsRowClick.emit({row:t,rowIndex:s})}}},e.map((e=>a("ds-text",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},as:"span",variant:"text-body-medium",lineTruncation:1,role:"cell"},String(l(e,t)??"")))))})))),c&&a("div",{key:"17f90fa0fedd7b59354c5a11b14447aca7bea843",class:"table-pagination"},a("button",{key:"b728a6f34a89b1f5e95a99fadfeaf52dc58b50ff",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},a("ds-text",{key:"a1bd7fa43a978438332ae9c1c37f8c31584cb2bd",as:"span",variant:"text-body-small"},this.previousPageLabel)),a("ds-text",{key:"eb612af325fa936a0f35d6434d36e9506fa6a0d9",as:"span",variant:"text-body-small",color:"secondary"},this.pageStatusLabel.replace("{page}",String(this.pageIndex+1)).replace("{total}",String(s))),a("button",{key:"0444a0e7a6c7a5fda2aa4d953815dbcd80f5b256",type:"button",class:"page-button",disabled:this.pageIndex>=s-1,onClick:()=>{this.pageIndex=this.pageIndex+1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},a("ds-text",{key:"7caa3ae47c92e6c50633c216c82cd304a681c78c",as:"span",variant:"text-body-small"},this.nextPageLabel)))))}static get style(){return d()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],loadingLabel:[1,"loading-label"],previousPageLabel:[1,"previous-page-label"],nextPageLabel:[1,"next-page-label"],pageStatusLabel:[1,"page-status-label"],locale:[1],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-table","ds-skeleton","ds-text"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(i(e))){customElements.define(i(e),b)}break;case"ds-skeleton":if(!customElements.get(i(e))){o()}break;case"ds-text":if(!customElements.get(i(e))){n()}break}}))}u();const h=b;const f=u;export{h as DsTable,f as defineCustomElement};
2
2
  //# sourceMappingURL=ds-table.js.map
package/dist/components/ds-table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","collator","m","compare","String","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","loadingLabel","previousPageLabel","nextPageLabel","pageStatusLabel","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","Intl","Collator","locale","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","as","variant","emphasis","color","header","Array","from","_","i","gridColumn","rowIndex","isSelected","has","dsRowClick","cell","lineTruncation","type","disabled","dsPageChange","replace"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.table-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n overflow-x: auto;\n width: 100%;\n}\n\n.table {\n display: grid;\n width: 100%;\n min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n display: contents;\n}\n\n.header-cell {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075) var(--dimension-space-100);\n background-color: var(--color-background-secondary);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n -webkit-user-select: none;\n user-select: none;\n position: sticky;\n top: 0;\n z-index: 2;\n}\n\n.header-cell--sortable {\n cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n background-color: var(--color-background-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n display: contents;\n}\n\n.row--clickable {\n cursor: pointer;\n}\n\n.row:hover .cell {\n background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n background-color: var(--color-interaction-hover);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-075) var(--dimension-space-100);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n min-height: var(--dimension-size-500);\n background-color: var(--color-background-primary);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n.align-center {\n justify-content: center;\n text-align: center;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-400);\n background-color: var(--color-background-primary);\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-100);\n border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n background-color: var(--color-background-primary);\n}\n\n.page-button {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-050) var(--dimension-space-100);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-075);\n cursor: pointer;\n transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n columnId: string;\n direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n id: string;\n header: string;\n accessorKey?: string;\n accessor?: (row: T) => unknown;\n sortable?: boolean;\n align?: 'left' | 'right' | 'center';\n width?: string | number;\n minWidth?: string | number;\n hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n if (col.accessor) return col.accessor(row);\n return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection, collator: Intl.Collator): number {\n const m = dir === 'asc' ? 1 : -1;\n if (a == null && b == null) return 0;\n if (a == null) return m;\n if (b == null) return -m;\n if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n return collator.compare(String(a), String(b)) * m;\n}\n\n@Component({\n tag: 'ds-table',\n styleUrl: 'Table.css',\n scoped: true,\n})\nexport class Table {\n @Prop() columns: TableColumn[] = [];\n @Prop() data: unknown[] = [];\n @Prop() sortState: SortState | undefined;\n @Prop() loading: boolean = false;\n @Prop() emptyMessage: string = 'No results found.';\n @Prop() loadingLabel: string = 'Loading';\n @Prop() previousPageLabel: string = 'Previous';\n @Prop() nextPageLabel: string = 'Next';\n /** Use `{page}` and `{total}` placeholders. */\n @Prop() pageStatusLabel: string = 'Page {page} of {total}';\n @Prop() locale: string | undefined;\n /** Comma-separated zero-based row indices that are selected. */\n @Prop() selectedRows: string = '';\n /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n @Prop({ mutable: true }) pageIndex: number | undefined;\n @Prop() pageSize: number = 20;\n\n @State() private internalSort: SortState | undefined;\n\n @Event() dsSort!: EventEmitter<{ columnId: string }>;\n @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n private get activeSort(): SortState | undefined {\n return this.sortState ?? this.internalSort;\n }\n\n private get visibleCols(): TableColumn[] {\n return this.columns.filter(c => !c.hide);\n }\n\n private get gridTemplate(): string {\n return this.visibleCols.map(col => {\n if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n return 'minmax(120px, 1fr)';\n }).join(' ');\n }\n\n private get sortedData(): unknown[] {\n const sort = this.activeSort;\n if (!sort) return this.data;\n const col = this.columns.find(c => c.id === sort.columnId);\n if (!col) return this.data;\n return [...this.data].sort((a, b) =>\n compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction, new Intl.Collator(this.locale))\n );\n }\n\n private get pagedData(): unknown[] {\n if (this.pageIndex === undefined) return this.sortedData;\n const start = this.pageIndex * this.pageSize;\n return this.sortedData.slice(start, start + this.pageSize);\n }\n\n private get totalPages(): number {\n if (this.pageIndex === undefined) return 1;\n return Math.ceil(this.sortedData.length / this.pageSize);\n }\n\n private get selectedSet(): Set<number> {\n if (!this.selectedRows) return new Set();\n return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n }\n\n private handleSort(columnId: string) {\n this.dsSort.emit({ columnId });\n // Toggle internal sort if consumer hasn't provided sortState\n if (!this.sortState) {\n const cur = this.internalSort;\n this.internalSort = cur?.columnId === columnId\n ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n : { columnId, direction: 'asc' };\n }\n }\n\n render() {\n const { visibleCols, pagedData, totalPages, loading } = this;\n const isEmpty = !loading && pagedData.length === 0;\n const selectedSet = this.selectedSet;\n const sort = this.activeSort;\n const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n return (\n <Host>\n <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n <div class=\"table-scroll\">\n <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n {/* Header row */}\n <div class=\"header-row\" role=\"row\">\n {visibleCols.map(col => {\n const isSorted = sort?.columnId === col.id;\n const ariaSort = col.sortable\n ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n : undefined;\n return (\n <div\n key={col.id}\n class={{\n 'header-cell': true,\n 'header-cell--sortable': !!col.sortable,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n role=\"columnheader\"\n aria-sort={ariaSort}\n tabIndex={col.sortable ? 0 : undefined}\n onClick={() => col.sortable && this.handleSort(col.id)}\n onKeyDown={(e: KeyboardEvent) => {\n if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault();\n this.handleSort(col.id);\n }\n }}\n style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n >\n <ds-text as=\"span\" variant=\"text-body-small\" emphasis color=\"secondary\">\n {col.header}\n </ds-text>\n {isSorted && (\n <span class=\"sort-indicator\" aria-hidden=\"true\">\n {sort.direction === 'asc' ? '↑' : '↓'}\n </span>\n )}\n </div>\n );\n })}\n </div>\n\n {/* Loading skeleton */}\n {loading && Array.from({ length: 5 }).map((_, i) => (\n <div\n key={`sk-${i}`}\n class=\"row\"\n role={i === 0 ? 'status' : 'row'}\n aria-label={i === 0 ? this.loadingLabel : undefined}\n >\n {visibleCols.map(col => (\n <div key={col.id} class=\"cell\" role=\"cell\">\n <ds-skeleton variant=\"text\" width=\"60%\" />\n </div>\n ))}\n </div>\n ))}\n\n {/* Empty state */}\n {isEmpty && (\n <ds-text\n class=\"empty-row\"\n as=\"p\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n style={{ gridColumn: '1 / -1' }}\n >\n {this.emptyMessage}\n </ds-text>\n )}\n\n {/* Data rows */}\n {!loading && pagedData.map((row, rowIndex) => {\n const isSelected = selectedSet.has(rowIndex);\n return (\n <div\n key={rowIndex}\n class={{\n 'row': true,\n 'row--selected': isSelected,\n 'row--clickable': true,\n }}\n role=\"row\"\n tabIndex={0}\n aria-selected={this.selectedRows ? isSelected : undefined}\n onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.dsRowClick.emit({ row, rowIndex });\n }\n }}\n >\n {visibleCols.map(col => (\n <ds-text\n key={col.id}\n class={{\n 'cell': true,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n as=\"span\"\n variant=\"text-body-medium\"\n lineTruncation={1}\n role=\"cell\"\n >\n {String(getCellValue(col, row) ?? '')}\n </ds-text>\n ))}\n </div>\n );\n })}\n </div>\n </div>\n\n {/* Built-in pagination */}\n {hasPagination && (\n <div class=\"table-pagination\">\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex === 0}\n onClick={() => {\n this.pageIndex = this.pageIndex! - 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <ds-text as=\"span\" variant=\"text-body-small\">{this.previousPageLabel}</ds-text>\n </button>\n <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n {this.pageStatusLabel\n .replace('{page}', String(this.pageIndex! + 1))\n .replace('{total}', String(totalPages))}\n </ds-text>\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex! >= totalPages - 1}\n onClick={() => {\n this.pageIndex = this.pageIndex! + 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <ds-text as=\"span\" variant=\"text-body-small\">{this.nextPageLabel}</ds-text>\n </button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"0IAAA,MAAMA,EAAW,IAAM,mkGCqBvB,SAASC,EAAgBC,EAAqBC,GAC5C,GAAID,EAAIE,YAAa,OAAQD,EAAgCD,EAAIE,aACjE,GAAIF,EAAIG,SAAU,OAAOH,EAAIG,SAASF,GACtC,OAAOG,SACT,CAEA,SAASC,EAAcC,EAAYC,EAAYC,EAAoBC,GACjE,MAAMC,EAAIF,IAAQ,MAAQ,GAAI,EAC9B,GAAIF,GAAK,MAAQC,GAAK,KAAM,OAAO,EACnC,GAAID,GAAK,KAAM,OAAOI,EACtB,GAAIH,GAAK,KAAM,OAAQG,EACvB,UAAWJ,IAAM,iBAAmBC,IAAM,SAAU,OAAQD,EAAIC,GAAKG,EACrE,OAAOD,EAASE,QAAQC,OAAON,GAAIM,OAAOL,IAAMG,CAClD,C,MAOaG,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,uJAMUC,KAAAC,QAAyB,GACzBD,KAAAE,KAAkB,GAElBF,KAAAG,QAAmB,MACnBH,KAAAI,aAAuB,oBACvBJ,KAAAK,aAAuB,UACvBL,KAAAM,kBAA4B,WAC5BN,KAAAO,cAAwB,OAExBP,KAAAQ,gBAA0B,yBAG1BR,KAAAS,aAAuB,GAGvBT,KAAAU,SAAmB,EA+N5B,CAvNC,cAAYC,GACV,OAAOX,KAAKY,WAAaZ,KAAKa,Y,CAGhC,eAAYC,GACV,OAAOd,KAAKC,QAAQc,QAAOC,IAAMA,EAAEC,M,CAGrC,gBAAYC,GACV,OAAOlB,KAAKc,YAAYK,KAAIrC,IAC1B,GAAIA,EAAIsC,MAAO,cAActC,EAAIsC,QAAU,SAAW,GAAGtC,EAAIsC,UAAYtC,EAAIsC,MAC7E,MAAO,oBAAoB,IAC1BC,KAAK,I,CAGV,cAAYC,GACV,MAAMC,EAAOvB,KAAKW,WAClB,IAAKY,EAAM,OAAOvB,KAAKE,KACvB,MAAMpB,EAAMkB,KAAKC,QAAQuB,MAAKR,GAAKA,EAAES,KAAOF,EAAKG,WACjD,IAAK5C,EAAK,OAAOkB,KAAKE,KACtB,MAAO,IAAIF,KAAKE,MAAMqB,MAAK,CAACnC,EAAGC,IAC7BF,EAAcN,EAAaC,EAAKM,GAAIP,EAAaC,EAAKO,GAAIkC,EAAKI,UAAW,IAAIC,KAAKC,SAAS7B,KAAK8B,U,CAIrG,aAAYC,GACV,GAAI/B,KAAKgC,YAAc9C,UAAW,OAAOc,KAAKsB,WAC9C,MAAMW,EAAQjC,KAAKgC,UAAYhC,KAAKU,SACpC,OAAOV,KAAKsB,WAAWY,MAAMD,EAAOA,EAAQjC,KAAKU,S,CAGnD,cAAYyB,GACV,GAAInC,KAAKgC,YAAc9C,UAAW,OAAO,EACzC,OAAOkD,KAAKC,KAAKrC,KAAKsB,WAAWgB,OAAStC,KAAKU,S,CAGjD,eAAY6B,GACV,IAAKvC,KAAKS,aAAc,OAAO,IAAI+B,IACnC,OAAO,IAAIA,IAAIxC,KAAKS,aAAagC,MAAM,KAAKtB,IAAIuB,QAAQ3B,QAAO4B,IAAMC,MAAMD,K,CAGrE,UAAAE,CAAWnB,GACjB1B,KAAK8C,OAAOC,KAAK,CAAErB,aAEnB,IAAK1B,KAAKY,UAAW,CACnB,MAAMoC,EAAMhD,KAAKa,aACjBb,KAAKa,aAAemC,GAAKtB,WAAaA,EAClC,CAAEA,WAAUC,UAAWqB,EAAIrB,YAAc,MAAQ,OAAS,OAC1D,CAAED,WAAUC,UAAW,M,EAI/B,MAAAsB,GACE,MAAMnC,YAAEA,EAAWiB,UAAEA,EAASI,WAAEA,EAAUhC,QAAEA,GAAYH,KACxD,MAAMkD,GAAW/C,GAAW4B,EAAUO,SAAW,EACjD,MAAMC,EAAcvC,KAAKuC,YACzB,MAAMhB,EAAOvB,KAAKW,WAClB,MAAMwC,EAAgBnD,KAAKgC,YAAc9C,WAAaiD,EAAa,EAEnE,OACEiB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBAAe,YAAYpD,GAAWjB,WAC/CkE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,MAAO,CAAEC,oBAAqBzD,KAAKkB,cAAgBwC,KAAK,SAGzEN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aAAaG,KAAK,OAC1B5C,EAAYK,KAAIrC,IACf,MAAM6E,EAAWpC,GAAMG,WAAa5C,EAAI2C,GACxC,MAAMmC,EAAW9E,EAAI+E,SAChBF,EAAYpC,EAAKI,YAAc,MAAQ,YAAc,aAAgB,OACtEzC,UACJ,OACEkE,EAAA,OACEE,IAAKxE,EAAI2C,GACT8B,MAAO,CACL,cAAe,KACf,0BAA2BzE,EAAI+E,SAC/B,cAAe/E,EAAIgF,QAAU,QAC7B,eAAgBhF,EAAIgF,QAAU,UAEhCJ,KAAK,eAAc,YACRE,EACXG,SAAUjF,EAAI+E,SAAW,EAAI3E,UAC7B8E,QAAS,IAAMlF,EAAI+E,UAAY7D,KAAK6C,WAAW/D,EAAI2C,IACnDwC,UAAYC,IACV,GAAIpF,EAAI+E,WAAaK,EAAEZ,MAAQ,SAAWY,EAAEZ,MAAQ,KAAM,CACxDY,EAAEC,iBACFnE,KAAK6C,WAAW/D,EAAI2C,G,GAGxB+B,MAAO1E,EAAIsF,SAAW,CAAEA,gBAAiBtF,EAAIsF,WAAa,SAAW,GAAGtF,EAAIsF,aAAetF,EAAIsF,UAAuBlF,WAEtHkE,EAAA,WAASiB,GAAG,OAAOC,QAAQ,kBAAkBC,SAAQ,KAACC,MAAM,aACzD1F,EAAI2F,QAENd,GACCP,EAAA,QAAMG,MAAM,iBAAgB,cAAa,QACtChC,EAAKI,YAAc,MAAQ,IAAM,KAGlC,KAMXxB,GAAWuE,MAAMC,KAAK,CAAErC,OAAQ,IAAKnB,KAAI,CAACyD,EAAGC,IAC5CzB,EAAA,OACEE,IAAK,MAAMuB,IACXtB,MAAM,MACNG,KAAMmB,IAAM,EAAI,SAAW,MAAK,aACpBA,IAAM,EAAI7E,KAAKK,aAAenB,WAEzC4B,EAAYK,KAAIrC,GACfsE,EAAA,OAAKE,IAAKxE,EAAI2C,GAAI8B,MAAM,OAAOG,KAAK,QAClCN,EAAA,eAAakB,QAAQ,OAAOlD,MAAM,cAOzC8B,GACCE,EAAA,WAAAE,IAAA,2CACEC,MAAM,YACNc,GAAG,IACHC,QAAQ,mBACRE,MAAM,YACNhB,MAAO,CAAEsB,WAAY,WAEpB9E,KAAKI,eAKRD,GAAW4B,EAAUZ,KAAI,CAACpC,EAAKgG,KAC/B,MAAMC,EAAazC,EAAY0C,IAAIF,GACnC,OACE3B,EAAA,OACEE,IAAKyB,EACLxB,MAAO,CACLxE,IAAO,KACP,gBAAiBiG,EACjB,iBAAkB,MAEpBtB,KAAK,MACLK,SAAU,EAAC,gBACI/D,KAAKS,aAAeuE,EAAa9F,UAChD8E,QAAS,IAAMhE,KAAKkF,WAAWnC,KAAK,CAAEhE,MAAKgG,aAC3Cd,UAAYC,IACV,GAAIA,EAAEZ,MAAQ,SAAWY,EAAEZ,MAAQ,IAAK,CACtCY,EAAEC,iBACFnE,KAAKkF,WAAWnC,KAAK,CAAEhE,MAAKgG,Y,IAI/BjE,EAAYK,KAAIrC,GACfsE,EAAA,WACEE,IAAKxE,EAAI2C,GACT8B,MAAO,CACL4B,KAAQ,KACR,cAAerG,EAAIgF,QAAU,QAC7B,eAAgBhF,EAAIgF,QAAU,UAEhCO,GAAG,OACHC,QAAQ,mBACRc,eAAgB,EAChB1B,KAAK,QAEJhE,OAAOb,EAAaC,EAAKC,IAAQ,OAGlC,MAOboE,GACCC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,UAAAE,IAAA,2CACE+B,KAAK,SACL9B,MAAM,cACN+B,SAAUtF,KAAKgC,YAAc,EAC7BgC,QAAS,KACPhE,KAAKgC,UAAYhC,KAAKgC,UAAa,EACnChC,KAAKuF,aAAaxC,KAAK,CAAEf,UAAWhC,KAAKgC,WAAY,GAGvDoB,EAAA,WAAAE,IAAA,2CAASe,GAAG,OAAOC,QAAQ,mBAAmBtE,KAAKM,oBAErD8C,EAAA,WAAAE,IAAA,2CAASe,GAAG,OAAOC,QAAQ,kBAAkBE,MAAM,aAChDxE,KAAKQ,gBACHgF,QAAQ,SAAU9F,OAAOM,KAAKgC,UAAa,IAC3CwD,QAAQ,UAAW9F,OAAOyC,KAE/BiB,EAAA,UAAAE,IAAA,2CACE+B,KAAK,SACL9B,MAAM,cACN+B,SAAUtF,KAAKgC,WAAcG,EAAa,EAC1C6B,QAAS,KACPhE,KAAKgC,UAAYhC,KAAKgC,UAAa,EACnChC,KAAKuF,aAAaxC,KAAK,CAAEf,UAAWhC,KAAKgC,WAAY,GAGvDoB,EAAA,WAAAE,IAAA,2CAASe,GAAG,OAAOC,QAAQ,mBAAmBtE,KAAKO,kB","ignoreList":[]}
1
+ {"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","collator","m","compare","String","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","loadingLabel","previousPageLabel","nextPageLabel","pageStatusLabel","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","Intl","Collator","locale","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","as","variant","emphasis","color","header","Array","from","_","i","gridColumn","rowIndex","isSelected","has","dsRowClick","cell","lineTruncation","type","disabled","dsPageChange","replace"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.table-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n overflow-x: auto;\n width: 100%;\n}\n\n.table {\n display: grid;\n width: 100%;\n min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n display: contents;\n}\n\n.header-cell {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075) var(--dimension-space-100);\n background-color: var(--color-background-secondary);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n -webkit-user-select: none;\n user-select: none;\n position: sticky;\n top: 0;\n z-index: 2;\n}\n\n.header-cell--sortable {\n cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n background-color: var(--color-translucent-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n display: contents;\n}\n\n.row--clickable {\n cursor: pointer;\n}\n\n.row:hover .cell {\n background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n background-color: var(--color-interaction-hover);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-075) var(--dimension-space-100);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n min-height: var(--dimension-size-500);\n background-color: var(--color-background-primary);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n.align-center {\n justify-content: center;\n text-align: center;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-400);\n background-color: var(--color-background-primary);\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-100);\n border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n background-color: var(--color-background-primary);\n}\n\n.page-button {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-050) var(--dimension-space-100);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-075);\n cursor: pointer;\n transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n columnId: string;\n direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n id: string;\n header: string;\n accessorKey?: string;\n accessor?: (row: T) => unknown;\n sortable?: boolean;\n align?: 'left' | 'right' | 'center';\n width?: string | number;\n minWidth?: string | number;\n hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n if (col.accessor) return col.accessor(row);\n return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection, collator: Intl.Collator): number {\n const m = dir === 'asc' ? 1 : -1;\n if (a == null && b == null) return 0;\n if (a == null) return m;\n if (b == null) return -m;\n if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n return collator.compare(String(a), String(b)) * m;\n}\n\n@Component({\n tag: 'ds-table',\n styleUrl: 'Table.css',\n scoped: true,\n})\nexport class Table {\n @Prop() columns: TableColumn[] = [];\n @Prop() data: unknown[] = [];\n @Prop() sortState: SortState | undefined;\n @Prop() loading: boolean = false;\n @Prop() emptyMessage: string = 'No results found.';\n @Prop() loadingLabel: string = 'Loading';\n @Prop() previousPageLabel: string = 'Previous';\n @Prop() nextPageLabel: string = 'Next';\n /** Use `{page}` and `{total}` placeholders. */\n @Prop() pageStatusLabel: string = 'Page {page} of {total}';\n @Prop() locale: string | undefined;\n /** Comma-separated zero-based row indices that are selected. */\n @Prop() selectedRows: string = '';\n /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n @Prop({ mutable: true }) pageIndex: number | undefined;\n @Prop() pageSize: number = 20;\n\n @State() private internalSort: SortState | undefined;\n\n @Event() dsSort!: EventEmitter<{ columnId: string }>;\n @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n private get activeSort(): SortState | undefined {\n return this.sortState ?? this.internalSort;\n }\n\n private get visibleCols(): TableColumn[] {\n return this.columns.filter(c => !c.hide);\n }\n\n private get gridTemplate(): string {\n return this.visibleCols.map(col => {\n if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n return 'minmax(120px, 1fr)';\n }).join(' ');\n }\n\n private get sortedData(): unknown[] {\n const sort = this.activeSort;\n if (!sort) return this.data;\n const col = this.columns.find(c => c.id === sort.columnId);\n if (!col) return this.data;\n return [...this.data].sort((a, b) =>\n compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction, new Intl.Collator(this.locale))\n );\n }\n\n private get pagedData(): unknown[] {\n if (this.pageIndex === undefined) return this.sortedData;\n const start = this.pageIndex * this.pageSize;\n return this.sortedData.slice(start, start + this.pageSize);\n }\n\n private get totalPages(): number {\n if (this.pageIndex === undefined) return 1;\n return Math.ceil(this.sortedData.length / this.pageSize);\n }\n\n private get selectedSet(): Set<number> {\n if (!this.selectedRows) return new Set();\n return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n }\n\n private handleSort(columnId: string) {\n this.dsSort.emit({ columnId });\n // Toggle internal sort if consumer hasn't provided sortState\n if (!this.sortState) {\n const cur = this.internalSort;\n this.internalSort = cur?.columnId === columnId\n ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n : { columnId, direction: 'asc' };\n }\n }\n\n render() {\n const { visibleCols, pagedData, totalPages, loading } = this;\n const isEmpty = !loading && pagedData.length === 0;\n const selectedSet = this.selectedSet;\n const sort = this.activeSort;\n const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n return (\n <Host>\n <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n <div class=\"table-scroll\">\n <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n {/* Header row */}\n <div class=\"header-row\" role=\"row\">\n {visibleCols.map(col => {\n const isSorted = sort?.columnId === col.id;\n const ariaSort = col.sortable\n ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n : undefined;\n return (\n <div\n key={col.id}\n class={{\n 'header-cell': true,\n 'header-cell--sortable': !!col.sortable,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n role=\"columnheader\"\n aria-sort={ariaSort}\n tabIndex={col.sortable ? 0 : undefined}\n onClick={() => col.sortable && this.handleSort(col.id)}\n onKeyDown={(e: KeyboardEvent) => {\n if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault();\n this.handleSort(col.id);\n }\n }}\n style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n >\n <ds-text as=\"span\" variant=\"text-body-small\" emphasis color=\"secondary\">\n {col.header}\n </ds-text>\n {isSorted && (\n <span class=\"sort-indicator\" aria-hidden=\"true\">\n {sort.direction === 'asc' ? '↑' : '↓'}\n </span>\n )}\n </div>\n );\n })}\n </div>\n\n {/* Loading skeleton */}\n {loading && Array.from({ length: 5 }).map((_, i) => (\n <div\n key={`sk-${i}`}\n class=\"row\"\n role={i === 0 ? 'status' : 'row'}\n aria-label={i === 0 ? this.loadingLabel : undefined}\n >\n {visibleCols.map(col => (\n <div key={col.id} class=\"cell\" role=\"cell\">\n <ds-skeleton variant=\"text\" width=\"60%\" />\n </div>\n ))}\n </div>\n ))}\n\n {/* Empty state */}\n {isEmpty && (\n <ds-text\n class=\"empty-row\"\n as=\"p\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n style={{ gridColumn: '1 / -1' }}\n >\n {this.emptyMessage}\n </ds-text>\n )}\n\n {/* Data rows */}\n {!loading && pagedData.map((row, rowIndex) => {\n const isSelected = selectedSet.has(rowIndex);\n return (\n <div\n key={rowIndex}\n class={{\n 'row': true,\n 'row--selected': isSelected,\n 'row--clickable': true,\n }}\n role=\"row\"\n tabIndex={0}\n aria-selected={this.selectedRows ? isSelected : undefined}\n onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.dsRowClick.emit({ row, rowIndex });\n }\n }}\n >\n {visibleCols.map(col => (\n <ds-text\n key={col.id}\n class={{\n 'cell': true,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n as=\"span\"\n variant=\"text-body-medium\"\n lineTruncation={1}\n role=\"cell\"\n >\n {String(getCellValue(col, row) ?? '')}\n </ds-text>\n ))}\n </div>\n );\n })}\n </div>\n </div>\n\n {/* Built-in pagination */}\n {hasPagination && (\n <div class=\"table-pagination\">\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex === 0}\n onClick={() => {\n this.pageIndex = this.pageIndex! - 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <ds-text as=\"span\" variant=\"text-body-small\">{this.previousPageLabel}</ds-text>\n </button>\n <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n {this.pageStatusLabel\n .replace('{page}', String(this.pageIndex! + 1))\n .replace('{total}', String(totalPages))}\n </ds-text>\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex! >= totalPages - 1}\n onClick={() => {\n this.pageIndex = this.pageIndex! + 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <ds-text as=\"span\" variant=\"text-body-small\">{this.nextPageLabel}</ds-text>\n </button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/components/ds-tag.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as o,H as r,h as t,a as n,t as a}from"./index.js";import{d as i}from"./p-BBpXpv4D.js";import{C as s}from"./p-Cx-ywr1e.js";const c=()=>`.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--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-radius:var(--dimension-radius-025)}.ds-interaction-fill.sc-ds-tag-h,.ds-interaction-fill.sc-ds-tag{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before,.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before{z-index:1}.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-tag-h,.ds-interaction-fill--bordered.sc-ds-tag{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tag-h,.ds-interaction-fill--selected.sc-ds-tag{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-tag-h>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill.sc-ds-tag>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill__content.sc-ds-tag{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-tag-h,.ds-interaction-fill--on-medium.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-bold.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-strong.sc-ds-tag{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-tag-h,.ds-interaction-fill--on-always-dark.sc-ds-tag{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-tag-h,.ds-interaction-fill--on-navigation.sc-ds-tag{--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)}.sc-ds-tag-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-tag: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-tag{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-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag: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-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{cursor:pointer;outline:none}.tag__label.sc-ds-tag{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:0;min-width:0}.tag__icon-slot.sc-ds-tag{display:contents}.tag__icon-slot.sc-ds-tag-s>*,.tag__icon-slot .sc-ds-tag-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-tag{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-tag::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-tag:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-tag:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:0}.tag__remove-x.sc-ds-tag{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-tag-s>*,.tag__remove .sc-ds-tag-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const e={md:"md",sm:"sm",xs:"xs"};const d=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.intent="neutral";this.contrast="faint";this.size="md";this.rounded=false}render(){const o=s[this.size];const r=e[this.size];const a=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return t(n,{key:"02ca7b75456ebc4f0f6cb812c9559c02b33fe971",class:{tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded},style:a},t("span",{key:"897ae9dd64962a0cda6b1e7d9db1791809db498f",class:"tag__icon-slot","data-icon-size":r},t("slot",{key:"1aae6d2f5c22b86bd7f183133260ade3cd8fb547",name:"icon"})),t("ds-text",{key:"48e40708ae55a5da22ef8d4b16be5d581281cd7d",class:"tag__label",as:"span",variant:o,color:"inherit"},this.label))}static get style(){return c()}},[262,"ds-tag",{label:[1],intent:[1],contrast:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"]}]);function l(){if(typeof customElements==="undefined"){return}const o=["ds-tag","ds-text"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(a(o))){customElements.define(a(o),d)}break;case"ds-text":if(!customElements.get(a(o))){i()}break}}))}l();const g=d;const u=l;export{g as DsTag,u as defineCustomElement};
1
+ import{p as o,H as r,h as t,a as n,t as a}from"./index.js";import{d as i}from"./p-CKjNw4Tl.js";import{C as s}from"./p-Cx-ywr1e.js";const c=()=>`.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--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-radius:var(--dimension-radius-025)}.ds-interaction-fill.sc-ds-tag-h,.ds-interaction-fill.sc-ds-tag{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before,.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before{z-index:1}.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-tag-h,.ds-interaction-fill--bordered.sc-ds-tag{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tag-h,.ds-interaction-fill--selected.sc-ds-tag{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-tag-h>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill.sc-ds-tag>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill__content.sc-ds-tag{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-tag-h,.ds-interaction-fill--on-medium.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-bold.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-strong.sc-ds-tag{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-tag-h,.ds-interaction-fill--on-always-dark.sc-ds-tag{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-tag-h,.ds-interaction-fill--on-navigation.sc-ds-tag{--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)}.sc-ds-tag-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-tag: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-tag{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-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag: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-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{cursor:pointer;outline:none}.tag__label.sc-ds-tag{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:0;min-width:0}.tag__icon-slot.sc-ds-tag{display:contents}.tag__icon-slot.sc-ds-tag-s>*,.tag__icon-slot .sc-ds-tag-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-tag{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-tag::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-tag:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-tag:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:0}.tag__remove-x.sc-ds-tag{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-tag-s>*,.tag__remove .sc-ds-tag-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const e={md:"md",sm:"sm",xs:"xs"};const d=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.intent="neutral";this.contrast="faint";this.size="md";this.rounded=false}render(){const o=s[this.size];const r=e[this.size];const a=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return t(n,{key:"02ca7b75456ebc4f0f6cb812c9559c02b33fe971",class:{tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded},style:a},t("span",{key:"897ae9dd64962a0cda6b1e7d9db1791809db498f",class:"tag__icon-slot","data-icon-size":r},t("slot",{key:"1aae6d2f5c22b86bd7f183133260ade3cd8fb547",name:"icon"})),t("ds-text",{key:"48e40708ae55a5da22ef8d4b16be5d581281cd7d",class:"tag__label",as:"span",variant:o,color:"inherit"},this.label))}static get style(){return c()}},[262,"ds-tag",{label:[1],intent:[1],contrast:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"]}]);function l(){if(typeof customElements==="undefined"){return}const o=["ds-tag","ds-text"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(a(o))){customElements.define(a(o),d)}break;case"ds-text":if(!customElements.get(a(o))){i()}break}}))}l();const g=d;const u=l;export{g as DsTag,u as defineCustomElement};
2
2
  //# sourceMappingURL=ds-tag.js.map
package/dist/components/ds-text.js CHANGED
@@ -1,2 +1,2 @@
1
- import{T as o,d as p}from"./p-BBpXpv4D.js";const s=o;const t=p;export{s as DsText,t as defineCustomElement};
1
+ import{T as o,d as s}from"./p-CKjNw4Tl.js";const t=o;const p=s;export{t as DsText,p as defineCustomElement};
2
2
  //# sourceMappingURL=ds-text.js.map
package/dist/components/ds-tooltip-data-viz.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as t,H as o,h as i,a as s,t as a}from"./index.js";import{d as e}from"./p-BBpXpv4D.js";import{T as n}from"./p-drBA73M_.js";import{r as d}from"./p-BvmooLHV.js";const r=()=>`.ds-control--md.sc-ds-tooltip-data-viz-h,.ds-control--md.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-data-viz-h,.ds-control--sm.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-data-viz-h,.ds-control--xs.sc-ds-tooltip-data-viz{--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-radius:var(--dimension-radius-025)}.sc-ds-tooltip-data-viz-h{position:absolute;z-index:var(--dimension-z-index-tooltip);display:block;box-sizing:border-box;background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md));border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;opacity:0}.tooltip-data-viz--visible.sc-ds-tooltip-data-viz-h{animation:tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards}.tooltip-data-viz__item.sc-ds-tooltip-data-viz{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--dimension-space-025);padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-data-viz__label.sc-ds-tooltip-data-viz,.tooltip-data-viz__value.sc-ds-tooltip-data-viz{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}@keyframes tooltip-data-viz-fade-in{from{opacity:0}to{opacity:1}}`;const l=12;const c=8;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.value="";this.label="";this.x=0;this.y=0;this.delay=n.animationDelayInstant;this.side="right";this.align="bottom";this.visible=false;this.delayTimer=null}componentDidLoad(){this.scheduleShow();this.calculatePlacement()}disconnectedCallback(){this.clearDelayTimer()}onAnchorChange(){requestAnimationFrame((()=>this.calculatePlacement()))}onDelayChange(){if(!this.visible)this.scheduleShow()}get showDelayMs(){return d(this.delay,n.animationDelayInstant)}clearDelayTimer(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}}scheduleShow(){this.clearDelayTimer();this.visible=false;const t=this.showDelayMs;if(t<=0){this.visible=true;return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.visible=true;requestAnimationFrame((()=>this.calculatePlacement()))}),t)}calculatePlacement(){const t=this.el.getBoundingClientRect();if(!t.width||!t.height)return;const o=t.right>window.innerWidth-c?"left":"right";const i=t.bottom>window.innerHeight-c?"top":"bottom";if(o!==this.side)this.side=o;if(i!==this.align)this.align=i}render(){const t=this.side==="right"?`${l}px`:`calc(-100% - ${l}px)`;const o=this.align==="bottom"?`${l}px`:`calc(-100% - ${l}px)`;return i(s,{key:"fa0b920d58e0bdc6f73cf9cfba662248510400cf",class:{"tooltip-data-viz":true,"tooltip-data-viz--visible":this.visible},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${t}, ${o})`}},i("div",{key:"f43cedc005b4e2a24758f982cf313fe14ab93ef0",class:"tooltip-data-viz__item ds-control--md"},i("ds-text",{key:"e9d044b75685d5dba8e7a47be3ad9925770b766a",class:"tooltip-data-viz__label",as:"span",variant:"text-body-medium",color:"var(--color-foreground-on-translucent-background-secondary)"},this.label),i("ds-text",{key:"52f3c6645bd49f0137bcf2770595e846202881d5",class:"tooltip-data-viz__value",as:"span",variant:"text-body-medium",emphasis:true,color:"var(--color-foreground-on-translucent-background-primary)"},this.value)))}get el(){return this}static get watchers(){return{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}}static get style(){return r()}},[2,"ds-tooltip-data-viz",{value:[8],label:[1],x:[2],y:[2],delay:[8],side:[32],align:[32],visible:[32]},undefined,{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip-data-viz","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip-data-viz":if(!customElements.get(a(t))){customElements.define(a(t),p)}break;case"ds-text":if(!customElements.get(a(t))){e()}break}}))}h();const m=p;const v=h;export{m as DsTooltipDataViz,v as defineCustomElement};
1
+ import{p as t,H as i,h as o,a as s,t as a}from"./index.js";import{d as e}from"./p-CKjNw4Tl.js";import{T as n}from"./p-drBA73M_.js";import{r as d}from"./p-BvmooLHV.js";const r=()=>`.ds-control--md.sc-ds-tooltip-data-viz-h,.ds-control--md.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-data-viz-h,.ds-control--sm.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-data-viz-h,.ds-control--xs.sc-ds-tooltip-data-viz{--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-radius:var(--dimension-radius-025)}.sc-ds-tooltip-data-viz-h{position:absolute;z-index:var(--dimension-z-index-tooltip);display:block;box-sizing:border-box;background-color:var(--color-translucent-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md));border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;opacity:0}.tooltip-data-viz--visible.sc-ds-tooltip-data-viz-h{animation:tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards}.tooltip-data-viz__item.sc-ds-tooltip-data-viz{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--dimension-space-025);padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-data-viz__label.sc-ds-tooltip-data-viz,.tooltip-data-viz__value.sc-ds-tooltip-data-viz{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}@keyframes tooltip-data-viz-fade-in{from{opacity:0}to{opacity:1}}`;const l=12;const c=8;const p=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.value="";this.label="";this.x=0;this.y=0;this.delay=n.animationDelayInstant;this.side="right";this.align="bottom";this.visible=false;this.delayTimer=null}componentDidLoad(){this.scheduleShow();this.calculatePlacement()}disconnectedCallback(){this.clearDelayTimer()}onAnchorChange(){requestAnimationFrame((()=>this.calculatePlacement()))}onDelayChange(){if(!this.visible)this.scheduleShow()}get showDelayMs(){return d(this.delay,n.animationDelayInstant)}clearDelayTimer(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}}scheduleShow(){this.clearDelayTimer();this.visible=false;const t=this.showDelayMs;if(t<=0){this.visible=true;return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.visible=true;requestAnimationFrame((()=>this.calculatePlacement()))}),t)}calculatePlacement(){const t=this.el.getBoundingClientRect();if(!t.width||!t.height)return;const i=t.right>window.innerWidth-c?"left":"right";const o=t.bottom>window.innerHeight-c?"top":"bottom";if(i!==this.side)this.side=i;if(o!==this.align)this.align=o}render(){const t=this.side==="right"?`${l}px`:`calc(-100% - ${l}px)`;const i=this.align==="bottom"?`${l}px`:`calc(-100% - ${l}px)`;return o(s,{key:"fa0b920d58e0bdc6f73cf9cfba662248510400cf",class:{"tooltip-data-viz":true,"tooltip-data-viz--visible":this.visible},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${t}, ${i})`}},o("div",{key:"f43cedc005b4e2a24758f982cf313fe14ab93ef0",class:"tooltip-data-viz__item ds-control--md"},o("ds-text",{key:"676d356ac2ec15d88001322e8f8c03b23bf776db",class:"tooltip-data-viz__label",as:"span",variant:"text-body-medium",color:"var(--color-translucent-foreground-secondary)"},this.label),o("ds-text",{key:"d5569acbb80fdbf156d9f1e4605ad6761b1ec5e9",class:"tooltip-data-viz__value",as:"span",variant:"text-body-medium",emphasis:true,color:"var(--color-translucent-foreground-primary)"},this.value)))}get el(){return this}static get watchers(){return{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}}static get style(){return r()}},[2,"ds-tooltip-data-viz",{value:[8],label:[1],x:[2],y:[2],delay:[8],side:[32],align:[32],visible:[32]},undefined,{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip-data-viz","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip-data-viz":if(!customElements.get(a(t))){customElements.define(a(t),p)}break;case"ds-text":if(!customElements.get(a(t))){e()}break}}))}h();const m=p;const v=h;export{m as DsTooltipDataViz,v as defineCustomElement};
2
2
  //# sourceMappingURL=ds-tooltip-data-viz.js.map
package/dist/components/ds-tooltip-data-viz.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["tooltipDataVizCss","CURSOR_OFFSET_PX","VIEWPORT_PAD_PX","TooltipDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","label","x","y","delay","TOKEN_DEFAULTS","animationDelayInstant","side","align","visible","delayTimer","componentDidLoad","scheduleShow","calculatePlacement","disconnectedCallback","clearDelayTimer","onAnchorChange","requestAnimationFrame","onDelayChange","showDelayMs","resolveCssTimeMs","clearTimeout","ms","setTimeout","rect","el","getBoundingClientRect","width","height","nextSide","right","window","innerWidth","nextAlign","bottom","innerHeight","render","translateX","translateY","h","Host","key","class","style","left","top","transform","as","variant","color","emphasis"],"sources":["src/wc/components/TooltipDataViz/TooltipDataViz.css?tag=ds-tooltip-data-viz&encapsulation=scoped","src/wc/components/TooltipDataViz/TooltipDataViz.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n box instead of stacking the host's padding on top of the item's. */\n:host {\n position: absolute;\n z-index: var(--dimension-z-index-tooltip);\n display: block;\n box-sizing: border-box;\n background-color: var(--color-background-translucent);\n backdrop-filter: blur(var(--effect-blur-md));\n -webkit-backdrop-filter: blur(var(--effect-blur-md));\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--dimension-space-025);\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n@keyframes tooltip-data-viz-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n","import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point, …).\n * Donut charts skip this — legend sync already surfaces the hovered slice.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n tag: 'ds-tooltip-data-viz',\n styleUrl: 'TooltipDataViz.css',\n scoped: true,\n})\nexport class TooltipDataViz {\n @Element() el!: HTMLElement;\n\n @Prop() value: string | number = '';\n @Prop() label: string = '';\n /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n @Prop() x: number = 0;\n @Prop() y: number = 0;\n\n /**\n * Show delay after mount before the callout appears.\n * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n * immediate feedback while scrubbing; prefer the default. Mount once per\n * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n @State() private side: TooltipDataVizSide = 'right';\n @State() private align: TooltipDataVizAlign = 'bottom';\n @State() private visible: boolean = false;\n\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n this.scheduleShow();\n this.calculatePlacement();\n }\n\n disconnectedCallback() {\n this.clearDelayTimer();\n }\n\n @Watch('x')\n @Watch('y')\n onAnchorChange() {\n requestAnimationFrame(() => this.calculatePlacement());\n }\n\n @Watch('delay')\n onDelayChange() {\n if (!this.visible) this.scheduleShow();\n }\n\n private get showDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n }\n\n private clearDelayTimer() {\n if (this.delayTimer) {\n clearTimeout(this.delayTimer);\n this.delayTimer = null;\n }\n }\n\n private scheduleShow() {\n this.clearDelayTimer();\n this.visible = false;\n const ms = this.showDelayMs;\n if (ms <= 0) {\n this.visible = true;\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n this.visible = true;\n requestAnimationFrame(() => this.calculatePlacement());\n }, ms);\n }\n\n private calculatePlacement() {\n const rect = this.el.getBoundingClientRect();\n if (!rect.width || !rect.height) return;\n\n const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n if (nextSide !== this.side) this.side = nextSide;\n if (nextAlign !== this.align) this.align = nextAlign;\n }\n\n render() {\n const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n return (\n <Host\n class={{\n 'tooltip-data-viz': true,\n 'tooltip-data-viz--visible': this.visible,\n }}\n style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n >\n <div class=\"tooltip-data-viz__item ds-control--md\">\n <ds-text\n class=\"tooltip-data-viz__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"var(--color-foreground-on-translucent-background-secondary)\"\n >\n {this.label}\n </ds-text>\n <ds-text\n class=\"tooltip-data-viz__value\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"var(--color-foreground-on-translucent-background-primary)\"\n >\n {this.value}\n </ds-text>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"uKAAA,MAAMA,EAAoB,IAAM,+mECGhC,MAAMC,EAAmB,GACzB,MAAMC,EAAkB,E,MAyBXC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,4CAQUC,KAAAC,MAAyB,GACzBD,KAAAE,MAAgB,GAEhBF,KAAAG,EAAY,EACZH,KAAAI,EAAY,EASZJ,KAAAK,MAAyBC,EAAeC,sBAE/BP,KAAAQ,KAA2B,QAC3BR,KAAAS,MAA6B,SAC7BT,KAAAU,QAAmB,MAE5BV,KAAAW,WAAmD,IA6F5D,CA3FC,gBAAAC,GACEZ,KAAKa,eACLb,KAAKc,oB,CAGP,oBAAAC,GACEf,KAAKgB,iB,CAKP,cAAAC,GACEC,uBAAsB,IAAMlB,KAAKc,sB,CAInC,aAAAK,GACE,IAAKnB,KAAKU,QAASV,KAAKa,c,CAG1B,eAAYO,GACV,OAAOC,EAAiBrB,KAAKK,MAAOC,EAAeC,sB,CAG7C,eAAAS,GACN,GAAIhB,KAAKW,WAAY,CACnBW,aAAatB,KAAKW,YAClBX,KAAKW,WAAa,I,EAId,YAAAE,GACNb,KAAKgB,kBACLhB,KAAKU,QAAU,MACf,MAAMa,EAAKvB,KAAKoB,YAChB,GAAIG,GAAM,EAAG,CACXvB,KAAKU,QAAU,KACf,M,CAEFV,KAAKW,WAAaa,YAAW,KAC3BxB,KAAKW,WAAa,KAClBX,KAAKU,QAAU,KACfQ,uBAAsB,IAAMlB,KAAKc,sBAAqB,GACrDS,E,CAGG,kBAAAT,GACN,MAAMW,EAAOzB,KAAK0B,GAAGC,wBACrB,IAAKF,EAAKG,QAAUH,EAAKI,OAAQ,OAEjC,MAAMC,EAA+BL,EAAKM,MAAQC,OAAOC,WAAavC,EAAkB,OAAS,QACjG,MAAMwC,EAAiCT,EAAKU,OAASH,OAAOI,YAAc1C,EAAkB,MAAQ,SAEpG,GAAIoC,IAAa9B,KAAKQ,KAAMR,KAAKQ,KAAOsB,EACxC,GAAII,IAAclC,KAAKS,MAAOT,KAAKS,MAAQyB,C,CAG7C,MAAAG,GACE,MAAMC,EAAatC,KAAKQ,OAAS,QAAU,GAAGf,MAAuB,gBAAgBA,OACrF,MAAM8C,EAAavC,KAAKS,QAAU,SAAW,GAAGhB,MAAuB,gBAAgBA,OAEvF,OACE+C,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,mBAAoB,KACpB,4BAA6B3C,KAAKU,SAEpCkC,MAAO,CAAEC,KAAM,GAAG7C,KAAKG,MAAO2C,IAAK,GAAG9C,KAAKI,MAAO2C,UAAW,aAAaT,MAAeC,OAEzFC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yCACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,0BACNK,GAAG,OACHC,QAAQ,mBACRC,MAAM,+DAELlD,KAAKE,OAERsC,EAAA,WAAAE,IAAA,2CACEC,MAAM,0BACNK,GAAG,OACHC,QAAQ,mBACRE,SAAQ,KACRD,MAAM,6DAELlD,KAAKC,Q","ignoreList":[]}
1
+ {"version":3,"names":["tooltipDataVizCss","CURSOR_OFFSET_PX","VIEWPORT_PAD_PX","TooltipDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","label","x","y","delay","TOKEN_DEFAULTS","animationDelayInstant","side","align","visible","delayTimer","componentDidLoad","scheduleShow","calculatePlacement","disconnectedCallback","clearDelayTimer","onAnchorChange","requestAnimationFrame","onDelayChange","showDelayMs","resolveCssTimeMs","clearTimeout","ms","setTimeout","rect","el","getBoundingClientRect","width","height","nextSide","right","window","innerWidth","nextAlign","bottom","innerHeight","render","translateX","translateY","h","Host","key","class","style","left","top","transform","as","variant","color","emphasis"],"sources":["src/wc/components/TooltipDataViz/TooltipDataViz.css?tag=ds-tooltip-data-viz&encapsulation=scoped","src/wc/components/TooltipDataViz/TooltipDataViz.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n box instead of stacking the host's padding on top of the item's. */\n:host {\n position: absolute;\n z-index: var(--dimension-z-index-tooltip);\n display: block;\n box-sizing: border-box;\n background-color: var(--color-translucent-translucent);\n backdrop-filter: blur(var(--effect-blur-md));\n -webkit-backdrop-filter: blur(var(--effect-blur-md));\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--dimension-space-025);\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n@keyframes tooltip-data-viz-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n","import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point, …).\n * Donut charts skip this — legend sync already surfaces the hovered slice.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n tag: 'ds-tooltip-data-viz',\n styleUrl: 'TooltipDataViz.css',\n scoped: true,\n})\nexport class TooltipDataViz {\n @Element() el!: HTMLElement;\n\n @Prop() value: string | number = '';\n @Prop() label: string = '';\n /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n @Prop() x: number = 0;\n @Prop() y: number = 0;\n\n /**\n * Show delay after mount before the callout appears.\n * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n * immediate feedback while scrubbing; prefer the default. Mount once per\n * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n @State() private side: TooltipDataVizSide = 'right';\n @State() private align: TooltipDataVizAlign = 'bottom';\n @State() private visible: boolean = false;\n\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n this.scheduleShow();\n this.calculatePlacement();\n }\n\n disconnectedCallback() {\n this.clearDelayTimer();\n }\n\n @Watch('x')\n @Watch('y')\n onAnchorChange() {\n requestAnimationFrame(() => this.calculatePlacement());\n }\n\n @Watch('delay')\n onDelayChange() {\n if (!this.visible) this.scheduleShow();\n }\n\n private get showDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n }\n\n private clearDelayTimer() {\n if (this.delayTimer) {\n clearTimeout(this.delayTimer);\n this.delayTimer = null;\n }\n }\n\n private scheduleShow() {\n this.clearDelayTimer();\n this.visible = false;\n const ms = this.showDelayMs;\n if (ms <= 0) {\n this.visible = true;\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n this.visible = true;\n requestAnimationFrame(() => this.calculatePlacement());\n }, ms);\n }\n\n private calculatePlacement() {\n const rect = this.el.getBoundingClientRect();\n if (!rect.width || !rect.height) return;\n\n const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n if (nextSide !== this.side) this.side = nextSide;\n if (nextAlign !== this.align) this.align = nextAlign;\n }\n\n render() {\n const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n return (\n <Host\n class={{\n 'tooltip-data-viz': true,\n 'tooltip-data-viz--visible': this.visible,\n }}\n style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n >\n <div class=\"tooltip-data-viz__item ds-control--md\">\n <ds-text\n class=\"tooltip-data-viz__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"var(--color-translucent-foreground-secondary)\"\n >\n {this.label}\n </ds-text>\n <ds-text\n class=\"tooltip-data-viz__value\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"var(--color-translucent-foreground-primary)\"\n >\n {this.value}\n </ds-text>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"uKAAA,MAAMA,EAAoB,IAAM,gnECGhC,MAAMC,EAAmB,GACzB,MAAMC,EAAkB,E,MAyBXC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,4CAQUC,KAAAC,MAAyB,GACzBD,KAAAE,MAAgB,GAEhBF,KAAAG,EAAY,EACZH,KAAAI,EAAY,EASZJ,KAAAK,MAAyBC,EAAeC,sBAE/BP,KAAAQ,KAA2B,QAC3BR,KAAAS,MAA6B,SAC7BT,KAAAU,QAAmB,MAE5BV,KAAAW,WAAmD,IA6F5D,CA3FC,gBAAAC,GACEZ,KAAKa,eACLb,KAAKc,oB,CAGP,oBAAAC,GACEf,KAAKgB,iB,CAKP,cAAAC,GACEC,uBAAsB,IAAMlB,KAAKc,sB,CAInC,aAAAK,GACE,IAAKnB,KAAKU,QAASV,KAAKa,c,CAG1B,eAAYO,GACV,OAAOC,EAAiBrB,KAAKK,MAAOC,EAAeC,sB,CAG7C,eAAAS,GACN,GAAIhB,KAAKW,WAAY,CACnBW,aAAatB,KAAKW,YAClBX,KAAKW,WAAa,I,EAId,YAAAE,GACNb,KAAKgB,kBACLhB,KAAKU,QAAU,MACf,MAAMa,EAAKvB,KAAKoB,YAChB,GAAIG,GAAM,EAAG,CACXvB,KAAKU,QAAU,KACf,M,CAEFV,KAAKW,WAAaa,YAAW,KAC3BxB,KAAKW,WAAa,KAClBX,KAAKU,QAAU,KACfQ,uBAAsB,IAAMlB,KAAKc,sBAAqB,GACrDS,E,CAGG,kBAAAT,GACN,MAAMW,EAAOzB,KAAK0B,GAAGC,wBACrB,IAAKF,EAAKG,QAAUH,EAAKI,OAAQ,OAEjC,MAAMC,EAA+BL,EAAKM,MAAQC,OAAOC,WAAavC,EAAkB,OAAS,QACjG,MAAMwC,EAAiCT,EAAKU,OAASH,OAAOI,YAAc1C,EAAkB,MAAQ,SAEpG,GAAIoC,IAAa9B,KAAKQ,KAAMR,KAAKQ,KAAOsB,EACxC,GAAII,IAAclC,KAAKS,MAAOT,KAAKS,MAAQyB,C,CAG7C,MAAAG,GACE,MAAMC,EAAatC,KAAKQ,OAAS,QAAU,GAAGf,MAAuB,gBAAgBA,OACrF,MAAM8C,EAAavC,KAAKS,QAAU,SAAW,GAAGhB,MAAuB,gBAAgBA,OAEvF,OACE+C,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,mBAAoB,KACpB,4BAA6B3C,KAAKU,SAEpCkC,MAAO,CAAEC,KAAM,GAAG7C,KAAKG,MAAO2C,IAAK,GAAG9C,KAAKI,MAAO2C,UAAW,aAAaT,MAAeC,OAEzFC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yCACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,0BACNK,GAAG,OACHC,QAAQ,mBACRC,MAAM,iDAELlD,KAAKE,OAERsC,EAAA,WAAAE,IAAA,2CACEC,MAAM,0BACNK,GAAG,OACHC,QAAQ,mBACRE,SAAQ,KACRD,MAAM,+CAELlD,KAAKC,Q","ignoreList":[]}
package/dist/components/ds-tooltip.js CHANGED
@@ -1,2 +1,2 @@
1
- import{T as o,d as s}from"./p-DUUi278M.js";const t=o;const p=s;export{t as DsTooltip,p as defineCustomElement};
1
+ import{T as o,d as s}from"./p-D-7A_rRS.js";const r=o;const t=s;export{r as DsTooltip,t as defineCustomElement};
2
2
  //# sourceMappingURL=ds-tooltip.js.map
package/dist/components/{p-yC55Ye2r.js → p-BCiKXnx7.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{p as t,H as o,c as n,h as i,a as d,t as l}from"./index.js";import{d as e}from"./p-9Qu1ls2y.js";import{d as r}from"./p-BBpXpv4D.js";import{C as s}from"./p-Cx-ywr1e.js";import{c as a}from"./p-DuFm-ieS.js";const c=()=>`.sc-ds-button-filled-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-filled: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-filled{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-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled: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-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--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-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled-host--icon.ds-control-width--hug.sc-ds-button-filled-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))}.button-filled-host--icon.ds-control-width--fill.sc-ds-button-filled-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-filled-h .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2), transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}`;const u={md:"md",sm:"sm",xs:"xs"};const f=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.isInactive=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=t=>{if(this.isInactive)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const t=s[this.size];const o=u[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label",[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(d,{key:"618114abfee2b998f3426ab282928a1727ac1a67",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...a(this.width)},tabIndex:-1},i("button",{key:"a67a6a0b907879b53e5c6ba14bee49a5abbba8cc",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive,"aria-label":this.accessibleName,onClick:this.handleClick},this.showIcon&&i("span",{key:"74682d9d33b26c0d2bf8946db979b30e05ce873b",class:"button-filled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"633eb6022d1efd850a3ea814c219fcf1cac2d640",name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("ds-text",{key:"0d7c6b95a244aec87d5f52da3ee3251aa19242a5",class:"button-filled__label ds-interaction-fill__content",as:"span",variant:t,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return c()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],isInactive:[4,"is-inactive"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(l(t))){customElements.define(l(t),f)}break;case"ds-icon":if(!customElements.get(l(t))){e()}break;case"ds-text":if(!customElements.get(l(t))){r()}break}}))}b();export{f as B,b as d};
2
- //# sourceMappingURL=p-yC55Ye2r.js.map
1
+ import{p as t,H as o,c as n,h as i,a as d,t as l}from"./index.js";import{d as e}from"./p-9Qu1ls2y.js";import{d as r}from"./p-CKjNw4Tl.js";import{C as s}from"./p-Cx-ywr1e.js";import{c as a}from"./p-DuFm-ieS.js";const c=()=>`.sc-ds-button-filled-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-filled: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-filled{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-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled: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-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--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-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled-host--icon.ds-control-width--hug.sc-ds-button-filled-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))}.button-filled-host--icon.ds-control-width--fill.sc-ds-button-filled-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-filled-h .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2), transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}`;const u={md:"md",sm:"sm",xs:"xs"};const f=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.isInactive=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=t=>{if(this.isInactive)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const t=s[this.size];const o=u[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label",[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(d,{key:"618114abfee2b998f3426ab282928a1727ac1a67",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...a(this.width)},tabIndex:-1},i("button",{key:"a67a6a0b907879b53e5c6ba14bee49a5abbba8cc",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive,"aria-label":this.accessibleName,onClick:this.handleClick},this.showIcon&&i("span",{key:"74682d9d33b26c0d2bf8946db979b30e05ce873b",class:"button-filled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"633eb6022d1efd850a3ea814c219fcf1cac2d640",name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("ds-text",{key:"0d7c6b95a244aec87d5f52da3ee3251aa19242a5",class:"button-filled__label ds-interaction-fill__content",as:"span",variant:t,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return c()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],isInactive:[4,"is-inactive"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(l(t))){customElements.define(l(t),f)}break;case"ds-icon":if(!customElements.get(l(t))){e()}break;case"ds-text":if(!customElements.get(l(t))){r()}break}}))}b();export{f as B,b as d};
2
+ //# sourceMappingURL=p-BCiKXnx7.js.map
package/dist/components/{p-CIwWLU82.js → p-BX7jIHFD.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{p as n,H as t,c as o,h as i,a as s,t as e}from"./index.js";import{d}from"./p-BkFpy8zp.js";import{d as r}from"./p-9Qu1ls2y.js";import{d as l}from"./p-BBpXpv4D.js";import{C as a}from"./p-Cx-ywr1e.js";import{c}from"./p-DuFm-ieS.js";const u=()=>`.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: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{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:focus-visible{outline:none}.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{outline:none}.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))}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-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;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 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)}.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.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}.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-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);--ds-focus-ring-color:var(--color-always-dark-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-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:0.25;pointer-events:none;cursor:not-allowed}.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-radius:var(--dimension-radius-025)}.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-radius:var(--dimension-radius-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-radius:var(--dimension-radius-025)}.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;align-self:flex-start}.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-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)}.button-unfilled-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))}.button-unfilled-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 .button-unfilled.sc-ds-button-unfilled{width:100%}.button-unfilled.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-button-unfilled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-unfilled--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--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)}.button-unfilled--contrast-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--contrast-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--contrast-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--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--on-navigation.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-navigation-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-navigation-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-navigation-background);--ds-button-unfilled-border:var(--color-navigation-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}.button-unfilled__icon-wrap.sc-ds-button-unfilled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-unfilled__label.sc-ds-button-unfilled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-unfilled__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}`;const f={md:"md",sm:"sm",xs:"xs"};const b=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick");this.dsChange=o(this,"dsChange");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.dot=false;this.isInactive=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive)return;this.dsClick.emit(n);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}effectiveContrast(){return this.backgroundContrast??"default"}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get showDot(){return this.variant==="icon"&&this.dot}get dotRing(){if(this.isActive&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const n=this.background;const t=this.effectiveContrast();const o=a[this.size];const e=f[this.size];const d={"button-unfilled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.isActive&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-medium":t==="medium","ds-interaction-fill--on-bold":t==="bold","ds-interaction-fill--on-strong":t==="strong","ds-interaction-fill--on-always-dark":n==="always-dark","ds-interaction-fill--on-navigation":n==="navigation","button-unfilled--active":this.isActive,"button-unfilled--bordered":this.hasBorder,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-unfilled--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--contrast-medium":t==="medium","button-unfilled--contrast-bold":t==="bold","button-unfilled--contrast-strong":t==="strong","button-unfilled--on-always-dark":n==="always-dark","button-unfilled--on-navigation":n==="navigation"};return i(s,{key:"75ce066872d1826e4f64e9a2337d1749778ea4f9",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...c(this.width)},tabIndex:-1},i("button",{key:"a3a0c18d952d1b78023fc89b216c5b77221247ac",ref:n=>{this.buttonEl=n??null},type:this.type,class:d,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},this.showIcon&&i("span",{key:"4105d7b25b912dc690827e2a26767a5b3fab17e0",class:"button-unfilled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"e8987c5531cb80d357000c5ead825c30376c5a96",name:this.icon,size:e,color:"inherit"}),this.showDot&&i("ds-badge",{key:"8f605dab684c672918e142d72c31f653140414d8",class:"button-unfilled__dot",variant:"dot",background:this.dotRing,label:"","aria-hidden":"true"})),this.showLabel&&i("ds-text",{key:"5d0065ca18def0991263879542ce21054a39cdd7",class:"button-unfilled__label ds-interaction-fill__content",as:"span",variant:o,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return u()}},[2,"ds-button-unfilled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],dot:[4],isInactive:[4,"is-inactive"],type:[1],backgroundContrast:[1,"on-background-contrast"],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(e(n))){customElements.define(e(n),b)}break;case"ds-badge":if(!customElements.get(e(n))){d()}break;case"ds-icon":if(!customElements.get(e(n))){r()}break;case"ds-text":if(!customElements.get(e(n))){l()}break}}))}h();export{b as B,h as d};
2
- //# sourceMappingURL=p-CIwWLU82.js.map
1
+ import{p as n,H as t,c as o,h as i,a as s,t as e}from"./index.js";import{d}from"./p-K6uLVQKX.js";import{d as r}from"./p-9Qu1ls2y.js";import{d as l}from"./p-CKjNw4Tl.js";import{C as a}from"./p-Cx-ywr1e.js";import{c}from"./p-DuFm-ieS.js";const u=()=>`.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: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{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:focus-visible{outline:none}.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{outline:none}.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))}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-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;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 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)}.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.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}.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-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);--ds-focus-ring-color:var(--color-always-dark-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-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:0.25;pointer-events:none;cursor:not-allowed}.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-radius:var(--dimension-radius-025)}.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-radius:var(--dimension-radius-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-radius:var(--dimension-radius-025)}.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;align-self:flex-start}.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-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)}.button-unfilled-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))}.button-unfilled-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 .button-unfilled.sc-ds-button-unfilled{width:100%}.button-unfilled.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-button-unfilled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-unfilled--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--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)}.button-unfilled--contrast-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--contrast-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--contrast-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--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--on-navigation.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-navigation-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-navigation-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-navigation-background);--ds-button-unfilled-border:var(--color-navigation-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}.button-unfilled__icon-wrap.sc-ds-button-unfilled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-unfilled__label.sc-ds-button-unfilled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-unfilled__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}`;const f={md:"md",sm:"sm",xs:"xs"};const b=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick");this.dsChange=o(this,"dsChange");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.dot=false;this.isInactive=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive)return;this.dsClick.emit(n);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}effectiveContrast(){return this.backgroundContrast??"default"}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get showDot(){return this.variant==="icon"&&this.dot}get dotRing(){if(this.isActive&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const n=this.background;const t=this.effectiveContrast();const o=a[this.size];const e=f[this.size];const d={"button-unfilled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.isActive&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-medium":t==="medium","ds-interaction-fill--on-bold":t==="bold","ds-interaction-fill--on-strong":t==="strong","ds-interaction-fill--on-always-dark":n==="always-dark","ds-interaction-fill--on-navigation":n==="navigation","button-unfilled--active":this.isActive,"button-unfilled--bordered":this.hasBorder,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-unfilled--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--contrast-medium":t==="medium","button-unfilled--contrast-bold":t==="bold","button-unfilled--contrast-strong":t==="strong","button-unfilled--on-always-dark":n==="always-dark","button-unfilled--on-navigation":n==="navigation"};return i(s,{key:"75ce066872d1826e4f64e9a2337d1749778ea4f9",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...c(this.width)},tabIndex:-1},i("button",{key:"a3a0c18d952d1b78023fc89b216c5b77221247ac",ref:n=>{this.buttonEl=n??null},type:this.type,class:d,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},this.showIcon&&i("span",{key:"4105d7b25b912dc690827e2a26767a5b3fab17e0",class:"button-unfilled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"e8987c5531cb80d357000c5ead825c30376c5a96",name:this.icon,size:e,color:"inherit"}),this.showDot&&i("ds-badge",{key:"8f605dab684c672918e142d72c31f653140414d8",class:"button-unfilled__dot",variant:"dot",background:this.dotRing,label:"","aria-hidden":"true"})),this.showLabel&&i("ds-text",{key:"5d0065ca18def0991263879542ce21054a39cdd7",class:"button-unfilled__label ds-interaction-fill__content",as:"span",variant:o,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return u()}},[2,"ds-button-unfilled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],dot:[4],isInactive:[4,"is-inactive"],type:[1],backgroundContrast:[1,"on-background-contrast"],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(e(n))){customElements.define(e(n),b)}break;case"ds-badge":if(!customElements.get(e(n))){d()}break;case"ds-icon":if(!customElements.get(e(n))){r()}break;case"ds-text":if(!customElements.get(e(n))){l()}break}}))}h();export{b as B,h as d};
2
+ //# sourceMappingURL=p-BX7jIHFD.js.map
package/dist/components/p-BeIuJQO9.js ADDED
@@ -0,0 +1,2 @@
1
+ import{p as e,H as s,h as r,a as o,t as n}from"./index.js";const a=()=>`:host(.ds-control--md),.ds-control--md{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}:host(.ds-control--sm),.ds-control--sm{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}:host(.ds-control--xs),.ds-control--xs{--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-radius:var(--dimension-radius-025)}@keyframes ds-shimmer-text-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}@keyframes ds-shimmer-surface-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}.ds-shimmer-text{--ds-shimmer-base:currentColor;--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc( var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay) );--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc( var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200) );background-color:var(--ds-shimmer-base);background-image:linear-gradient( 330deg, transparent calc(50% - var(--ds-shimmer-spread)), var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%, transparent calc(50% + var(--ds-shimmer-spread)) );background-repeat:no-repeat;background-position:100% 0;background-size:calc( 200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2 ) 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:ds-shimmer-text-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing) infinite}.ds-shimmer-surface{--ds-shimmer-surface-base:var(--color-foreground-quaternary);--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc( var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay) );--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc( var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200) );position:relative;overflow:hidden;background-color:var(--ds-shimmer-surface-base)}.ds-shimmer-surface::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient( 330deg, transparent calc(50% - var(--ds-shimmer-spread)), var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%, transparent calc(50% + var(--ds-shimmer-spread)) );background-repeat:no-repeat;background-position:100% 0;background-size:calc( 200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2 ) 100%;animation:ds-shimmer-surface-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing) infinite}:where([dir='rtl'],[dir='rtl'] *) .ds-shimmer-text,:where([dir='rtl'],[dir='rtl'] *) .ds-shimmer-surface::after{animation-direction:reverse}:host-context([dir='rtl']) .ds-shimmer-text,:host-context([dir='rtl']) .ds-shimmer-surface::after{animation-direction:reverse}@media (prefers-reduced-motion: reduce){.ds-shimmer-text{animation:none;background-image:none;-webkit-text-fill-color:currentColor}.ds-shimmer-surface::after{display:none;animation:none}}:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;vertical-align:middle;--ds-skeleton-base:var(--color-foreground-quaternary);--ds-shimmer:var(--color-shimmer-shimmer)}.skeleton__shape{--ds-shimmer-surface-base:var(--ds-skeleton-base);display:block;width:100%;height:100%;flex:0 0 auto;background-color:var(--ds-skeleton-base);border-radius:var(--dimension-radius-025)}:host(.skeleton--surface-on-medium-background){--ds-skeleton-base:var(--color-foreground-on-medium-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-medium-background)}:host(.skeleton--surface-on-bold-background){--ds-skeleton-base:var(--color-foreground-on-bold-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-bold-background)}:host(.skeleton--surface-on-strong-background){--ds-skeleton-base:var(--color-foreground-on-strong-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-strong-background)}:host(.skeleton--surface-on-translucent-background){--ds-skeleton-base:var(--color-translucent-foreground-quaternary);--ds-shimmer:var(--color-translucent-shimmer)}:host(.skeleton--surface-inverted){--ds-skeleton-base:var(--color-inverted-foreground-quaternary);--ds-shimmer:var(--color-inverted-shimmer)}:host(.skeleton--surface-media){--ds-skeleton-base:var(--color-media-foreground-quaternary);--ds-shimmer:var(--color-media-shimmer)}:host(.skeleton--surface-always-dark){--ds-skeleton-base:var(--color-always-dark-foreground-quaternary);--ds-shimmer:var(--color-always-dark-shimmer)}:host(.skeleton--surface-navigation){--ds-skeleton-base:var(--color-navigation-foreground-quaternary);--ds-shimmer:var(--color-navigation-shimmer)}:host(.skeleton--text){width:100%;height:var(--ds-skeleton-canvas-size);padding-block:var(--dimension-space-025)}:host(.skeleton--text) .skeleton__shape{height:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050))}:host(.skeleton--text-text-display-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-3xl)}:host(.skeleton--text-text-display-small){--ds-skeleton-canvas-size:var(--typography-lineheight-2xl)}:host(.skeleton--text-text-title-large){--ds-skeleton-canvas-size:var(--typography-lineheight-xl)}:host(.skeleton--text-text-title-medium),:host(.skeleton--text-text-body-large){--ds-skeleton-canvas-size:var(--typography-lineheight-lg)}:host(.skeleton--text-text-title-small),:host(.skeleton--text-text-body-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-md)}:host(.skeleton--text-text-body-small){--ds-skeleton-canvas-size:var(--typography-lineheight-sm)}:host(.skeleton--text-text-caption){--ds-skeleton-canvas-size:var(--typography-lineheight-xs)}:host(.skeleton--icon){width:var(--ds-skeleton-canvas-size);height:var(--ds-skeleton-canvas-size);padding:var(--dimension-space-025)}:host(.skeleton--icon) .skeleton__shape{width:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));height:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050))}:host(.skeleton--icon.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}:host(.skeleton--icon-xs){--ds-skeleton-canvas-size:var(--dimension-iconography-xs)}:host(.skeleton--icon-sm){--ds-skeleton-canvas-size:var(--dimension-iconography-sm)}:host(.skeleton--icon-md){--ds-skeleton-canvas-size:var(--dimension-iconography-md)}:host(.skeleton--icon-lg){--ds-skeleton-canvas-size:var(--dimension-iconography-lg)}:host(.skeleton--icon-xl){--ds-skeleton-canvas-size:var(--dimension-iconography-xl)}:host(.skeleton--icon-2xl){--ds-skeleton-canvas-size:var(--dimension-iconography-2xl)}:host(.skeleton--icon-3xl){--ds-skeleton-canvas-size:var(--dimension-iconography-3xl)}:host(.skeleton--control){width:100%;height:var(--ds-control-height)}:host(.skeleton--control.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}`;const i=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.variant="text";this.textVariant="text-body-medium";this.iconSize="md";this.controlSize="md";this.rounded=false;this.shimmer=true;this.surface="default"}get widthCss(){const e=this.width;if(e==null)return undefined;return typeof e==="number"?`${e}px`:e}render(){return r(o,{key:"0aca4cbc2e34c5ae919f33e75cba756840429da8","aria-hidden":"true",class:{skeleton:true,[`skeleton--${this.variant}`]:true,[`skeleton--text-${this.textVariant}`]:this.variant==="text",[`skeleton--icon-${this.iconSize}`]:this.variant==="icon",[`ds-control--${this.controlSize}`]:this.variant==="control",[`skeleton--surface-${this.surface}`]:true,"skeleton--rounded":this.variant!=="text"&&this.rounded},style:this.variant==="icon"?undefined:{width:this.widthCss}},r("span",{key:"959ff34228c81eba5372be62ef9e87efa2f96156",class:{skeleton__shape:true,"ds-shimmer-surface":this.shimmer}}))}static get style(){return a()}},[1,"ds-skeleton",{variant:[1],textVariant:[1,"text-variant"],iconSize:[1,"icon-size"],controlSize:[1,"control-size"],width:[8],rounded:[4],shimmer:[4],surface:[1]}]);function t(){if(typeof customElements==="undefined"){return}const e=["ds-skeleton"];e.forEach((e=>{switch(e){case"ds-skeleton":if(!customElements.get(n(e))){customElements.define(n(e),i)}break}}))}t();export{i as S,t as d};
2
+ //# sourceMappingURL=p-BeIuJQO9.js.map
package/dist/components/p-BeIuJQO9.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["skeletonCss","Skeleton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","textVariant","iconSize","controlSize","rounded","shimmer","surface","widthCss","v","width","undefined","render","h","Host","key","class","skeleton","style","skeleton__shape"],"sources":["src/wc/components/Skeleton/Skeleton.css?tag=ds-skeleton&encapsulation=shadow","src/wc/components/Skeleton/Skeleton.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/shimmer.css';\n\n:host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: 0;\n vertical-align: middle;\n --ds-skeleton-base: var(--color-foreground-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer);\n}\n\n.skeleton__shape {\n --ds-shimmer-surface-base: var(--ds-skeleton-base);\n\n display: block;\n width: 100%;\n height: 100%;\n flex: 0 0 auto;\n background-color: var(--ds-skeleton-base);\n border-radius: var(--dimension-radius-025);\n}\n\n/* ── Surface context ───────────────────────────────────────────────────── */\n\n:host(.skeleton--surface-on-medium-background) {\n --ds-skeleton-base: var(--color-foreground-on-medium-background-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer-on-medium-background);\n}\n\n:host(.skeleton--surface-on-bold-background) {\n --ds-skeleton-base: var(--color-foreground-on-bold-background-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer-on-bold-background);\n}\n\n:host(.skeleton--surface-on-strong-background) {\n --ds-skeleton-base: var(--color-foreground-on-strong-background-quaternary);\n --ds-shimmer: var(--color-shimmer-shimmer-on-strong-background);\n}\n\n:host(.skeleton--surface-on-translucent-background) {\n --ds-skeleton-base: var(--color-translucent-foreground-quaternary);\n --ds-shimmer: var(--color-translucent-shimmer);\n}\n\n:host(.skeleton--surface-inverted) {\n --ds-skeleton-base: var(--color-inverted-foreground-quaternary);\n --ds-shimmer: var(--color-inverted-shimmer);\n}\n\n:host(.skeleton--surface-media) {\n --ds-skeleton-base: var(--color-media-foreground-quaternary);\n --ds-shimmer: var(--color-media-shimmer);\n}\n\n:host(.skeleton--surface-always-dark) {\n --ds-skeleton-base: var(--color-always-dark-foreground-quaternary);\n --ds-shimmer: var(--color-always-dark-shimmer);\n}\n\n:host(.skeleton--surface-navigation) {\n --ds-skeleton-base: var(--color-navigation-foreground-quaternary);\n --ds-shimmer: var(--color-navigation-shimmer);\n}\n\n/* ── Text ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--text) {\n width: 100%;\n height: var(--ds-skeleton-canvas-size);\n padding-block: var(--dimension-space-025);\n}\n\n:host(.skeleton--text) .skeleton__shape {\n height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--text-text-display-medium) { --ds-skeleton-canvas-size: var(--typography-lineheight-3xl); }\n:host(.skeleton--text-text-display-small) { --ds-skeleton-canvas-size: var(--typography-lineheight-2xl); }\n:host(.skeleton--text-text-title-large) { --ds-skeleton-canvas-size: var(--typography-lineheight-xl); }\n:host(.skeleton--text-text-title-medium),\n:host(.skeleton--text-text-body-large) { --ds-skeleton-canvas-size: var(--typography-lineheight-lg); }\n:host(.skeleton--text-text-title-small),\n:host(.skeleton--text-text-body-medium) { --ds-skeleton-canvas-size: var(--typography-lineheight-md); }\n:host(.skeleton--text-text-body-small) { --ds-skeleton-canvas-size: var(--typography-lineheight-sm); }\n:host(.skeleton--text-text-caption) { --ds-skeleton-canvas-size: var(--typography-lineheight-xs); }\n\n/* ── Icon ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--icon) {\n width: var(--ds-skeleton-canvas-size);\n height: var(--ds-skeleton-canvas-size);\n padding: var(--dimension-space-025);\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n width: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n height: calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));\n}\n\n:host(.skeleton--icon.skeleton--rounded) .skeleton__shape {\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.skeleton--icon-xs) { --ds-skeleton-canvas-size: var(--dimension-iconography-xs); }\n:host(.skeleton--icon-sm) { --ds-skeleton-canvas-size: var(--dimension-iconography-sm); }\n:host(.skeleton--icon-md) { --ds-skeleton-canvas-size: var(--dimension-iconography-md); }\n:host(.skeleton--icon-lg) { --ds-skeleton-canvas-size: var(--dimension-iconography-lg); }\n:host(.skeleton--icon-xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-xl); }\n:host(.skeleton--icon-2xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-2xl); }\n:host(.skeleton--icon-3xl) { --ds-skeleton-canvas-size: var(--dimension-iconography-3xl); }\n\n/* ── Control ───────────────────────────────────────────────────────────── */\n\n:host(.skeleton--control) {\n width: 100%;\n height: var(--ds-control-height);\n}\n\n:host(.skeleton--control.skeleton--rounded) .skeleton__shape {\n border-radius: var(--dimension-radius-half);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { IconSize } from '../Icon/Icon';\nimport type { TextVariant } from '../Text/text-types';\nimport type { ControlSize } from '../../utils/control-text';\n\nexport type SkeletonVariant = 'text' | 'icon' | 'control';\nexport type SkeletonSurface =\n | 'default'\n | 'on-bold-background'\n | 'on-strong-background'\n | 'on-medium-background'\n | 'on-translucent-background'\n | 'navigation'\n | 'media'\n | 'always-dark'\n | 'inverted';\n\n@Component({\n tag: 'ds-skeleton',\n styleUrl: 'Skeleton.css',\n shadow: true,\n})\nexport class Skeleton {\n @Prop() variant: SkeletonVariant = 'text';\n /** Text metric recipe whose line-height defines the text canvas. */\n @Prop() textVariant: TextVariant = 'text-body-medium';\n /** Iconography token whose square canvas defines the icon canvas. */\n @Prop() iconSize: IconSize = 'md';\n /** Shared control-density size whose height defines the control canvas. */\n @Prop() controlSize: ControlSize = 'md';\n /** Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons. */\n @Prop() width: string | number | undefined;\n /** Round icon skeletons into circles and control skeletons into pills. Ignored for text. */\n @Prop() rounded: boolean = false;\n /** Whether to show the shimmer animation. */\n @Prop() shimmer: boolean = true;\n /** Surface context used to select the matching foreground base and shimmer tokens. */\n @Prop() surface: SkeletonSurface = 'default';\n\n private get widthCss() {\n const v = this.width;\n if (v == null) return undefined;\n return typeof v === 'number' ? `${v}px` : v;\n }\n\n render() {\n return (\n <Host\n aria-hidden=\"true\"\n class={{\n 'skeleton': true,\n [`skeleton--${this.variant}`]: true,\n [`skeleton--text-${this.textVariant}`]: this.variant === 'text',\n [`skeleton--icon-${this.iconSize}`]: this.variant === 'icon',\n [`ds-control--${this.controlSize}`]: this.variant === 'control',\n [`skeleton--surface-${this.surface}`]: true,\n 'skeleton--rounded': this.variant !== 'text' && this.rounded,\n }}\n style={this.variant === 'icon' ? undefined : { width: this.widthCss }}\n >\n <span\n class={{\n 'skeleton__shape': true,\n 'ds-shimmer-surface': this.shimmer,\n }}\n />\n </Host>\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAc,IAAM,kpP,MCsBbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,kEAMUC,KAAAC,QAA2B,OAE3BD,KAAAE,YAA2B,mBAE3BF,KAAAG,SAAqB,KAErBH,KAAAI,YAA2B,KAI3BJ,KAAAK,QAAmB,MAEnBL,KAAAM,QAAmB,KAEnBN,KAAAO,QAA2B,SAgCpC,CA9BC,YAAYC,GACV,MAAMC,EAAIT,KAAKU,MACf,GAAID,GAAK,KAAM,OAAOE,UACtB,cAAcF,IAAM,SAAW,GAAGA,MAAQA,C,CAG5C,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,yDACS,OACZC,MAAO,CACLC,SAAY,KACZ,CAAC,aAAajB,KAAKC,WAAY,KAC/B,CAAC,kBAAkBD,KAAKE,eAAgBF,KAAKC,UAAY,OACzD,CAAC,kBAAkBD,KAAKG,YAAaH,KAAKC,UAAY,OACtD,CAAC,eAAeD,KAAKI,eAAgBJ,KAAKC,UAAY,UACtD,CAAC,qBAAqBD,KAAKO,WAAY,KACvC,oBAAqBP,KAAKC,UAAY,QAAUD,KAAKK,SAEvDa,MAAOlB,KAAKC,UAAY,OAASU,UAAY,CAAED,MAAOV,KAAKQ,WAE3DK,EAAA,QAAAE,IAAA,2CACEC,MAAO,CACLG,gBAAmB,KACnB,qBAAsBnB,KAAKM,W","ignoreList":[]}