@ds-mo/ui 2.9.0 → 2.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.build-stamp +1 -1
- package/dist/components/ds-app-shell.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled-icon.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-fade.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-tab-group-nav.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/{p-g6MCxfm4.js → p-BFPfyJ8Z.js} +1 -1
- package/dist/components/p-BFPfyJ8Z.js.map +1 -0
- package/dist/components/{p-CiEc8Nwx.js → p-BOpHKDOG.js} +2 -2
- package/dist/components/p-BOpHKDOG.js.map +1 -0
- package/dist/components/{p-CDNVPM2x.js → p-BqOChY2z.js} +2 -2
- package/dist/components/p-Bz3jyrDV.js +2 -0
- package/dist/components/p-Bz3jyrDV.js.map +1 -0
- package/dist/components/p-Cynjsv-P.js +2 -0
- package/dist/components/p-Cynjsv-P.js.map +1 -0
- package/dist/components/{p-CKCBqwIw.js → p-DSTK6-QR.js} +2 -2
- package/dist/components/{p-C_hgdYcC.js → p-Dul5eGGE.js} +2 -2
- package/dist/components/{p-BA6a6P0b.js → p-evjnuLjj.js} +2 -2
- package/dist/components/{p-DnGr8qtq.js → p-j_GdU4Aa.js} +2 -2
- package/dist/components/{p-Cv5NDZug.js → p-w2Wrf0jC.js} +2 -2
- package/dist/lib/components/Icon/icon-cache.d.ts +24 -0
- package/dist/lib/components/Menu/menu-placement.d.ts +23 -0
- package/dist/lib/components/Menu/menu-position.d.ts +19 -0
- package/dist/lib/nav/badge-gradient-ring.d.ts +27 -0
- package/dist/lib/nav/chrome-transition.d.ts +24 -0
- package/dist/lib/nav/index.d.ts +16 -0
- package/dist/lib/nav/index.js +419 -0
- package/dist/lib/nav/index.js.map +7 -0
- package/dist/lib/nav/nav-chrome.d.ts +9 -0
- package/dist/lib/nav/shell-chrome-metrics.d.ts +11 -0
- package/dist/lib/nav/shell-gradient-presets.d.ts +20 -0
- package/dist/lib/nav/shell-gradient.d.ts +43 -0
- package/dist/lib/nav/shell-view-transition.d.ts +23 -0
- package/dist/lib/utils/index.d.ts +7 -0
- package/dist/lib/utils/index.js +188 -0
- package/dist/lib/utils/index.js.map +7 -0
- package/dist/lib/utils/resolve-css-length-px.d.ts +7 -0
- package/dist/lib/utils/resolve-css-time-ms.d.ts +7 -0
- package/dist/lib/utils/scroll-edge-fade.d.ts +12 -0
- package/dist/lib/utils/token-defaults.d.ts +33 -0
- package/dist/types/components/Badge/Badge.d.ts +5 -1
- package/dist/types/components/Icon/Icon.d.ts +14 -1
- package/dist/types/components/Icon/flag-icon-catalog.d.ts +2 -1
- package/dist/types/components/Icon/icon-cache.d.ts +25 -0
- package/dist/types/components/Icon/icon-svg.d.ts +26 -0
- package/dist/types/components/Icon/system-icon-catalog.d.ts +2 -1
- package/dist/types/components.d.ts +2 -2
- package/dist/types/nav/index.d.ts +1 -1
- package/dist/types/nav/shell-gradient-presets.d.ts +8 -0
- package/dist/types/utils/index.d.ts +1 -0
- package/package.json +9 -8
- package/src/wc/components/Badge/Badge.tsx +6 -2
- package/src/wc/components/Icon/Icon.tsx +82 -22
- package/src/wc/components/Icon/flag-icon-catalog.ts +33 -65
- package/src/wc/components/Icon/icon-cache.ts +47 -0
- package/src/wc/components/Icon/icon-svg.ts +73 -0
- package/src/wc/components/Icon/system-icon-catalog.ts +398 -795
- package/src/wc/components.d.ts +2 -2
- package/src/wc/nav/badge-gradient-ring.ts +4 -1
- package/src/wc/nav/index.ts +1 -0
- package/src/wc/nav/shell-gradient-presets.ts +16 -2
- package/src/wc/utils/index.ts +1 -0
- package/dist/components/p-0y48zKIF.js +0 -2
- package/dist/components/p-0y48zKIF.js.map +0 -1
- package/dist/components/p-CF4avTQw.js +0 -2
- package/dist/components/p-CF4avTQw.js.map +0 -1
- package/dist/components/p-CiEc8Nwx.js.map +0 -1
- package/dist/components/p-g6MCxfm4.js.map +0 -1
- /package/dist/components/{p-CDNVPM2x.js.map → p-BqOChY2z.js.map} +0 -0
- /package/dist/components/{p-CKCBqwIw.js.map → p-DSTK6-QR.js.map} +0 -0
- /package/dist/components/{p-C_hgdYcC.js.map → p-Dul5eGGE.js.map} +0 -0
- /package/dist/components/{p-BA6a6P0b.js.map → p-evjnuLjj.js.map} +0 -0
- /package/dist/components/{p-DnGr8qtq.js.map → p-j_GdU4Aa.js.map} +0 -0
- /package/dist/components/{p-Cv5NDZug.js.map → p-w2Wrf0jC.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as i,h as t,a as n,t as o}from"./index.js";import{d as r}from"./p-DnGr8qtq.js";import{d as a}from"./p-CDNVPM2x.js";import{a as d,T as c}from"./p-jjfqrXnP.js";import{r as u}from"./p-BWUTr_XN.js";import{r as l}from"./p-C1cBr-Ri.js";function h(e){const{anchorRect:s,popupWidth:i,popupHeight:t,side:n,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:c,viewportHeight:u}=e;let l=0;let h=0;switch(n){case"top":h=s.top-t-r;l=o==="start"?s.left+a:o==="end"?s.right-i+a:s.left+s.width/2-i/2+a;break;case"bottom":h=s.bottom+r;l=o==="start"?s.left+a:o==="end"?s.right-i+a:s.left+s.width/2-i/2+a;break;case"left":l=s.left-i-r;h=o==="start"?s.top+a:o==="end"?s.bottom-t+a:s.top+s.height/2-t/2+a;break;case"right":l=s.right+r;h=o==="start"?s.top+a:o==="end"?s.bottom-t+a:s.top+s.height/2-t/2+a;break}return{x:Math.min(Math.max(l,d),c-i-d),y:Math.min(Math.max(h,d),u-t-d)}}function m(e){return"variant"in e&&e.variant==="gradient-picker"}const f=()=>`.sc-ds-menu-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-menu:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-2) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{display:flex;align-items:center;height:var(--dimension-size-400);padding:var(--dimension-space-050) var(--dimension-space-075);-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:100%;min-height:var(--dimension-size-400);padding:var(--dimension-space-075);box-sizing:border-box;border:none;border-radius:var(--dimension-radius-025);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_selected-bg:var(--color-interaction-active)}.menu-item.sc-ds-menu:has(.menu-item__subtext){align-items:flex-start}.menu-item.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.menu-item--selected.sc-ds-menu::after{background:var(--_selected-bg);transition:none}.menu-item.sc-ds-menu:hover:not(:disabled):not(.menu-item--selected)::after{background:var(--_hover-bg);transition:none}.menu-item.sc-ds-menu:active:not(:disabled)::after{background:var(--_pressed-bg);transition:none}.menu-item--inactive.sc-ds-menu{opacity:0.5;cursor:not-allowed;pointer-events:none}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{padding:0 var(--dimension-space-025);color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{padding:0 var(--dimension-space-025);color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{position:relative;z-index:1;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const p=8;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=i(this,"dsClose");this.dsSelect=i(this,"dsSelect");this.dsGradientSelect=i(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=d.space050;this.alignOffset=0;this.initialFocusVisible=false;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(e){if(e){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return u(c.space050,c.space050)}get sideOffsetPx(){return u(this.sideOffset,c.space050)}get alignOffsetPx(){return u(this.alignOffset,0)}get popupFallbackWidthPx(){return u(c.menuWidthXs,c.menuWidthXs)}get popupFallbackHeightPx(){return u(c.menuFallbackHeight,c.menuFallbackHeight)}get closeAnimationMs(){return l(c.motionShort2,c.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>m(e)?[]:e.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(e){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let s=p;const i=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;e?.();return}if(s>0){s-=1;this.positionRetryRaf=requestAnimationFrame(i)}};this.positionRetryRaf=requestAnimationFrame(i)}calculatePosition(){const e=this.resolvedAnchor;if(!e)return false;const s=this.el.querySelector(".menu-popup");if(!s)return false;this.pos=h({anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth||this.popupFallbackWidthPx,popupHeight:s.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const e=this.flatItems;const s=e.findIndex((e=>e.isSelected&&!e.isInactive));const i=e.findIndex((e=>!e.isInactive));this.focusedIndex=s>=0?s:i>=0?i:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const s=e.target;const i=this.el.querySelector(".menu-popup");const t=this.resolvedAnchor;if(i?.contains(s)||t?.contains(s))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(e){if(!this.shouldRender||this.closing)return;const s=this.flatItems;const i=s.map(((e,s)=>({it:e,i:s}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!i.length)return;const t=i.indexOf(this.focusedIndex);const n=t<0?0:t;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[(n+1)%i.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[(n-1+i.length)%i.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[i.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const s=this.el.querySelectorAll(".menu-item");s[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e)}handleGradientSelect(e){this.dsGradientSelect.emit(e)}render(){if(!this.shouldRender)return t(n,{style:{display:"contents"}});const e=this.activeSections;let s=0;const i={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)i["width"]=this.menuWidth;if(this.minWidth)i["min-width"]=this.minWidth;return t(n,{style:{display:"contents"}},t("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:i,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((i,n)=>t("div",{key:n,class:{"menu-section":true,"menu-section--divided":n<e.length-1,"menu-section--gradient-picker":m(i)},role:i.header?"group":undefined,"aria-label":i.header},i.header&&t("div",{class:"section-header","aria-hidden":"true"},t("span",{class:"text-body-small-emphasis section-label"},i.header)),m(i)?t("ds-shell-gradient-picker",{value:i.value,onDsChange:e=>{e.stopPropagation();this.handleGradientSelect(e.detail)}}):i.items.map((e=>{const i=s++;const n=this.focusedIndex===i;return t("button",{key:i,type:"button",class:{"menu-item":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":n&&this.focusRingVisible,"menu-item--selected":!!e.isSelected,"menu-item--inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":n},role:"menuitem","aria-current":e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:n?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=i}},t("div",{class:"menu-item__content"},t("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&t("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&t("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue},"aria-hidden":"true"},t("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return f()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),g)}break;case"ds-shell-gradient-picker":if(!customElements.get(o(e))){r()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(e))){a()}break}}))}v();export{g as M,v as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as s,c as i,h as t,a as n,t as o}from"./index.js";import{d as r}from"./p-j_GdU4Aa.js";import{d as a}from"./p-BqOChY2z.js";import{a as d,T as c}from"./p-jjfqrXnP.js";import{r as u}from"./p-BWUTr_XN.js";import{r as l}from"./p-C1cBr-Ri.js";function h(e){const{anchorRect:s,popupWidth:i,popupHeight:t,side:n,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:c,viewportHeight:u}=e;let l=0;let h=0;switch(n){case"top":h=s.top-t-r;l=o==="start"?s.left+a:o==="end"?s.right-i+a:s.left+s.width/2-i/2+a;break;case"bottom":h=s.bottom+r;l=o==="start"?s.left+a:o==="end"?s.right-i+a:s.left+s.width/2-i/2+a;break;case"left":l=s.left-i-r;h=o==="start"?s.top+a:o==="end"?s.bottom-t+a:s.top+s.height/2-t/2+a;break;case"right":l=s.right+r;h=o==="start"?s.top+a:o==="end"?s.bottom-t+a:s.top+s.height/2-t/2+a;break}return{x:Math.min(Math.max(l,d),c-i-d),y:Math.min(Math.max(h,d),u-t-d)}}function m(e){return"variant"in e&&e.variant==="gradient-picker"}const f=()=>`.sc-ds-menu-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-menu:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-2) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{display:flex;align-items:center;height:var(--dimension-size-400);padding:var(--dimension-space-050) var(--dimension-space-075);-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:100%;min-height:var(--dimension-size-400);padding:var(--dimension-space-075);box-sizing:border-box;border:none;border-radius:var(--dimension-radius-025);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_selected-bg:var(--color-interaction-active)}.menu-item.sc-ds-menu:has(.menu-item__subtext){align-items:flex-start}.menu-item.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.menu-item--selected.sc-ds-menu::after{background:var(--_selected-bg);transition:none}.menu-item.sc-ds-menu:hover:not(:disabled):not(.menu-item--selected)::after{background:var(--_hover-bg);transition:none}.menu-item.sc-ds-menu:active:not(:disabled)::after{background:var(--_pressed-bg);transition:none}.menu-item--inactive.sc-ds-menu{opacity:0.5;cursor:not-allowed;pointer-events:none}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{padding:0 var(--dimension-space-025);color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{padding:0 var(--dimension-space-025);color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{position:relative;z-index:1;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const p=8;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=i(this,"dsClose");this.dsSelect=i(this,"dsSelect");this.dsGradientSelect=i(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=d.space050;this.alignOffset=0;this.initialFocusVisible=false;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(e){if(e){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return u(c.space050,c.space050)}get sideOffsetPx(){return u(this.sideOffset,c.space050)}get alignOffsetPx(){return u(this.alignOffset,0)}get popupFallbackWidthPx(){return u(c.menuWidthXs,c.menuWidthXs)}get popupFallbackHeightPx(){return u(c.menuFallbackHeight,c.menuFallbackHeight)}get closeAnimationMs(){return l(c.motionShort2,c.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>m(e)?[]:e.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(e){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let s=p;const i=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;e?.();return}if(s>0){s-=1;this.positionRetryRaf=requestAnimationFrame(i)}};this.positionRetryRaf=requestAnimationFrame(i)}calculatePosition(){const e=this.resolvedAnchor;if(!e)return false;const s=this.el.querySelector(".menu-popup");if(!s)return false;this.pos=h({anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth||this.popupFallbackWidthPx,popupHeight:s.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const e=this.flatItems;const s=e.findIndex((e=>e.isSelected&&!e.isInactive));const i=e.findIndex((e=>!e.isInactive));this.focusedIndex=s>=0?s:i>=0?i:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const s=e.target;const i=this.el.querySelector(".menu-popup");const t=this.resolvedAnchor;if(i?.contains(s)||t?.contains(s))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(e){if(!this.shouldRender||this.closing)return;const s=this.flatItems;const i=s.map(((e,s)=>({it:e,i:s}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!i.length)return;const t=i.indexOf(this.focusedIndex);const n=t<0?0:t;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[(n+1)%i.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[(n-1+i.length)%i.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[i.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const s=this.el.querySelectorAll(".menu-item");s[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e)}handleGradientSelect(e){this.dsGradientSelect.emit(e)}render(){if(!this.shouldRender)return t(n,{style:{display:"contents"}});const e=this.activeSections;let s=0;const i={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)i["width"]=this.menuWidth;if(this.minWidth)i["min-width"]=this.minWidth;return t(n,{style:{display:"contents"}},t("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:i,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((i,n)=>t("div",{key:n,class:{"menu-section":true,"menu-section--divided":n<e.length-1,"menu-section--gradient-picker":m(i)},role:i.header?"group":undefined,"aria-label":i.header},i.header&&t("div",{class:"section-header","aria-hidden":"true"},t("span",{class:"text-body-small-emphasis section-label"},i.header)),m(i)?t("ds-shell-gradient-picker",{value:i.value,onDsChange:e=>{e.stopPropagation();this.handleGradientSelect(e.detail)}}):i.items.map((e=>{const i=s++;const n=this.focusedIndex===i;return t("button",{key:i,type:"button",class:{"menu-item":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":n&&this.focusRingVisible,"menu-item--selected":!!e.isSelected,"menu-item--inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":n},role:"menuitem","aria-current":e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:n?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=i}},t("div",{class:"menu-item__content"},t("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&t("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&t("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue},"aria-hidden":"true"},t("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return f()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),g)}break;case"ds-shell-gradient-picker":if(!customElements.get(o(e))){r()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(e))){a()}break}}))}v();export{g as M,v as d};
|
|
2
|
+
//# sourceMappingURL=p-DSTK6-QR.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as n,c as i,h as t,a as r,t as e}from"./index.js";import{d as s}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as o,H as n,c as i,h as t,a as r,t as e}from"./index.js";import{d as s}from"./p-BOpHKDOG.js";import{d as c}from"./p-Cynjsv-P.js";const d=()=>`.sc-ds-button-unfilled-icon-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-icon: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-icon{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-icon:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-icon: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-icon{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-icon::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-button-unfilled-icon-h{display:inline-flex;flex:0 0 auto;width:var(--dimension-size-400);height:var(--dimension-size-400);min-width:var(--dimension-size-400);min-height:var(--dimension-size-400);outline:none;--ds-button-unfilled-icon-fg:var(--color-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-secondary);--ds-button-unfilled-icon-border:var(--color-border-tertiary)}.button-icon.sc-ds-button-unfilled-icon{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--dimension-space-075);background:transparent;border:none;border-radius:var(--dimension-radius-025);color:var(--ds-button-unfilled-icon-fg);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-icon.sc-ds-button-unfilled-icon::before,.button-icon.sc-ds-button-unfilled-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.button-icon.sc-ds-button-unfilled-icon::before{z-index:1}.button-icon.sc-ds-button-unfilled-icon::after{z-index:2}.button-icon--active-fill.sc-ds-button-unfilled-icon::before{background:var(--ds-button-unfilled-icon-active-bg)}.button-icon.sc-ds-button-unfilled-icon:hover:not(.button-icon--inactive)::after{background:var(--ds-button-unfilled-icon-hover-bg);transition:none}.button-icon.sc-ds-button-unfilled-icon:active:not(.button-icon--inactive)::after{background:var(--ds-button-unfilled-icon-pressed-bg);transition:none}.button-icon--active.sc-ds-button-unfilled-icon{color:var(--ds-button-unfilled-icon-fg-active)}.button-icon--bordered.sc-ds-button-unfilled-icon{box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--ds-button-unfilled-icon-border)}.button-icon--inactive.sc-ds-button-unfilled-icon{opacity:0.5;cursor:not-allowed;pointer-events:none}.button-icon--contrast-medium.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-medium-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-medium-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-medium-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-icon-border:var(--color-border-on-medium-background-tertiary);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.button-icon--contrast-bold.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-bold-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-bold-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-bold-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-icon-border:var(--color-border-on-bold-background-tertiary);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.button-icon--contrast-strong.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-strong-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-strong-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-strong-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-icon-border:var(--color-border-on-strong-background-tertiary);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.button-icon--on-always-dark.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-always-dark-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-always-dark-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-always-dark-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.button-icon--on-navigation.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-navigation-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-navigation-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-navigation-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-navigation-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-navigation-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.button-icon__icon-wrap.sc-ds-button-unfilled-icon{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-icon__dot.sc-ds-button-unfilled-icon{position:absolute;top:0;right:0;pointer-events:none}`;const a=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=i(this,"dsClick");this.dsChange=i(this,"dsChange");this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=false;this.dot=false;this.inactive=false;this.type="button";this.ariaLabel="action";this.buttonEl=null;this.handleClick=o=>{if(this.inactive)return;this.dsClick.emit(o);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}effectiveContrast(){return this.backgroundContrast??"default"}render(){const o=this.background;const n=this.effectiveContrast();const i={"button-icon":true,"ds-focus-ring-inset":true,"button-icon--active":this.isActive,"button-icon--active-fill":this.isActive&&this.activeFill,"button-icon--bordered":this.hasBorder,"button-icon--inactive":this.inactive,"button-icon--contrast-medium":n==="medium","button-icon--contrast-bold":n==="bold","button-icon--contrast-strong":n==="strong","button-icon--on-always-dark":o==="always-dark","button-icon--on-navigation":o==="navigation"};return t(r,{key:"ec89ac359f7d3e446e6c9e7590e7ebdd749853d2",tabIndex:-1},t("button",{key:"ba0e4c4a841917fd82e05b15f2a29c35e4261c19",ref:o=>{this.buttonEl=o??null},type:this.type,class:i,disabled:this.inactive,tabIndex:this.focusTabIndex??0,"aria-label":this.ariaLabel,"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},t("span",{key:"4ae9fef28410d70600d1d4f1716977da2580ff44",class:"button-icon__icon-wrap"},t("ds-icon",{key:"71669e8aec551277ce8ef3b5c4513b0735114133",name:this.icon,size:"md",color:"inherit"}),this.dot&&t("ds-badge",{key:"35e245c613bb8f32519a351624860b757b8eb863",class:"button-icon__dot",variant:"dot",background:"var(--ds-button-unfilled-icon-dot-ring)",label:"","aria-hidden":"true"}))))}get el(){return this}static get style(){return d()}},[2,"ds-button-unfilled-icon",{icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],dot:[4],inactive:[4],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 u(){if(typeof customElements==="undefined"){return}const o=["ds-button-unfilled-icon","ds-badge","ds-icon"];o.forEach((o=>{switch(o){case"ds-button-unfilled-icon":if(!customElements.get(e(o))){customElements.define(e(o),a)}break;case"ds-badge":if(!customElements.get(e(o))){s()}break;case"ds-icon":if(!customElements.get(e(o))){c()}break}}))}u();export{a as B,u as d};
|
|
2
|
+
//# sourceMappingURL=p-Dul5eGGE.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as r,c as t,h as s,a,t as n}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-CiEc8Nwx.js";const c=()=>`.sc-ds-tab-group-nav-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-tab-group-nav: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-tab-group-nav{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-tab-group-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav: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-tab-group-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group-nav:disabled,.tab[aria-disabled="true"].sc-ds-tab-group-nav{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsRovingExit=t(this,"dsRovingExit");this.value="";this.tabs=[];this.orientation="horizontal";this.selectionFollowsFocus=true;this.rovingEnabled=true;this.focusedTabId=""}get selectableTabs(){return i(this.tabs)}componentWillLoad(){this.syncFocusedTabId(this.value)}onValueChange(o,r){if(!this.selectionFollowsFocus){if(r===undefined||o!==this.focusedTabId){this.syncFocusedTabId(o)}return}if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const s=this.el.querySelector(`[data-tab-id="${o}"]`);if(s){s.focus({preventScroll:true})}else{r.blur()}}))}onTabsChange(){if(!this.selectableTabs.some((o=>o.id===this.focusedTabId))){this.syncFocusedTabId(this.value)}}async focusTab(o){this.focusedTabId=o;const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}async focusLastTab(){const o=this.selectableTabs;const r=[...o].reverse().find((o=>!o.disabled));if(r)await this.focusTab(r.id)}async focusFirstTab(){const o=this.selectableTabs.find((o=>!o.disabled));if(o)await this.focusTab(o.id)}syncFocusedTabId(o){const r=this.selectableTabs;if(r.some((r=>r.id===o&&!r.disabled))){this.focusedTabId=o;return}const t=r.find((o=>!o.disabled));this.focusedTabId=t?.id??""}selectTab(o,r){this.value=o;this.focusedTabId=o;this.dsChange.emit(o);if(r?.focus!==false){void this.focusTab(o)}}getFocusedIndex(){return this.selectableTabs.findIndex((o=>o.id===this.focusedTabId))}findEnabledLinear(o,r){const t=this.selectableTabs;for(let s=o+r;s>=0&&s<t.length;s+=r){if(!t[s]?.disabled)return s}return null}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let a=0;a<s;a++){const n=(o+r*(a+1)+s*(a+1))%s;if(!t[n]?.disabled)return n}return o}moveFocusToIndex(o){const r=this.selectableTabs[o];if(!r)return;this.focusedTabId=r.id;void this.focusTab(r.id)}activateFocusedTab(o){if(o.key!=="Enter"&&o.key!==" ")return;const r=this.selectableTabs.find((o=>o.id===this.focusedTabId));if(!r||r.disabled)return;o.preventDefault();this.selectTab(r.id,{focus:true})}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;if(!this.selectionFollowsFocus){if(o.key==="Enter"||o.key===" "){this.activateFocusedTab(o);return}}const t=this.selectionFollowsFocus?r.findIndex((o=>o.id===this.value)):this.getFocusedIndex();if(t<0)return;const s=this.orientation==="vertical";let a=null;let n=null;if(!s){if(o.key==="ArrowRight"){if(this.selectionFollowsFocus){a=this.findEnabled(t,1)}else{const o=this.findEnabledLinear(t,1);if(o===null)n="end";else a=o}}else if(o.key==="ArrowLeft"){if(this.selectionFollowsFocus){a=this.findEnabled(t,-1)}else{const o=this.findEnabledLinear(t,-1);if(o===null)n="start";else a=o}}}else{if(o.key==="ArrowDown"){if(this.selectionFollowsFocus){a=this.findEnabled(t,1)}else{const o=this.findEnabledLinear(t,1);if(o===null)n="end";else a=o}}else if(o.key==="ArrowUp"){if(this.selectionFollowsFocus){a=this.findEnabled(t,-1)}else{const o=this.findEnabledLinear(t,-1);if(o===null)n="start";else a=o}}}if(o.key==="Home"){const o=r.findIndex((o=>!o.disabled));a=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.disabled));a=o===-1?null:r.length-1-o}if(n){o.preventDefault();this.dsRovingExit.emit(n);return}if(a!==null&&a!==t){o.preventDefault();const t=r[a];if(this.selectionFollowsFocus){this.selectTab(t.id)}else{this.moveFocusToIndex(a)}}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}tabIndexForTab(o){if(!this.rovingEnabled)return-1;if(this.selectionFollowsFocus){return o.id===this.value?0:-1}return o.id===this.focusedTabId?0:-1}render(){const o=this.getBgClass();const r=this.orientation==="vertical";const t=this.background==="navigation";return s(a,{key:"a4b4621dd60ff2fb211ac5b41ddb51f82305a579",class:"tab-group-nav-host"},s("div",{key:"8cf7877266440461560b976dc198902a3b3a08e9",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r,"tab-list--on-navigation":t},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((t,a)=>{if(e(t)){return s("div",{key:`divider-${a}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const n=t.id===this.value;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":n,"ds-focus-ring-inset":true,[o]:!!o},"aria-selected":n,"aria-disabled":t.disabled||undefined,"aria-controls":t.panelId??undefined,disabled:t.disabled,tabIndex:this.tabIndexForTab(t),onClick:()=>!t.disabled&&this.selectTab(t.id),onFocus:()=>{if(!this.selectionFollowsFocus){this.focusedTabId=t.id}}},s("span",{class:{tab__label:true,"tab__label--dot":!!t.dot,[n?"text-body-medium-emphasis":"text-body-medium"]:true}},t.label,t.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return c()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],selectionFollowsFocus:[4,"selection-follows-focus"],rovingEnabled:[4,"roving-enabled"],focusedTabId:[32],focusTab:[64],focusLastTab:[64],focusFirstTab:[64]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(n(o))){customElements.define(n(o),l)}break;case"ds-badge":if(!customElements.get(n(o))){d()}break}}))}u();export{l as T,u as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as o,H as r,c as t,h as s,a,t as n}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-BOpHKDOG.js";const c=()=>`.sc-ds-tab-group-nav-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-tab-group-nav: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-tab-group-nav{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-tab-group-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav: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-tab-group-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group-nav:disabled,.tab[aria-disabled="true"].sc-ds-tab-group-nav{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsRovingExit=t(this,"dsRovingExit");this.value="";this.tabs=[];this.orientation="horizontal";this.selectionFollowsFocus=true;this.rovingEnabled=true;this.focusedTabId=""}get selectableTabs(){return i(this.tabs)}componentWillLoad(){this.syncFocusedTabId(this.value)}onValueChange(o,r){if(!this.selectionFollowsFocus){if(r===undefined||o!==this.focusedTabId){this.syncFocusedTabId(o)}return}if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const s=this.el.querySelector(`[data-tab-id="${o}"]`);if(s){s.focus({preventScroll:true})}else{r.blur()}}))}onTabsChange(){if(!this.selectableTabs.some((o=>o.id===this.focusedTabId))){this.syncFocusedTabId(this.value)}}async focusTab(o){this.focusedTabId=o;const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}async focusLastTab(){const o=this.selectableTabs;const r=[...o].reverse().find((o=>!o.disabled));if(r)await this.focusTab(r.id)}async focusFirstTab(){const o=this.selectableTabs.find((o=>!o.disabled));if(o)await this.focusTab(o.id)}syncFocusedTabId(o){const r=this.selectableTabs;if(r.some((r=>r.id===o&&!r.disabled))){this.focusedTabId=o;return}const t=r.find((o=>!o.disabled));this.focusedTabId=t?.id??""}selectTab(o,r){this.value=o;this.focusedTabId=o;this.dsChange.emit(o);if(r?.focus!==false){void this.focusTab(o)}}getFocusedIndex(){return this.selectableTabs.findIndex((o=>o.id===this.focusedTabId))}findEnabledLinear(o,r){const t=this.selectableTabs;for(let s=o+r;s>=0&&s<t.length;s+=r){if(!t[s]?.disabled)return s}return null}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let a=0;a<s;a++){const n=(o+r*(a+1)+s*(a+1))%s;if(!t[n]?.disabled)return n}return o}moveFocusToIndex(o){const r=this.selectableTabs[o];if(!r)return;this.focusedTabId=r.id;void this.focusTab(r.id)}activateFocusedTab(o){if(o.key!=="Enter"&&o.key!==" ")return;const r=this.selectableTabs.find((o=>o.id===this.focusedTabId));if(!r||r.disabled)return;o.preventDefault();this.selectTab(r.id,{focus:true})}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;if(!this.selectionFollowsFocus){if(o.key==="Enter"||o.key===" "){this.activateFocusedTab(o);return}}const t=this.selectionFollowsFocus?r.findIndex((o=>o.id===this.value)):this.getFocusedIndex();if(t<0)return;const s=this.orientation==="vertical";let a=null;let n=null;if(!s){if(o.key==="ArrowRight"){if(this.selectionFollowsFocus){a=this.findEnabled(t,1)}else{const o=this.findEnabledLinear(t,1);if(o===null)n="end";else a=o}}else if(o.key==="ArrowLeft"){if(this.selectionFollowsFocus){a=this.findEnabled(t,-1)}else{const o=this.findEnabledLinear(t,-1);if(o===null)n="start";else a=o}}}else{if(o.key==="ArrowDown"){if(this.selectionFollowsFocus){a=this.findEnabled(t,1)}else{const o=this.findEnabledLinear(t,1);if(o===null)n="end";else a=o}}else if(o.key==="ArrowUp"){if(this.selectionFollowsFocus){a=this.findEnabled(t,-1)}else{const o=this.findEnabledLinear(t,-1);if(o===null)n="start";else a=o}}}if(o.key==="Home"){const o=r.findIndex((o=>!o.disabled));a=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.disabled));a=o===-1?null:r.length-1-o}if(n){o.preventDefault();this.dsRovingExit.emit(n);return}if(a!==null&&a!==t){o.preventDefault();const t=r[a];if(this.selectionFollowsFocus){this.selectTab(t.id)}else{this.moveFocusToIndex(a)}}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}tabIndexForTab(o){if(!this.rovingEnabled)return-1;if(this.selectionFollowsFocus){return o.id===this.value?0:-1}return o.id===this.focusedTabId?0:-1}render(){const o=this.getBgClass();const r=this.orientation==="vertical";const t=this.background==="navigation";return s(a,{key:"a4b4621dd60ff2fb211ac5b41ddb51f82305a579",class:"tab-group-nav-host"},s("div",{key:"8cf7877266440461560b976dc198902a3b3a08e9",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r,"tab-list--on-navigation":t},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((t,a)=>{if(e(t)){return s("div",{key:`divider-${a}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const n=t.id===this.value;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":n,"ds-focus-ring-inset":true,[o]:!!o},"aria-selected":n,"aria-disabled":t.disabled||undefined,"aria-controls":t.panelId??undefined,disabled:t.disabled,tabIndex:this.tabIndexForTab(t),onClick:()=>!t.disabled&&this.selectTab(t.id),onFocus:()=>{if(!this.selectionFollowsFocus){this.focusedTabId=t.id}}},s("span",{class:{tab__label:true,"tab__label--dot":!!t.dot,[n?"text-body-medium-emphasis":"text-body-medium"]:true}},t.label,t.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return c()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],selectionFollowsFocus:[4,"selection-follows-focus"],rovingEnabled:[4,"roving-enabled"],focusedTabId:[32],focusTab:[64],focusLastTab:[64],focusFirstTab:[64]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(n(o))){customElements.define(n(o),l)}break;case"ds-badge":if(!customElements.get(n(o))){d()}break}}))}u();export{l as T,u as d};
|
|
2
|
+
//# sourceMappingURL=p-evjnuLjj.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as i,h as t,a as r,t as a}from"./index.js";import{d}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as s,c as i,h as t,a as r,t as a}from"./index.js";import{d}from"./p-BqOChY2z.js";import{D as c,S as n}from"./p-Bz3jyrDV.js";const l=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}.shell-gradient-picker.sc-ds-shell-gradient-picker{box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:var(--dimension-size-400);gap:var(--dimension-space-100);padding:var(--dimension-space-100)}.shell-gradient-picker__divider.sc-ds-shell-gradient-picker{flex:0 0 auto;align-self:center;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background-color:var(--color-border-tertiary)}`;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.value=c;this.handleSwatchSelect=e=>{if(e===this.value)return;this.value=e;this.dsChange.emit(e)}}renderSwatch(e){return t("ds-shell-gradient-swatch",{key:e,preset:e,selected:this.value===e,onDsSelect:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}})}render(){return t(r,{key:"4573ca5cb7b31160608c28c53bcf338064af564c"},t("div",{key:"c22001c9283f77dfcccc2266bf52623bb2baab9f",class:"shell-gradient-picker",role:"radiogroup","aria-label":"Shell gradient theme"},this.renderSwatch("none"),t("div",{key:"67d03eb0a87b4f54f05a0e83dc66fb248719dcbf",class:"shell-gradient-picker__divider","aria-hidden":"true"}),n.map((e=>this.renderSwatch(e)))))}static get style(){return l()}},[2,"ds-shell-gradient-picker",{value:[1537]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-shell-gradient-picker":if(!customElements.get(a(e))){customElements.define(a(e),h)}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(e))){d()}break}}))}o();export{h as S,o as d};
|
|
2
|
+
//# sourceMappingURL=p-j_GdU4Aa.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as o,c as n,h as l,a as i,t as d}from"./index.js";import{d as e}from"./p-CF4avTQw.js";const r=()=>`.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))}.sc-ds-button-filled-h{display:inline-flex;flex:0 0 auto;width:var(--dimension-size-400);height:var(--dimension-size-400);min-width:var(--dimension-size-400);min-height:var(--dimension-size-400);outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--dimension-space-075);border:none;border-radius:var(--dimension-radius-025);background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2), transform var(--effect-motion-short-2)}.button-filled.sc-ds-button-filled::before,.button-filled.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.button-filled.sc-ds-button-filled::before{z-index:1}.button-filled.sc-ds-button-filled::after{z-index:2}.button-filled.sc-ds-button-filled:hover:not(.button-filled--inactive)::before{background:color-mix(in oklch, var(--ds-button-filled-bg) 85%, var(--ds-button-filled-fg))}.button-filled.sc-ds-button-filled:active:not(.button-filled--inactive){transform:scale(var(--dimension-scale-subtle))}.button-filled.sc-ds-button-filled:active:not(.button-filled--inactive)::before{background:color-mix(in oklch, var(--ds-button-filled-bg) 80%, var(--ds-button-filled-fg))}.button-filled--inactive.sc-ds-button-filled{opacity:0.5;cursor:not-allowed;pointer-events:none}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.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 s=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.icon="";this.intent="brand";this.contrast="bold";this.inactive=false;this.type="button";this.ariaLabel="action";this.buttonEl=null;this.handleClick=t=>{if(this.inactive)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}render(){const t={"button-filled":true,"ds-focus-ring-inset":true,"button-filled--inactive":this.inactive,[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return l(i,{key:"aec4966e1b9991fd889db25ae02f7fdcc52f553b",tabIndex:-1},l("button",{key:"fb98aafd42093830d8760bff073ad3c99e78e02b",ref:t=>{this.buttonEl=t??null},type:this.type,class:t,disabled:this.inactive,"aria-label":this.ariaLabel,onClick:this.handleClick},l("span",{key:"4122a00b653c487af06589b6d424b5ddf53f6dd1",class:"button-filled__icon-wrap"},l("ds-icon",{key:"e67d2d10871bac70bbb6e7dbe8f8603d817c8af3",name:this.icon,size:"md",color:"inherit"}))))}get el(){return this}static get style(){return r()}},[2,"ds-button-filled",{icon:[1],intent:[1],contrast:[1],inactive:[4],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(d(t))){customElements.define(d(t),s)}break;case"ds-icon":if(!customElements.get(d(t))){e()}break}}))}u();export{s as B,u as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as t,H as o,c as n,h as l,a as i,t as d}from"./index.js";import{d as e}from"./p-Cynjsv-P.js";const r=()=>`.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))}.sc-ds-button-filled-h{display:inline-flex;flex:0 0 auto;width:var(--dimension-size-400);height:var(--dimension-size-400);min-width:var(--dimension-size-400);min-height:var(--dimension-size-400);outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--dimension-space-075);border:none;border-radius:var(--dimension-radius-025);background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2), transform var(--effect-motion-short-2)}.button-filled.sc-ds-button-filled::before,.button-filled.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.button-filled.sc-ds-button-filled::before{z-index:1}.button-filled.sc-ds-button-filled::after{z-index:2}.button-filled.sc-ds-button-filled:hover:not(.button-filled--inactive)::before{background:color-mix(in oklch, var(--ds-button-filled-bg) 85%, var(--ds-button-filled-fg))}.button-filled.sc-ds-button-filled:active:not(.button-filled--inactive){transform:scale(var(--dimension-scale-subtle))}.button-filled.sc-ds-button-filled:active:not(.button-filled--inactive)::before{background:color-mix(in oklch, var(--ds-button-filled-bg) 80%, var(--ds-button-filled-fg))}.button-filled--inactive.sc-ds-button-filled{opacity:0.5;cursor:not-allowed;pointer-events:none}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.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 s=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.icon="";this.intent="brand";this.contrast="bold";this.inactive=false;this.type="button";this.ariaLabel="action";this.buttonEl=null;this.handleClick=t=>{if(this.inactive)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}render(){const t={"button-filled":true,"ds-focus-ring-inset":true,"button-filled--inactive":this.inactive,[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return l(i,{key:"aec4966e1b9991fd889db25ae02f7fdcc52f553b",tabIndex:-1},l("button",{key:"fb98aafd42093830d8760bff073ad3c99e78e02b",ref:t=>{this.buttonEl=t??null},type:this.type,class:t,disabled:this.inactive,"aria-label":this.ariaLabel,onClick:this.handleClick},l("span",{key:"4122a00b653c487af06589b6d424b5ddf53f6dd1",class:"button-filled__icon-wrap"},l("ds-icon",{key:"e67d2d10871bac70bbb6e7dbe8f8603d817c8af3",name:this.icon,size:"md",color:"inherit"}))))}get el(){return this}static get style(){return r()}},[2,"ds-button-filled",{icon:[1],intent:[1],contrast:[1],inactive:[4],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(d(t))){customElements.define(d(t),s)}break;case"ds-icon":if(!customElements.get(d(t))){e()}break}}))}u();export{s as B,u as d};
|
|
2
|
+
//# sourceMappingURL=p-w2Wrf0jC.js.map
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
type IconCacheMap = Map<string, string>;
|
|
2
|
+
export declare function iconCacheKey(name: string, flag: boolean): string;
|
|
3
|
+
export declare function iconCache(): IconCacheMap;
|
|
4
|
+
/**
|
|
5
|
+
* Pre-register glyphs so ds-icon renders them synchronously — no lazy-chunk
|
|
6
|
+
* fetch, no first-paint pop-in. Import the SVG strings from `@ds-mo/icons`
|
|
7
|
+
* in the app (statically, so they ship in the app's own bundle):
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* import { Bell } from '@ds-mo/icons/svg/Bell';
|
|
11
|
+
* import { US } from '@ds-mo/icons/svg/flags/US';
|
|
12
|
+
* import { registerIcons } from '@ds-mo/ui/utils';
|
|
13
|
+
*
|
|
14
|
+
* registerIcons({ Bell });
|
|
15
|
+
* registerIcons({ US }, { flag: true });
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* Icons that are not registered still work — they lazy-load on first render
|
|
19
|
+
* and stay cached afterwards.
|
|
20
|
+
*/
|
|
21
|
+
export declare function registerIcons(icons: Record<string, string>, options?: {
|
|
22
|
+
flag?: boolean;
|
|
23
|
+
}): void;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { MenuAlign, MenuSide } from './menu-position';
|
|
2
|
+
/** Placement props bindable on `ds-menu` (side, align, offsets). */
|
|
3
|
+
export interface MenuPlacement {
|
|
4
|
+
side: MenuSide;
|
|
5
|
+
align: MenuAlign;
|
|
6
|
+
sideOffset: number | string;
|
|
7
|
+
alignOffset: number | string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Canonical `ds-menu` placement for the **panel-nav footer user menu**.
|
|
11
|
+
* Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).
|
|
12
|
+
*
|
|
13
|
+
* Not for BarNav overflow menus — those use `side="bottom"` / `align="end"` internally.
|
|
14
|
+
* `align: 'end'` bottom-aligns on the anchor; offsets nudge into the content area:
|
|
15
|
+
* - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).
|
|
16
|
+
* - `alignOffset` space-050 (4px): 4px below the footer user row.
|
|
17
|
+
*/
|
|
18
|
+
export declare const PANEL_NAV_USER_MENU_PLACEMENT: {
|
|
19
|
+
readonly side: "right";
|
|
20
|
+
readonly align: "end";
|
|
21
|
+
readonly sideOffset: "calc(var(--dimension-space-100) + var(--dimension-space-050))";
|
|
22
|
+
readonly alignOffset: "var(--dimension-space-050)";
|
|
23
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
|
|
2
|
+
export type MenuAlign = 'start' | 'center' | 'end';
|
|
3
|
+
export interface MenuPositionInput {
|
|
4
|
+
anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;
|
|
5
|
+
popupWidth: number;
|
|
6
|
+
popupHeight: number;
|
|
7
|
+
side: MenuSide;
|
|
8
|
+
align: MenuAlign;
|
|
9
|
+
sideOffsetPx: number;
|
|
10
|
+
alignOffsetPx: number;
|
|
11
|
+
viewportPadPx: number;
|
|
12
|
+
viewportWidth: number;
|
|
13
|
+
viewportHeight: number;
|
|
14
|
+
}
|
|
15
|
+
/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */
|
|
16
|
+
export declare function computeMenuPosition(input: MenuPositionInput): {
|
|
17
|
+
x: number;
|
|
18
|
+
y: number;
|
|
19
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/** Per-badge background-position for shell gradient ring sampling. */
|
|
2
|
+
export declare const BADGE_GRADIENT_POSITION_VAR = "--_badge-gradient-position";
|
|
3
|
+
export interface GradientSurface {
|
|
4
|
+
element: HTMLElement;
|
|
5
|
+
chromeHost: HTMLElement;
|
|
6
|
+
positionVar: string;
|
|
7
|
+
}
|
|
8
|
+
/** Whether the badge sits under `ds-app-shell[gradient]`. */
|
|
9
|
+
export declare function isShellGradientActive(from: HTMLElement): boolean;
|
|
10
|
+
/** Bar or panel chrome surface that owns the shell gradient stack. */
|
|
11
|
+
export declare function findGradientSurface(from: HTMLElement): GradientSurface | null;
|
|
12
|
+
interface ParsedPosition {
|
|
13
|
+
x: number;
|
|
14
|
+
y: number;
|
|
15
|
+
}
|
|
16
|
+
/** Parse a two-value CSS background-position (e.g. `-200px 0`). */
|
|
17
|
+
export declare function parseCssBackgroundPosition(value: string): ParsedPosition;
|
|
18
|
+
/**
|
|
19
|
+
* Background position for a badge ring so the shell gradient aligns with nav chrome.
|
|
20
|
+
* Uses badge center relative to the painted chrome surface.
|
|
21
|
+
*/
|
|
22
|
+
export declare function badgeGradientPosition(badgeHost: HTMLElement, surface: GradientSurface, shellPosition: string): string;
|
|
23
|
+
/** Resolve shell gradient position from chrome host custom properties. */
|
|
24
|
+
export declare function readShellGradientPosition(surface: GradientSurface): string;
|
|
25
|
+
/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */
|
|
26
|
+
export declare function syncBadgeGradientPosition(badgeHost: HTMLElement): void;
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/** Bubbling/composed events — `ds-app-shell` and `ds-bar-nav` coordinate during width motion. */
|
|
2
|
+
export declare const CHROME_TRANSITION_START = "dsChromeTransitionStart";
|
|
3
|
+
export declare const CHROME_TRANSITION_END = "dsChromeTransitionEnd";
|
|
4
|
+
export type ChromeTransitionSource = 'panel-nav' | 'panel-tools';
|
|
5
|
+
export interface ChromeTransitionDetail {
|
|
6
|
+
source: ChromeTransitionSource;
|
|
7
|
+
/** Panel-tools drawer motion direction; omitted for panel-nav. */
|
|
8
|
+
phase?: 'opening' | 'closing';
|
|
9
|
+
}
|
|
10
|
+
/** Reference-counted gate — used while panel-nav width is transitioning. */
|
|
11
|
+
export declare class ChromeTransitionDepth {
|
|
12
|
+
private depth;
|
|
13
|
+
enter(): void;
|
|
14
|
+
exit(): void;
|
|
15
|
+
get isActive(): boolean;
|
|
16
|
+
}
|
|
17
|
+
export interface RafCoalescer {
|
|
18
|
+
schedule(): void;
|
|
19
|
+
cancel(): void;
|
|
20
|
+
}
|
|
21
|
+
/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */
|
|
22
|
+
export declare function createRafCoalescer(onFrame: () => void): RafCoalescer;
|
|
23
|
+
export declare function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined;
|
|
24
|
+
export declare function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'];
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type { NavChromeStyle } from './nav-chrome';
|
|
2
|
+
export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, resolveNavChromeStyle, shouldResyncNavChromeStyle, } from './nav-chrome';
|
|
3
|
+
export { SHELL_BAR_NAV_VT_NAME, SHELL_NAV_REVEAL_DURATION_VAR, SHELL_NAV_REVEAL_EASING_VAR, parseCssTimeMs, ensureShellNavVtStyle, resolveShellNavRevealOrigin, setShellNavRevealOriginVars, animateShellNavRadialReveal, runShellNavStyleRevealOnReady, } from './shell-view-transition';
|
|
4
|
+
export type { ShellNavRevealOrigin } from './shell-view-transition';
|
|
5
|
+
export { SHELL_GRADIENT_IMAGE_VAR, SHELL_GRADIENT_SIZE_VAR, SHELL_GRADIENT_POSITION_PANEL_VAR, SHELL_GRADIENT_POSITION_BAR_VAR, SHELL_GRADIENT_OPACITY_VAR, SHELL_CHROME_SURFACE_POSITION_VAR, SHELL_GRADIENT_OPACITY, buildShellRadialGradient, shellGradientImage, shellGradientSize, shellGradientPositionPanel, shellGradientPositionBar, shellChromeSurfacePosition, shellChromeLayerActive, readShellViewportDimensions, } from './shell-gradient';
|
|
6
|
+
export type { ShellGradientLayout, ShellViewportDimensions } from './shell-gradient';
|
|
7
|
+
export type { MenuPlacement } from '../components/Menu/menu-placement';
|
|
8
|
+
export { PANEL_NAV_USER_MENU_PLACEMENT, } from '../components/Menu/menu-placement';
|
|
9
|
+
export type { ShellGradientPreset } from './shell-gradient-presets';
|
|
10
|
+
export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, normalizeShellGradientPreset, shellGradientPresetStopToken, } from './shell-gradient-presets';
|
|
11
|
+
export type { ChromeTransitionDetail, ChromeTransitionSource } from './chrome-transition';
|
|
12
|
+
export { CHROME_TRANSITION_END, CHROME_TRANSITION_START, ChromeTransitionDepth, createRafCoalescer, readChromeTransitionSource, readChromeTransitionPhase, } from './chrome-transition';
|
|
13
|
+
export { barGradientPositionFromPanelWidth, isPanelNavCollapsed, panelWidthPxFromTokens, readCssVarWidthPx, readPanelNavWidthTokens, } from './shell-chrome-metrics';
|
|
14
|
+
export type { PanelNavWidthTokens } from './shell-chrome-metrics';
|
|
15
|
+
export { BADGE_GRADIENT_POSITION_VAR, badgeGradientPosition, findGradientSurface, isShellGradientActive, parseCssBackgroundPosition, readShellGradientPosition, syncBadgeGradientPosition, } from './badge-gradient-ring';
|
|
16
|
+
export type { GradientSurface } from './badge-gradient-ring';
|