@ds-mo/ui 2.6.0 → 2.6.2

package/src/wc/components/Menu/menu-placement.ts

@@ -14,10 +14,11 @@ export interface MenuPlacement {
  * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).
  *
  * Not for BarNav overflow menus — those use `side="bottom"` / `align="end"` internally.
+ * Use `align: 'end'` so tall footer menus bottom-align on the anchor and grow upward.
  */
 export const PANEL_NAV_USER_MENU_PLACEMENT = {
   side: 'right',
-  align: 'start',
+  align: 'end',
   sideOffset: TOKEN_DEFAULTS.space050,
   alignOffset: 0,
 } as const satisfies MenuPlacement;

package/src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx

@@ -5,6 +5,7 @@ import {
   DEFAULT_SHELL_GRADIENT_PRESET,
   type ShellGradientPreset,
 } from './shell-gradient-swatch-types';
+import { SHELL_GRADIENT_OPACITY } from '../../nav/shell-gradient';
 
 @Component({
   tag: 'ds-shell-gradient-swatch',
@@ -15,7 +16,7 @@ export class ShellGradientSwatch {
   /** Wash preset this orb previews. */
   @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;
 
-  /** Selected state — shows an inset brand ring. */
+  /** Selected state — brand ring with background offset (notification-dot pattern). */
   @Prop({ reflect: true }) selected = false;
 
   @Prop() inactive = false;
@@ -41,7 +42,10 @@ export class ShellGradientSwatch {
             'ds-focus-ring-inset': true,
             'shell-gradient-swatch--selected': this.selected,
           }}
-          style={{ backgroundImage: buildShellRadialGradientForPreset(this.preset) }}
+          style={{
+            '--_swatch-gradient-image': buildShellRadialGradientForPreset(this.preset),
+            '--ds-shell-gradient-opacity': SHELL_GRADIENT_OPACITY,
+          }}
           aria-label={label}
           aria-pressed={this.selected ? 'true' : 'false'}
           disabled={this.inactive}

package/src/wc/components.d.ts

@@ -830,7 +830,7 @@ export namespace Components {
          */
         "preset": ShellGradientPreset1;
         /**
-          * Selected state — shows an inset brand ring.
+          * Selected state — brand ring with background offset (notification-dot pattern).
           * @default false
          */
         "selected": boolean;
@@ -2705,7 +2705,7 @@ declare namespace LocalJSX {
          */
         "preset"?: ShellGradientPreset1;
         /**
-          * Selected state — shows an inset brand ring.
+          * Selected state — brand ring with background offset (notification-dot pattern).
           * @default false
          */
         "selected"?: boolean;

package/dist/components/p-BU5fKLdO.js

@@ -1,2 +0,0 @@
-const o=["cool","neutral","warm"];const r="neutral";const n={cool:"Cool",neutral:"Neutral",warm:"Warm"};const t={cool:"var(--color-color-intent-blue-strong-background)",neutral:"var(--color-color-intent-grey-strong-background)",warm:"var(--color-color-intent-yellow-strong-background)"};const a="100% 100% at 0% 0%";function c(o){return t[o]}function l(o){const r=c(o);return`radial-gradient(${a}, var(--color-background-transparent) 0%, ${r} 100%)`}export{r as D,o as S,n as a,l as b};
-//# sourceMappingURL=p-BU5fKLdO.js.map

package/dist/components/p-BU5fKLdO.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SHELL_GRADIENT_PRESETS","DEFAULT_SHELL_GRADIENT_PRESET","SHELL_GRADIENT_PRESET_LABELS","cool","neutral","warm","SHELL_GRADIENT_PRESET_STOP","GRADIENT_GEOMETRY","shellGradientPresetStopToken","preset","buildShellRadialGradientForPreset","stop"],"sources":["src/wc/nav/shell-gradient-presets.ts"],"sourcesContent":["/** Built-in shell chrome wash presets — cool (blue), neutral (grey), warm (yellow). */\nexport type ShellGradientPreset = 'cool' | 'neutral' | 'warm';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = ['cool', 'neutral', 'warm'];\n\n/** Default wash when `gradient-preset` is omitted. */\nexport const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';\n\nexport const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {\n  cool: 'Cool',\n  neutral: 'Neutral',\n  warm: 'Warm',\n};\n\nconst SHELL_GRADIENT_PRESET_STOP: Record<ShellGradientPreset, string> = {\n  cool: 'var(--color-color-intent-blue-strong-background)',\n  neutral: 'var(--color-color-intent-grey-strong-background)',\n  warm: 'var(--color-color-intent-yellow-strong-background)',\n};\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\nexport function shellGradientPresetStopToken(preset: ShellGradientPreset): string {\n  return SHELL_GRADIENT_PRESET_STOP[preset];\n}\n\nexport function isShellGradientPreset(value: string): value is ShellGradientPreset {\n  return (SHELL_GRADIENT_PRESETS as string[]).includes(value);\n}\n\n/** Radial wash for a preset — transparent at top-left into the intent stop. */\nexport function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {\n  const stop = shellGradientPresetStopToken(preset);\n  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, ${stop} 100%)`;\n}\n"],"mappings":"AAGO,MAAMA,EAAgD,CAAC,OAAQ,UAAW,QAG1E,MAAMC,EAAqD,UAE3D,MAAMC,EAAoE,CAC/EC,KAAM,OACNC,QAAS,UACTC,KAAM,QAGR,MAAMC,EAAkE,CACtEH,KAAM,mDACNC,QAAS,mDACTC,KAAM,sDAGR,MAAME,EAAoB,qBAEpB,SAAUC,EAA6BC,GAC3C,OAAOH,EAA2BG,EACpC,CAOM,SAAUC,EAAkCD,GAChD,MAAME,EAAOH,EAA6BC,GAC1C,MAAO,mBAAmBF,8CAA8DI,SAC1F,Q","ignoreList":[]}

package/dist/components/p-DKG6W4pb.js

@@ -1,2 +0,0 @@
-import{p as s,H as e,c as i,h as t,a as r,t as o}from"./index.js";import{D as n,a,b as d}from"./p-BU5fKLdO.js";const c=()=>`.sc-ds-shell-gradient-swatch-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-shell-gradient-swatch: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-shell-gradient-swatch{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-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-shell-gradient-swatch-h{display:inline-flex}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-400);height:var(--dimension-size-400);padding:0;border:none;border-radius:var(--dimension-radius-half);background-color:var(--color-background-secondary);background-repeat:no-repeat;background-size:cover;background-position:0 0;cursor:pointer;flex-shrink:0}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:disabled{opacity:0.5;cursor:not-allowed}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);pointer-events:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--selected):hover:not(:disabled)::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--color-interaction-hover);pointer-events:none}`;const l=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=i(this,"dsSelect");this.preset=n;this.selected=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??a[this.preset];return t(r,{key:"6486c517e186071b6f756f3561e073367107274b"},t("button",{key:"8eb09042ad6d120c8717a206fa8dc8aaf289360f",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"shell-gradient-swatch--selected":this.selected},style:{backgroundImage:d(this.preset)},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.inactive,onClick:this.handleClick}))}static get style(){return c()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],inactive:[4],ariaLabel:[1,"aria-label"]}]);function h(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(o(s))){customElements.define(o(s),l)}break}}))}h();export{l as S,h as d};
-//# sourceMappingURL=p-DKG6W4pb.js.map

package/dist/components/p-DKG6W4pb.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["shellGradientSwatchCss","ShellGradientSwatch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","preset","DEFAULT_SHELL_GRADIENT_PRESET","selected","inactive","handleClick","dsSelect","emit","render","label","ariaLabel","SHELL_GRADIENT_PRESET_LABELS","h","Host","key","type","class","style","backgroundImage","buildShellRadialGradientForPreset","disabled","onClick"],"sources":["src/wc/components/ShellGradientSwatch/ShellGradientSwatch.css?tag=ds-shell-gradient-swatch&encapsulation=scoped","src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n\n:host {\n  display: inline-flex;\n}\n\n.shell-gradient-swatch {\n  position: relative;\n  box-sizing: border-box;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-background-secondary);\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: 0 0;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.shell-gradient-swatch:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.shell-gradient-swatch--selected::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n  pointer-events: none;\n}\n\n.shell-gradient-swatch:not(.shell-gradient-swatch--selected):hover:not(:disabled)::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: var(--color-interaction-hover);\n  pointer-events: none;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n  SHELL_GRADIENT_PRESET_LABELS,\n  buildShellRadialGradientForPreset,\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  type ShellGradientPreset,\n} from './shell-gradient-swatch-types';\n\n@Component({\n  tag: 'ds-shell-gradient-swatch',\n  styleUrl: 'ShellGradientSwatch.css',\n  scoped: true,\n})\nexport class ShellGradientSwatch {\n  /** Wash preset this orb previews. */\n  @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;\n\n  /** Selected state — shows an inset brand ring. */\n  @Prop({ reflect: true }) selected = false;\n\n  @Prop() inactive = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n  @Event() dsSelect!: EventEmitter<ShellGradientPreset>;\n\n  private handleClick = () => {\n    if (this.inactive) return;\n    this.dsSelect.emit(this.preset);\n  };\n\n  render() {\n    const label = this.ariaLabel ?? SHELL_GRADIENT_PRESET_LABELS[this.preset];\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class={{\n            'shell-gradient-swatch': true,\n            'ds-focus-ring-inset': true,\n            'shell-gradient-swatch--selected': this.selected,\n          }}\n          style={{ backgroundImage: buildShellRadialGradientForPreset(this.preset) }}\n          aria-label={label}\n          aria-pressed={this.selected ? 'true' : 'false'}\n          disabled={this.inactive}\n          onClick={this.handleClick}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"+GAAA,MAAMA,EAAyB,IAAM,0iE,MCaxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO2BC,KAAAC,OAA8BC,EAG9BF,KAAAG,SAAW,MAE5BH,KAAAI,SAAW,MAMXJ,KAAAK,YAAc,KACpB,GAAIL,KAAKI,SAAU,OACnBJ,KAAKM,SAASC,KAAKP,KAAKC,OAAO,CAwBlC,CArBC,MAAAO,GACE,MAAMC,EAAQT,KAAKU,WAAaC,EAA6BX,KAAKC,QAElE,OACEW,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAO,CACL,wBAAyB,KACzB,sBAAuB,KACvB,kCAAmChB,KAAKG,UAE1Cc,MAAO,CAAEC,gBAAiBC,EAAkCnB,KAAKC,SAAS,aAC9DQ,EAAK,eACHT,KAAKG,SAAW,OAAS,QACvCiB,SAAUpB,KAAKI,SACfiB,QAASrB,KAAKK,c","ignoreList":[]}