npm - dap-design-system - Versions diffs - 0.62.4 → 0.63.0 - Mend

dap-design-system 0.62.4 → 0.63.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (658) hide show

package/dist/components/snackbar/snackbar.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"snackbar.component.js","sources":["../../../src/components/snackbar/snackbar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n MessageOptionsType,\n SnackbarMessage,\n SnackbarPosition,\n} from '@/common/types'\nimport { translate } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './snackbar.scss?inline'\nimport DapDSSnackbarMessage from './snackbar-message.component'\n\n// Shared by every snackbar instance so a message is announced exactly once\nconst ANNOUNCER_ID = 'dds-snackbar-announcer'\n\nif (typeof window !== 'undefined') {\n window.showDapSnackbar = (message: string, options?: MessageOptionsType) => {\n DapDSSnackbar.show(message, options)\n }\n\n window.closeAllDapSnackbars = () => {\n DapDSSnackbar.closeAll()\n }\n}\n\n/*\n `dap-ds-snackbar`\n * @summary The Snackbar is a container of sliding messages.\n * @element dap-ds-snackbar\n * @title - Snackbar\n \n @csspart host - The host element\n * @csspart message - The message part of the snackbar\n * @csspart message-base - The base part of the message\n * @csspart message-text - The text part of the message\n * @csspart message-closebutton - The close button part of the message\n * @csspart message-close-icon - The close icon part of the message\n * @csspart message-actions - The actions part of the message\n \n @cssproperty --dds-snackbar-spacing - Spacing used for positioning the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-z-index - Z-index of the snackbar container (default: 10000)\n * @cssproperty --dds-snackbar-pointer-events - Pointer events behavior for the snackbar (default: auto)\n /\nexport default class DapDSSnackbar extends DdsElement {\n static tagName = 'dap-ds-snackbar'\n\n static dependencies = {\n 'dap-ds-snackbar-message': DapDSSnackbarMessage,\n }\n\n /* The maximum number of snackbar messages at a given time. /\n @property({ type: Number }) maxItems = 4\n\n /* The position of the snackbar\n * @type {'bottom-left' \| 'bottom-right' \| 'bottom-center' \| 'top-right' \| 'top-center'}\n /\n @property({ type: String }) position: SnackbarPosition = 'bottom-right'\n\n /* The duration of the snackbar message in milliseconds /\n @property({ type: Number }) duration = 6000\n\n /* Whether the snackbar should announce new messages to screen readers /\n @property({ type: Boolean }) announceMessages = true\n\n @state() private messages: SnackbarMessage[] = []\n @state() private idCounter = 0\n private timeouts: Map<string, ReturnType<typeof setTimeout>> = new Map()\n\n static readonly styles = unsafeCSS(styles)\n\n /\n Static method to show a snackbar message anywhere in the application\n * @param message - The message to display\n * @param options - Optional configuration for the message\n /\n static show(message: string, options?: MessageOptionsType): void {\n document.dispatchEvent(\n new CustomEvent('dds-show-snackbar', {\n detail: { message, options },\n bubbles: true,\n }),\n )\n }\n\n /\n Static method to show a success message\n * @param message - The message to display\n * @param options - Optional configuration (alertType will be overridden to 'successful')\n /\n static success(\n message: string,\n options?: Omit<MessageOptionsType, 'alertType'>,\n ): void {\n this.show(message, { ...options, alertType: 'successful' })\n }\n\n /\n Static method to show an error message\n * @param message - The message to display\n * @param options - Optional configuration (alertType will be overridden to 'error')\n /\n static error(\n message: string,\n options?: Omit<MessageOptionsType, 'alertType'>,\n ): void {\n this.show(message, { ...options, alertType: 'error' })\n }\n\n /\n Static method to show an information message\n * @param message - The message to display\n * @param options - Optional configuration (alertType will be overridden to 'information')\n /\n static info(\n message: string,\n options?: Omit<MessageOptionsType, 'alertType'>,\n ): void {\n this.show(message, { ...options, alertType: 'information' })\n }\n\n /\n Static method to show a default message\n * @param message - The message to display\n * @param options - Optional configuration (alertType will be overridden to 'default')\n /\n static default(\n message: string,\n options?: Omit<MessageOptionsType, 'alertType'>,\n ): void {\n this.show(message, { ...options, alertType: 'default' })\n }\n\n /\n Static method to close all snackbar messages globally\n /\n static closeAll(): void {\n document.dispatchEvent(\n new CustomEvent('dds-close-all-snackbars', {\n bubbles: true,\n }),\n )\n }\n\n /\n Close all currently displayed messages\n */\n closeAll(): void {\n this.clearAllTimeouts()\n this.messages = []\n }\n\n private generateId(): string {\n this.idCounter++\n\n return `dap-snackbar-${this.idCounter}`\n }\n\n addMessage(message: string, options?: MessageOptionsType): void {\n if (!message \|\| typeof message !== 'string') {\n console.warn('DapDSSnackbar: Message must be a non-empty string')\n return\n }\n\n const newId = this.generateId()\n if (this.messages.length >= this.maxItems) {\n this.sliceMessage()\n }\n\n const newMessage: SnackbarMessage = {\n id: newId,\n message: message.trim(),\n ...(options && { options }),\n }\n\n this.messages = [...this.messages, newMessage]\n this.elapseMessages(newId, options?.duration, options?.persistent)\n\n // Announce the message if enabled\n if (this.announceMessages) {\n this.announceToScreenReader(message)\n }\n }\n\n private sliceMessage(): void {\n if (this.messages) {\n this.messages = this.messages.slice(1)\n }\n }\n\n private removeMessage(id: string): void {\n if (id) {\n this.messages = this.messages.filter(\n (messageItem: SnackbarMessage) => messageItem.id !== id,\n )\n this.clearTimeout(id)\n }\n }\n\n private elapseMessages(\n id: string,\n duration?: number,\n persistent?: boolean,\n ): void {\n // Persistent messages stay until the user closes them manually\n if (persistent) {\n return\n }\n\n const durationTime = duration ?? this.duration\n const timeoutId = setTimeout(() => {\n this.removeMessage(id)\n }, durationTime)\n this.timeouts.set(id, timeoutId)\n }\n\n private clearTimeout(id: string): void {\n const timeoutId = this.timeouts.get(id)\n if (timeoutId) {\n clearTimeout(timeoutId)\n this.timeouts.delete(id)\n }\n }\n\n private clearAllTimeouts(): void {\n this.timeouts.forEach(timeoutId => clearTimeout(timeoutId))\n this.timeouts.clear()\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n document.addEventListener(\n 'dds-show-snackbar',\n this.handleShowSnackbarEvent as EventListener,\n )\n document.addEventListener(\n 'dds-close-all-snackbars',\n this.handleCloseAllEvent as EventListener,\n )\n document.addEventListener('keydown', this.handleKeyDown)\n }\n\n disconnectedCallback(): void {\n this.clearAllTimeouts()\n document.removeEventListener(\n 'dds-show-snackbar',\n this.handleShowSnackbarEvent as EventListener,\n )\n document.removeEventListener(\n 'dds-close-all-snackbars',\n this.handleCloseAllEvent as EventListener,\n )\n document.removeEventListener('keydown', this.handleKeyDown)\n super.disconnectedCallback()\n }\n\n private handleShowSnackbarEvent = (\n event: CustomEvent<{ message: string; options?: MessageOptionsType }>,\n ) => {\n const { message, options } = event.detail\n this.addMessage(message, options)\n }\n\n private handleCloseAllEvent = () => {\n this.closeAll()\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && this.messages.length > 0) {\n // Close the most recent message\n const lastMessage = this.messages[this.messages.length - 1]\n if (lastMessage) {\n this.removeMessage(lastMessage.id)\n }\n }\n }\n\n // Single announcement channel (WCAG 4.1.3, Figma #127). A polite status region\n // in light DOM is announced reliably by VoiceOver, unlike live regions inside\n // shadow roots, so the messages themselves carry no live role.\n private announceToScreenReader(message: string): void {\n let announcer = document.getElementById(ANNOUNCER_ID)\n if (!announcer) {\n announcer = document.createElement('div')\n announcer.id = ANNOUNCER_ID\n announcer.setAttribute('role', 'status')\n announcer.setAttribute('aria-live', 'polite')\n announcer.setAttribute('aria-atomic', 'true')\n Object.assign(announcer.style, {\n position: 'absolute',\n width: '1px',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0 0 0 0)',\n whiteSpace: 'nowrap',\n })\n document.body.appendChild(announcer)\n }\n\n // Clear first so repeating the same message is announced again\n announcer.textContent = ''\n const region = announcer\n setTimeout(() => {\n region.textContent = message\n }, 100)\n }\n\n private _closeMessage(event: CustomEvent<{ id: string }>) {\n if (event?.detail?.id) {\n this.removeMessage(event.detail.id)\n }\n }\n\n render() {\n return html`<div\n class=${clsx('snackbar', `snackbar--${this.position}`)}\n role=\"region\"\n aria-label=${translate('snackbar.notifications')}>\n ${repeat(\n this.messages,\n messageItem => messageItem.id,\n messageItem => html`\n <dap-ds-snackbar-message\n part=\"message\"\n exportparts=\"base:message-base, text:message-text, closebutton:message-closebutton, close-icon:message-close-icon, actions:message-actions\"\n @dds-close=${this._closeMessage}\n id=${messageItem.id}\n message=${messageItem.message}\n alertType=${ifDefined(messageItem?.options?.alertType)}\n .actions=${messageItem?.options?.actions}\n closeButton=${ifDefined(messageItem?.options?.closeButton)}\n .customStyle=${messageItem?.options?.customStyle}\n position=${this.position}></dap-ds-snackbar-message>\n `,\n )}\n </div>`\n }\n}\n"],"names":["ANNOUNCER_ID","message","options","DapDSSnackbar","_DapDSSnackbar","DdsElement","event","lastMessage","__spreadProps","__spreadValues","newId","newMessage","id","messageItem","duration","persistent","durationTime","timeoutId","announcer","region","_a","html","clsx","translate","repeat","ifDefined","_b","_c","_d","DapDSSnackbarMessage","unsafeCSS","styles","__decorateClass","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAMA,IAAe;AAEjB,OAAO,UAAW,gBACb,OAAA,kBAAkB,CAACC,GAAiBC,MAAiC;AAC5D,EAAAC,EAAA,KAAKF,GAASC,CAAO;AACrC,GAEA,OAAO,uBAAuB,MAAM;AAClC,EAAAC,EAAc,SAAS;AACzB;AAqBF,MAAqBC,IAArB,MAAqBA,UAAsBC,EAAW;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA,GAQyC,KAAA,WAAA,GAKkB,KAAA,WAAA,gBAGlB,KAAA,WAAA,KAGS,KAAA,mBAAA,IAEvC,KAAQ,WAA8B,CAAC,GACvC,KAAQ,YAAY,GACrB,KAAA,+BAA2D,IAAI,GA6L/D,KAAA,0BAA0B,CAChCC,MACG;AACH,YAAM,EAAE,SAAAL,GAAS,SAAAC,EAAQ,IAAII,EAAM;AAC9B,WAAA,WAAWL,GAASC,CAAO;AAAA,IAClC,GAEA,KAAQ,sBAAsB,MAAM;AAClC,WAAK,SAAS;AAAA,IAChB,GAEQ,KAAA,gBAAgB,CAACI,MAAyB;AAChD,UAAIA,EAAM,QAAQ,YAAY,KAAK,SAAS,SAAS,GAAG;AAEtD,cAAMC,IAAc,KAAK,SAAS,KAAK,SAAS,SAAS,CAAC;AAC1D,QAAIA,KACG,KAAA,cAAcA,EAAY,EAAE;AAAA,MACnC;AAAA,IAEJ;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAvMA,OAAO,KAAKN,GAAiBC,GAAoC;AACtD,aAAA;AAAA,MACP,IAAI,YAAY,qBAAqB;AAAA,QACnC,QAAQ,EAAE,SAAAD,GAAS,SAAAC,EAAQ;AAAA,QAC3B,SAAS;AAAA,MACV,CAAA;AAAA,IACH;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQF,OAAO,QACLD,GACAC,GACM;AACN,SAAK,KAAKD,GAASO,EAAAC,EAAA,IAAKP,IAAL,EAAc,WAAW,eAAc;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ5D,OAAO,MACLD,GACAC,GACM;AACN,SAAK,KAAKD,GAASO,EAAAC,EAAA,IAAKP,IAAL,EAAc,WAAW,UAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQvD,OAAO,KACLD,GACAC,GACM;AACN,SAAK,KAAKD,GAASO,EAAAC,EAAA,IAAKP,IAAL,EAAc,WAAW,gBAAe;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7D,OAAO,QACLD,GACAC,GACM;AACN,SAAK,KAAKD,GAASO,EAAAC,EAAA,IAAKP,IAAL,EAAc,WAAW,YAAW;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMzD,OAAO,WAAiB;AACb,aAAA;AAAA,MACP,IAAI,YAAY,2BAA2B;AAAA,QACzC,SAAS;AAAA,MACV,CAAA;AAAA,IACH;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMF,WAAiB;AACf,SAAK,iBAAiB,GACtB,KAAK,WAAW,CAAC;AAAA,EAAA;AAAA,EAGX,aAAqB;AACtB,gBAAA,aAEE,gBAAgB,KAAK,SAAS;AAAA,EAAA;AAAA,EAGvC,WAAWD,GAAiBC,GAAoC;AAC9D,QAAI,CAACD,KAAW,OAAOA,KAAY,UAAU;AAC3C,cAAQ,KAAK,mDAAmD;AAChE;AAAA,IAAA;AAGI,UAAAS,IAAQ,KAAK,WAAW;AAC9B,IAAI,KAAK,SAAS,UAAU,KAAK,YAC/B,KAAK,aAAa;AAGpB,UAAMC,IAA8BF,EAAA;AAAA,MAClC,IAAIC;AAAA,MACJ,SAAST,EAAQ,KAAK;AAAA,OAClBC,KAAW,EAAE,SAAAA,EAAQ;AAG3B,SAAK,WAAW,CAAC,GAAG,KAAK,UAAUS,CAAU,GAC7C,KAAK,eAAeD,GAAOR,KAAA,gBAAAA,EAAS,UAAUA,KAAA,gBAAAA,EAAS,UAAU,GAG7D,KAAK,oBACP,KAAK,uBAAuBD,CAAO;AAAA,EACrC;AAAA,EAGM,eAAqB;AAC3B,IAAI,KAAK,aACP,KAAK,WAAW,KAAK,SAAS,MAAM,CAAC;AAAA,EACvC;AAAA,EAGM,cAAcW,GAAkB;AACtC,IAAIA,MACG,KAAA,WAAW,KAAK,SAAS;AAAA,MAC5B,CAACC,MAAiCA,EAAY,OAAOD;AAAA,IACvD,GACA,KAAK,aAAaA,CAAE;AAAA,EACtB;AAAA,EAGM,eACNA,GACAE,GACAC,GACM;AAEN,QAAIA;AACF;AAGI,UAAAC,IAAeF,KAAA,OAAAA,IAAY,KAAK,UAChCG,IAAY,WAAW,MAAM;AACjC,WAAK,cAAcL,CAAE;AAAA,OACpBI,CAAY;AACV,SAAA,SAAS,IAAIJ,GAAIK,CAAS;AAAA,EAAA;AAAA,EAGzB,aAAaL,GAAkB;AACrC,UAAMK,IAAY,KAAK,SAAS,IAAIL,CAAE;AACtC,IAAIK,MACF,aAAaA,CAAS,GACjB,KAAA,SAAS,OAAOL,CAAE;AAAA,EACzB;AAAA,EAGM,mBAAyB;AAC/B,SAAK,SAAS,QAAQ,CAAaK,MAAA,aAAaA,CAAS,CAAC,GAC1D,KAAK,SAAS,MAAM;AAAA,EAAA;AAAA,EAGtB,oBAA0B;AACxB,UAAM,kBAAkB,GACf,SAAA;AAAA,MACP;AAAA,MACA,KAAK;AAAA,IACP,GACS,SAAA;AAAA,MACP;AAAA,MACA,KAAK;AAAA,IACP,GACS,SAAA,iBAAiB,WAAW,KAAK,aAAa;AAAA,EAAA;AAAA,EAGzD,uBAA6B;AAC3B,SAAK,iBAAiB,GACb,SAAA;AAAA,MACP;AAAA,MACA,KAAK;AAAA,IACP,GACS,SAAA;AAAA,MACP;AAAA,MACA,KAAK;AAAA,IACP,GACS,SAAA,oBAAoB,WAAW,KAAK,aAAa,GAC1D,MAAM,qBAAqB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EA2BrB,uBAAuBhB,GAAuB;AAChD,QAAAiB,IAAY,SAAS,eAAelB,CAAY;AACpD,IAAKkB,MACSA,IAAA,SAAS,cAAc,KAAK,GACxCA,EAAU,KAAKlB,GACLkB,EAAA,aAAa,QAAQ,QAAQ,GAC7BA,EAAA,aAAa,aAAa,QAAQ,GAClCA,EAAA,aAAa,eAAe,MAAM,GACrC,OAAA,OAAOA,EAAU,OAAO;AAAA,MAC7B,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,YAAY;AAAA,IAAA,CACb,GACQ,SAAA,KAAK,YAAYA,CAAS,IAIrCA,EAAU,cAAc;AACxB,UAAMC,IAASD;AACf,eAAW,MAAM;AACf,MAAAC,EAAO,cAAclB;AAAA,OACpB,GAAG;AAAA,EAAA;AAAA,EAGA,cAAcK,GAAoC;;AACpD,KAAAc,IAAAd,KAAA,gBAAAA,EAAO,WAAP,QAAAc,EAAe,MACZ,KAAA,cAAcd,EAAM,OAAO,EAAE;AAAA,EACpC;AAAA,EAGF,SAAS;AACA,WAAAe;AAAAA,cACGC,EAAK,YAAY,aAAa,KAAK,QAAQ,EAAE,CAAC;AAAA;AAAA,mBAEzCC,EAAU,wBAAwB,CAAC;AAAA,QAC9CC;AAAAA,MACA,KAAK;AAAA,MACL,OAAeX,EAAY;AAAA,MAC3B,CAAeA,MAAA;;AAAAQ,eAAAA;AAAAA;AAAAA;AAAAA;AAAAA,yBAIE,KAAK,aAAa;AAAA,iBAC1BR,EAAY,EAAE;AAAA,sBACTA,EAAY,OAAO;AAAA,wBACjBY,GAAUL,IAAAP,KAAA,gBAAAA,EAAa,YAAb,gBAAAO,EAAsB,SAAS,CAAC;AAAA,wBAC3CM,IAAAb,KAAA,gBAAAA,EAAa,YAAb,gBAAAa,EAAsB,OAAO;AAAA,0BAC1BD,GAAUE,IAAAd,KAAA,gBAAAA,EAAa,YAAb,gBAAAc,EAAsB,WAAW,CAAC;AAAA,4BAC3CC,IAAAf,KAAA,gBAAAA,EAAa,YAAb,gBAAAe,EAAsB,WAAW;AAAA,uBACrC,KAAK,QAAQ;AAAA;AAAA;AAAA,IAE7B,CAAA;AAAA;AAAA,EAAA;AAGP;AArSExB,EAAO,UAAU,mBAEjBA,EAAO,eAAe;AAAA,EACpB,2BAA2ByB;AAC7B,GAoBgBzB,EAAA,SAAS0B,EAAUC,CAAM;AAzB3C,IAAqB5B,IAArBC;AAQ8B4B,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GARP9B,EAQS,WAAA,UAAA;AAKA6B,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAbP9B,EAaS,WAAA,UAAA;AAGA6B,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAhBP9B,EAgBS,WAAA,UAAA;AAGC6B,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAnBR9B,EAmBU,WAAA,kBAAA;AAEZ6B,EAAA;AAAA,EAAhBE,EAAM;AAAA,GArBY/B,EAqBF,WAAA,UAAA;AACA6B,EAAA;AAAA,EAAhBE,EAAM;AAAA,GAtBY/B,EAsBF,WAAA,WAAA;"}
1	+ {"version":3,"file":"snackbar.component.js","sources":["../../../src/components/snackbar/snackbar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n MessageOptionsType,\n SnackbarMessage,\n SnackbarPosition,\n} from '@/common/types'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './snackbar.scss?inline'\nimport DapDSSnackbarMessage from './snackbar-message.component'\n\n// Shared by every snackbar instance so a message is announced exactly once\nconst ANNOUNCER_ID = 'dds-snackbar-announcer'\n\nif (typeof window !== 'undefined') {\n window.showDapSnackbar = (message: string, options?: MessageOptionsType) => {\n DapDSSnackbar.show(message, options)\n }\n\n window.closeAllDapSnackbars = () => {\n DapDSSnackbar.closeAll()\n }\n}\n\n/*\n `dap-ds-snackbar`\n * @summary The Snackbar is a container of sliding messages.\n * @element dap-ds-snackbar\n * @title - Snackbar\n \n @csspart message - The message part of the snackbar\n * @csspart message-base - The base part of the message\n * @csspart message-text - The text part of the message\n * @csspart message-closebutton - The close button part of the message\n * @csspart message-close-icon - The close icon part of the message\n * @csspart message-actions - The actions part of the message\n \n @cssproperty --dds-snackbar-spacing - Spacing used for positioning the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-z-index - Z-index of the snackbar container (default: 10000)\n * @cssproperty --dds-snackbar-pointer-events - Pointer events behavior for the snackbar (default: auto)\n /\nexport default class DapDSSnackbar extends DdsElement {\n static tagName = 'dap-ds-snackbar'\n\n static dependencies = {\n 'dap-ds-snackbar-message': DapDSSnackbarMessage,\n }\n\n /* The maximum number of snackbar messages at a given time. /\n @property({ type: Number }) maxItems = 4\n\n /* The position of the snackbar\n * @type {'bottom-left' \| 'bottom-right' \| 'bottom-center' \| 'top-right' \| 'top-center'}\n /\n @property({ type: String }) position: SnackbarPosition = 'bottom-right'\n\n /* The duration of the snackbar message in milliseconds /\n @property({ type: Number }) duration = 6000\n\n /* Whether the snackbar should announce new messages to screen readers /\n @property({ type: Boolean }) announceMessages = true\n\n @state() private messages: SnackbarMessage[] = []\n @state() private idCounter = 0\n private timeouts: Map<string, ReturnType<typeof setTimeout>> = new Map()\n\n static readonly styles = unsafeCSS(styles)\n\n /\n Static method to show a snackbar message anywhere in the application\n * @param message - The message to display\n * @param options - Optional configuration for the message\n /\n static show(message: string, options?: MessageOptionsType): void {\n document.dispatchEvent(\n new CustomEvent('dds-show-snackbar', {\n detail: { message, options },\n bubbles: true,\n }),\n )\n }\n\n /\n Static method to show a success message\n * @param message - The message to display\n * @param options - Optional configuration (alertType will be overridden to 'successful')\n /\n static success(\n message: string,\n options?: Omit<MessageOptionsType, 'alertType'>,\n ): void {\n this.show(message, { ...options, alertType: 'successful' })\n }\n\n /\n Static method to show an error message\n * @param message - The message to display\n * @param options - Optional configuration (alertType will be overridden to 'error')\n /\n static error(\n message: string,\n options?: Omit<MessageOptionsType, 'alertType'>,\n ): void {\n this.show(message, { ...options, alertType: 'error' })\n }\n\n /\n Static method to show an information message\n * @param message - The message to display\n * @param options - Optional configuration (alertType will be overridden to 'information')\n /\n static info(\n message: string,\n options?: Omit<MessageOptionsType, 'alertType'>,\n ): void {\n this.show(message, { ...options, alertType: 'information' })\n }\n\n /\n Static method to show a default message\n * @param message - The message to display\n * @param options - Optional configuration (alertType will be overridden to 'default')\n /\n static default(\n message: string,\n options?: Omit<MessageOptionsType, 'alertType'>,\n ): void {\n this.show(message, { ...options, alertType: 'default' })\n }\n\n /\n Static method to close all snackbar messages globally\n /\n static closeAll(): void {\n document.dispatchEvent(\n new CustomEvent('dds-close-all-snackbars', {\n bubbles: true,\n }),\n )\n }\n\n /\n Close all currently displayed messages\n */\n closeAll(): void {\n this.clearAllTimeouts()\n this.messages = []\n }\n\n private generateId(): string {\n this.idCounter++\n\n return `dap-snackbar-${this.idCounter}`\n }\n\n addMessage(message: string, options?: MessageOptionsType): void {\n if (!message \|\| typeof message !== 'string') {\n console.warn('DapDSSnackbar: Message must be a non-empty string')\n return\n }\n\n const newId = this.generateId()\n if (this.messages.length >= this.maxItems) {\n this.sliceMessage()\n }\n\n const newMessage: SnackbarMessage = {\n id: newId,\n message: message.trim(),\n ...(options && { options }),\n }\n\n this.messages = [...this.messages, newMessage]\n this.elapseMessages(newId, options?.duration, options?.persistent)\n\n // Announce the message if enabled\n if (this.announceMessages) {\n this.announceToScreenReader(message)\n }\n }\n\n private sliceMessage(): void {\n if (this.messages) {\n this.messages = this.messages.slice(1)\n }\n }\n\n private removeMessage(id: string): void {\n if (id) {\n this.messages = this.messages.filter(\n (messageItem: SnackbarMessage) => messageItem.id !== id,\n )\n this.clearTimeout(id)\n }\n }\n\n private elapseMessages(\n id: string,\n duration?: number,\n persistent?: boolean,\n ): void {\n // Persistent messages stay until the user closes them manually\n if (persistent) {\n return\n }\n\n const durationTime = duration ?? this.duration\n const timeoutId = setTimeout(() => {\n this.removeMessage(id)\n }, durationTime)\n this.timeouts.set(id, timeoutId)\n }\n\n private clearTimeout(id: string): void {\n const timeoutId = this.timeouts.get(id)\n if (timeoutId) {\n clearTimeout(timeoutId)\n this.timeouts.delete(id)\n }\n }\n\n private clearAllTimeouts(): void {\n this.timeouts.forEach(timeoutId => clearTimeout(timeoutId))\n this.timeouts.clear()\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n document.addEventListener(\n 'dds-show-snackbar',\n this.handleShowSnackbarEvent as EventListener,\n )\n document.addEventListener(\n 'dds-close-all-snackbars',\n this.handleCloseAllEvent as EventListener,\n )\n document.addEventListener('keydown', this.handleKeyDown)\n }\n\n disconnectedCallback(): void {\n this.clearAllTimeouts()\n document.removeEventListener(\n 'dds-show-snackbar',\n this.handleShowSnackbarEvent as EventListener,\n )\n document.removeEventListener(\n 'dds-close-all-snackbars',\n this.handleCloseAllEvent as EventListener,\n )\n document.removeEventListener('keydown', this.handleKeyDown)\n super.disconnectedCallback()\n }\n\n private handleShowSnackbarEvent = (\n event: CustomEvent<{ message: string; options?: MessageOptionsType }>,\n ) => {\n const { message, options } = event.detail\n this.addMessage(message, options)\n }\n\n private handleCloseAllEvent = () => {\n this.closeAll()\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && this.messages.length > 0) {\n // Close the most recent message\n const lastMessage = this.messages[this.messages.length - 1]\n if (lastMessage) {\n this.removeMessage(lastMessage.id)\n }\n }\n }\n\n // Single announcement channel (WCAG 4.1.3, Figma #127). A polite status region\n // in light DOM is announced reliably by VoiceOver, unlike live regions inside\n // shadow roots, so the messages themselves carry no live role.\n private announceToScreenReader(message: string): void {\n let announcer = document.getElementById(ANNOUNCER_ID)\n if (!announcer) {\n announcer = document.createElement('div')\n announcer.id = ANNOUNCER_ID\n announcer.setAttribute('role', 'status')\n announcer.setAttribute('aria-live', 'polite')\n announcer.setAttribute('aria-atomic', 'true')\n Object.assign(announcer.style, {\n position: 'absolute',\n width: '1px',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0 0 0 0)',\n whiteSpace: 'nowrap',\n })\n document.body.appendChild(announcer)\n }\n\n // Clear first so repeating the same message is announced again\n announcer.textContent = ''\n const region = announcer\n setTimeout(() => {\n region.textContent = message\n }, 100)\n }\n\n private _closeMessage(event: CustomEvent<{ id: string }>) {\n if (event?.detail?.id) {\n this.removeMessage(event.detail.id)\n }\n }\n\n render() {\n return html`<div\n class=${clsx('snackbar', `snackbar--${this.position}`)}\n role=\"region\"\n aria-label=${this.localize.t('snackbar.notifications')}>\n ${repeat(\n this.messages,\n messageItem => messageItem.id,\n messageItem => html`\n <dap-ds-snackbar-message\n part=\"message\"\n exportparts=\"base:message-base, text:message-text, closebutton:message-closebutton, close-icon:message-close-icon, actions:message-actions\"\n @dds-close=${this._closeMessage}\n id=${messageItem.id}\n message=${messageItem.message}\n alertType=${ifDefined(messageItem?.options?.alertType)}\n .actions=${messageItem?.options?.actions}\n closeButton=${ifDefined(messageItem?.options?.closeButton)}\n .customStyle=${messageItem?.options?.customStyle}\n position=${this.position}></dap-ds-snackbar-message>\n `,\n )}\n </div>`\n }\n}\n"],"names":["ANNOUNCER_ID","message","options","DapDSSnackbar","_DapDSSnackbar","DdsElement","event","lastMessage","__spreadProps","__spreadValues","newId","newMessage","id","messageItem","duration","persistent","durationTime","timeoutId","announcer","region","_a","html","clsx","repeat","ifDefined","_b","_c","_d","DapDSSnackbarMessage","unsafeCSS","styles","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/spinner/spinner.component.js CHANGED Viewed

@@ -1,33 +1,28 @@
-import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as d } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
-import { translate as y } from "../../node_modules/lit-i18n/src/lit-i18n.js";
+import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as f, html as p } from "lit";
+import { property as n, state as y } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
 import { DdsElement as S } from "../../internal/dds-hu-element.js";
 import { SizedMixin as z } from "../../internal/mixin/sizedMixin.js";
 import v from "../icon/icon.component.js";
 import b from "./spinner.scss.js";
-import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var $ = Object.defineProperty, o = (h, t, p, c) => {
-  for (var e = void 0, i = h.length - 1, n; i >= 0; i--)
-    (n = h[i]) && (e = n(t, p, e) || e);
-  return e && $(t, p, e), e;
+var _ = Object.defineProperty, o = (h, t, c, d) => {
+  for (var e = void 0, i = h.length - 1, a; i >= 0; i--)
+    (a = h[i]) && (e = a(t, c, e) || e);
+  return e && _(t, c, e), e;
 };
-const x = z(S), l = class l extends x {
+const $ = z(S), l = class l extends $ {
   constructor() {
-    super(), this.variant = "neutral", this.noColor = !1, this.orientation = "vertical", this.ariaLive = "polite", this.delay = 0, this._visible = !1, this.size = "lg";
+    super(), this.variant = "neutral", this.noColor = !1, this.orientation = "vertical", this.ariaLive = "polite", this.delay = 0, this._visible = !0, this.size = "lg";
   }
   /** Maps effectiveSize from SizedMixin to spinner visual size (xxs→xs, else effectiveSize). */
   get spinnerSize() {
     return this.effectiveSize === "xxs" ? "xs" : this.effectiveSize;
   }
   connectedCallback() {
-    super.connectedCallback(), this.delay > 0 ? this._delayTimeout = window.setTimeout(() => {
+    super.connectedCallback(), this.delay > 0 && (this._visible = !1, this._delayTimeout = window.setTimeout(() => {
       this._visible = !0;
-    }, this.delay) : this._visible = !0;
+    }, this.delay));
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._delayTimeout && clearTimeout(this._delayTimeout);
@@ -48,20 +43,20 @@ const x = z(S), l = class l extends x {
         'slot[name="icon"]'
       );
       if (!t) return;
-      const p = t.assignedElements({
+      const c = t.assignedElements({
         flatten: !0
-      }), c = !!this.customStyles, e = getComputedStyle(this).getPropertyValue(
+      }), d = !!this.customStyles, e = getComputedStyle(this).getPropertyValue(
         "--dds-spinner-animation-duration"
       ) || "1s";
-      p.forEach((i) => {
+      c.forEach((i) => {
         if (i instanceof HTMLElement) {
-          const n = window.matchMedia(
+          const a = window.matchMedia(
             "(prefers-reduced-motion: reduce)"
           ).matches;
           if (i.tagName === "DAP-DS-ICON" || i.localName === "dap-ds-icon")
-            c ? i.style.animation = "" : n ? i.style.animation = `dds-fade ${e} ease-in-out infinite` : i.style.animation = `dds-spin ${e} linear infinite`, i.style.display = "block", this.spinnerSize && i.setAttribute("size", this.spinnerSize), this.staticSize !== void 0 && i.setAttribute("staticSize", this.staticSize.toString());
+            d ? i.style.animation = "" : a ? i.style.animation = `dds-fade ${e} ease-in-out infinite` : i.style.animation = `dds-spin ${e} linear infinite`, i.style.display = "block", this.spinnerSize && i.setAttribute("size", this.spinnerSize), this.staticSize !== void 0 && i.setAttribute("staticSize", this.staticSize.toString());
           else {
-            c ? i.style.animation = "" : n ? i.style.animation = `dds-fade ${e} ease-in-out infinite` : i.style.animation = `dds-spin ${e} linear infinite`, i.style.display = "block";
+            d ? i.style.animation = "" : a ? i.style.animation = `dds-fade ${e} ease-in-out infinite` : i.style.animation = `dds-spin ${e} linear infinite`, i.style.display = "block";
             const r = i.querySelector("dap-ds-icon");
             r && (r.style.display = "block", r.style.animation = "", this.spinnerSize && r.setAttribute("size", this.spinnerSize), this.staticSize !== void 0 && r.setAttribute(
               "staticSize",
@@ -76,14 +71,14 @@ const x = z(S), l = class l extends x {
   }
   render() {
     var t;
-    return this._visible ? d`
+    return this._visible ? p`
       <div
         part="base"
         role="status"
         name="icon-spinner"
-        aria-label=${(t = this.ariaLabel) != null ? t : y("spinner")}
+        aria-label=${(t = this.ariaLabel) != null ? t : this.localize.t("spinner")}
         aria-live=${this.ariaLive}
-        class="${f("spinner", {
+        class="${u("spinner", {
       [`spinner--${this.spinnerSize}`]: this.spinnerSize,
       [`spinner--${this.variant}`]: this.variant,
       [`spinner--${this.orientation}`]: this.orientation
@@ -97,44 +92,44 @@ const x = z(S), l = class l extends x {
             name="loading-spinner"
             class="spinner__icon"></dap-ds-icon>
         </slot>
-        ${this.text ? d` <span
+        ${this.text ? p` <span
               part="text"
-              class=${f("spinner__text", {
+              class=${u("spinner__text", {
       "spinner__text--no-color": this.noColor
     })}>
               ${this.text}
-            </span>` : d`<slot></slot>`}
+            </span>` : p`<slot></slot>`}
       </div>
     ` : null;
   }
 };
 l.tagName = "dap-ds-spinner", l.dependencies = {
   "dap-ds-icon": v
-}, l.styles = _(b);
+}, l.styles = f(b);
 let s = l;
 o([
-  a({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], s.prototype, "variant");
 o([
-  a({ type: Number })
+  n({ type: Number })
 ], s.prototype, "staticSize");
 o([
-  a({ type: String })
+  n({ type: String })
 ], s.prototype, "text");
 o([
-  a({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "noColor");
 o([
-  a({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], s.prototype, "orientation");
 o([
-  a({ type: String, attribute: "aria-live" })
+  n({ type: String, attribute: "aria-live" })
 ], s.prototype, "ariaLive");
 o([
-  a({ type: Number })
+  n({ type: Number })
 ], s.prototype, "delay");
 o([
-  u()
+  y()
 ], s.prototype, "_visible");
 export {
   s as default

package/dist/components/spinner/spinner.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spinner.component.js","sources":["../../../src/components/spinner/spinner.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { translate } from 'lit-i18n'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './spinner.scss?inline'\n\nconst SpinnerBaseWithSized = SizedMixin(DdsElement)\n\nexport type SpinnerVariant =\n \| 'neutral'\n \| 'brand'\n \| 'negative'\n \| 'positive'\n \| 'inverted'\n\nexport type SpinnerOrientation = 'vertical' \| 'horizontal'\n\n/*\n `dap-ds-spinner`\n * @summary Loading spinner component.\n * @element dap-ds-spinner\n * @title - Spinner\n \n @csspart base - The main spinner container.\n * @csspart icon - The loading icon element.\n * @csspart icon-base - The base of the loading icon.\n * @csspart icon-content - The content of the loading icon.\n * @csspart text - The loading text element.\n \n @slot - The loading text content.\n * @slot icon - The loading icon content.\n \n @cssprop --dds-spinner-icon-color-neutral - Color for neutral spinner icons (default: var(--dds-icon-neutral-base))\n * @cssprop --dds-spinner-icon-color-brand - Color for brand spinner icons (default: var(--dds-icon-brand-subtle))\n * @cssprop --dds-spinner-icon-color-negative - Color for negative spinner icons (default: var(--dds-icon-negative-subtle))\n * @cssprop --dds-spinner-icon-color-positive - Color for positive spinner icons (default: var(--dds-icon-positive-subtle))\n * @cssprop --dds-spinner-icon-color-inverted - Color for inverted spinner icons (default: var(--dds-icon-neutral-inverted))\n * @cssprop --dds-spinner-text-spacing - Spacing between spinner and text (default: var(--dds-spacing-400))\n * @cssprop --dds-spinner-animation-duration - Duration of the spinner animation (default: 1s)\n \n @property { 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' } size - The size of the spinner. Default is `lg`. See SizedMixin.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\"); see SizedMixin.\n /\nexport default class DapDSSpinner extends SpinnerBaseWithSized {\n static tagName = 'dap-ds-spinner'\n\n static dependencies = {\n 'dap-ds-icon': DapDSIcon,\n }\n\n constructor() {\n super()\n this.size = 'lg'\n }\n /\n The variant of the spinner.\n * @type {\"neutral\" \| \"brand\" \| \"negative\" \| \"positive\" \| \"inverted\"}\n /\n @property({ type: String, reflect: true }) variant: SpinnerVariant = 'neutral'\n\n /* The size of the spinner in pixels. This overrides the size attribute /\n @property({ type: Number }) staticSize?: number\n /* The loading text. /\n @property({ type: String }) text: string\n /* Removes the text color /\n @property({ type: Boolean, reflect: true }) noColor = false\n /\n The orientation of the spinner (icon and text layout).\n * @type {\"vertical\" \| \"horizontal\"}\n /\n @property({ type: String, reflect: true }) orientation: SpinnerOrientation =\n 'vertical'\n\n /\n The aria-live politeness level for screen readers.\n * @type {\"polite\" \| \"assertive\" \| \"off\"}\n /\n @property({ type: String, attribute: 'aria-live' })\n ariaLive: 'polite' \| 'assertive' \| 'off' = 'polite'\n /\n Delay in milliseconds before showing the spinner.\n * Prevents flash for quick operations.\n /\n @property({ type: Number }) delay = 0\n\n /* @internal /\n @state() private _visible = false\n\n private _delayTimeout?: number\n\n static readonly styles = unsafeCSS(styles)\n\n /* Maps effectiveSize from SizedMixin to spinner visual size (xxs→xs, else effectiveSize). */\n private get spinnerSize(): 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' {\n return this.effectiveSize === 'xxs' ? 'xs' : this.effectiveSize\n }\n\n connectedCallback() {\n super.connectedCallback()\n if (this.delay > 0) {\n this._delayTimeout = window.setTimeout(() => {\n this._visible = true\n }, this.delay)\n } else {\n this._visible = true\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this._delayTimeout) {\n clearTimeout(this._delayTimeout)\n }\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties)\n this._setupIconSlot()\n }\n\n protected updated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.updated(_changedProperties)\n // Update slotted icons when size, staticSize, or customStyles changes\n if (\n _changedProperties.has('size') \|\|\n _changedProperties.has('sizeMap') \|\|\n _changedProperties.has('staticSize') \|\|\n _changedProperties.has('customStyles')\n ) {\n this._updateSlottedIcons()\n }\n }\n\n private _setupIconSlot(): void {\n // Initial update in case icons are already slotted\n this._updateSlottedIcons()\n }\n\n private _updateSlottedIcons(): void {\n try {\n if (!this.shadowRoot) return\n\n const iconSlot = this.shadowRoot.querySelector(\n 'slot[name=\"icon\"]',\n ) as HTMLSlotElement\n\n if (!iconSlot) return\n\n const assignedElements = iconSlot.assignedElements({\n flatten: true,\n })\n\n // If custom styles are provided, don't apply inline animations\n // Let the custom CSS handle the animation instead\n const hasCustomStyles = !!this.customStyles\n\n const animationDuration =\n getComputedStyle(this).getPropertyValue(\n '--dds-spinner-animation-duration',\n ) \|\| '1s'\n\n assignedElements.forEach(element => {\n if (element instanceof HTMLElement) {\n const prefersReducedMotion = window.matchMedia(\n '(prefers-reduced-motion: reduce)',\n ).matches\n\n // If it's an icon component directly slotted, apply animation and size\n if (\n element.tagName === 'DAP-DS-ICON' \|\|\n element.localName === 'dap-ds-icon'\n ) {\n // Only apply animation via inline styles if no custom styles are provided\n // Custom styles should handle animation in that case\n if (!hasCustomStyles) {\n if (prefersReducedMotion) {\n element.style.animation = `dds-fade ${animationDuration} ease-in-out infinite`\n } else {\n element.style.animation = `dds-spin ${animationDuration} linear infinite`\n }\n } else {\n // Clear any existing inline animation to let CSS take over\n element.style.animation = ''\n }\n element.style.display = 'block'\n\n if (this.spinnerSize) {\n element.setAttribute('size', this.spinnerSize)\n }\n if (this.staticSize !== undefined) {\n element.setAttribute('staticSize', this.staticSize.toString())\n }\n } else {\n // If it's a wrapper element (like span), apply animation only to the wrapper\n // The nested icon will rotate with the wrapper, so we don't need to animate it separately\n if (!hasCustomStyles) {\n if (prefersReducedMotion) {\n element.style.animation = `dds-fade ${animationDuration} ease-in-out infinite`\n } else {\n element.style.animation = `dds-spin ${animationDuration} linear infinite`\n }\n } else {\n // Clear any existing inline animation to let CSS take over\n element.style.animation = ''\n }\n element.style.display = 'block'\n\n // Update nested icon size attributes but don't apply animation to it\n const nestedIcon = element.querySelector('dap-ds-icon')\n if (nestedIcon) {\n nestedIcon.style.display = 'block'\n // Remove any existing animation from nested icon to prevent double animation\n nestedIcon.style.animation = ''\n\n if (this.spinnerSize) {\n nestedIcon.setAttribute('size', this.spinnerSize)\n }\n if (this.staticSize !== undefined) {\n nestedIcon.setAttribute(\n 'staticSize',\n this.staticSize.toString(),\n )\n }\n }\n }\n }\n })\n } catch (error) {\n console.warn('Failed to update slotted icons:', error)\n }\n }\n\n render() {\n if (!this._visible) {\n return null\n }\n\n return html`\n <div\n part=\"base\"\n role=\"status\"\n name=\"icon-spinner\"\n aria-label=${this.ariaLabel ?? translate('spinner')}\n aria-live=${this.ariaLive}\n class=\"${clsx('spinner', {\n [`spinner--${this.spinnerSize}`]: this.spinnerSize,\n [`spinner--${this.variant}`]: this.variant,\n [`spinner--${this.orientation}`]: this.orientation,\n })}\">\n <slot name=\"icon\" @slotchange=${this._updateSlottedIcons}>\n <dap-ds-icon\n part=\"icon\"\n exportparts=\"base: icon-base, content: icon-content\"\n size=${this.spinnerSize}\n staticSize=${ifDefined(this.staticSize)}\n name=\"loading-spinner\"\n class=\"spinner__icon\"></dap-ds-icon>\n </slot>\n ${this.text\n ? html` <span\n part=\"text\"\n class=${clsx('spinner__text', {\n 'spinner__text--no-color': this.noColor,\n })}>\n ${this.text}\n </span>`\n : html`<slot></slot>`}\n </div>\n `\n }\n}\n"],"names":["SpinnerBaseWithSized","SizedMixin","DdsElement","_DapDSSpinner","_changedProperties","iconSlot","assignedElements","hasCustomStyles","animationDuration","element","prefersReducedMotion","nestedIcon","error","html","_a","translate","clsx","ifDefined","DapDSIcon","unsafeCSS","styles","DapDSSpinner","__decorateClass","property","state"],"mappings":"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"}
1	+ {"version":3,"file":"spinner.component.js","sources":["../../../src/components/spinner/spinner.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './spinner.scss?inline'\n\nconst SpinnerBaseWithSized = SizedMixin(DdsElement)\n\nexport type SpinnerVariant =\n \| 'neutral'\n \| 'brand'\n \| 'negative'\n \| 'positive'\n \| 'inverted'\n\nexport type SpinnerOrientation = 'vertical' \| 'horizontal'\n\n/*\n `dap-ds-spinner`\n * @summary Loading spinner component.\n * @element dap-ds-spinner\n * @title - Spinner\n \n @csspart base - The main spinner container.\n * @csspart icon - The loading icon element.\n * @csspart icon-base - The base of the loading icon.\n * @csspart icon-content - The content of the loading icon.\n * @csspart text - The loading text element.\n \n @slot - The loading text content.\n * @slot icon - The loading icon content.\n \n @cssprop --dds-spinner-icon-color-neutral - Color for neutral spinner icons (default: var(--dds-icon-neutral-base))\n * @cssprop --dds-spinner-icon-color-brand - Color for brand spinner icons (default: var(--dds-icon-brand-subtle))\n * @cssprop --dds-spinner-icon-color-negative - Color for negative spinner icons (default: var(--dds-icon-negative-subtle))\n * @cssprop --dds-spinner-icon-color-positive - Color for positive spinner icons (default: var(--dds-icon-positive-subtle))\n * @cssprop --dds-spinner-icon-color-inverted - Color for inverted spinner icons (default: var(--dds-icon-neutral-inverted))\n * @cssprop --dds-spinner-text-spacing - Spacing between spinner and text (default: var(--dds-spacing-400))\n * @cssprop --dds-spinner-animation-duration - Duration of the spinner animation (default: 1s)\n \n @property { 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' } size - The size of the spinner. Default is `lg`. See SizedMixin.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\"); see SizedMixin.\n /\nexport default class DapDSSpinner extends SpinnerBaseWithSized {\n static tagName = 'dap-ds-spinner'\n\n static dependencies = {\n 'dap-ds-icon': DapDSIcon,\n }\n\n constructor() {\n super()\n this.size = 'lg'\n }\n /\n The variant of the spinner.\n * @type {\"neutral\" \| \"brand\" \| \"negative\" \| \"positive\" \| \"inverted\"}\n /\n @property({ type: String, reflect: true }) variant: SpinnerVariant = 'neutral'\n\n /* The size of the spinner in pixels. This overrides the size attribute /\n @property({ type: Number }) staticSize?: number\n /* The loading text. /\n @property({ type: String }) text: string\n /* Removes the text color /\n @property({ type: Boolean, reflect: true }) noColor = false\n /\n The orientation of the spinner (icon and text layout).\n * @type {\"vertical\" \| \"horizontal\"}\n /\n @property({ type: String, reflect: true }) orientation: SpinnerOrientation =\n 'vertical'\n\n /\n The aria-live politeness level for screen readers.\n * @type {\"polite\" \| \"assertive\" \| \"off\"}\n /\n @property({ type: String, attribute: 'aria-live' })\n ariaLive: 'polite' \| 'assertive' \| 'off' = 'polite'\n /\n Delay in milliseconds before showing the spinner.\n * Prevents flash for quick operations.\n /\n @property({ type: Number }) delay = 0\n\n /* @internal /\n // Visible by default so it renders under SSR (where `connectedCallback` does\n // not run). With no `delay`, server and client both render the spinner, so\n // there is no `null -> template` root flip that would throw on DSD hydration\n // (\"Unexpected TemplateResult rendered to part\"). A positive `delay` hides it\n // again in `connectedCallback` (client only).\n @state() private _visible = true\n\n private _delayTimeout?: number\n\n static readonly styles = unsafeCSS(styles)\n\n /* Maps effectiveSize from SizedMixin to spinner visual size (xxs→xs, else effectiveSize). */\n private get spinnerSize(): 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' {\n return this.effectiveSize === 'xxs' ? 'xs' : this.effectiveSize\n }\n\n connectedCallback() {\n super.connectedCallback()\n if (this.delay > 0) {\n this._visible = false\n this._delayTimeout = window.setTimeout(() => {\n this._visible = true\n }, this.delay)\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this._delayTimeout) {\n clearTimeout(this._delayTimeout)\n }\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties)\n this._setupIconSlot()\n }\n\n protected updated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.updated(_changedProperties)\n // Update slotted icons when size, staticSize, or customStyles changes\n if (\n _changedProperties.has('size') \|\|\n _changedProperties.has('sizeMap') \|\|\n _changedProperties.has('staticSize') \|\|\n _changedProperties.has('customStyles')\n ) {\n this._updateSlottedIcons()\n }\n }\n\n private _setupIconSlot(): void {\n // Initial update in case icons are already slotted\n this._updateSlottedIcons()\n }\n\n private _updateSlottedIcons(): void {\n try {\n if (!this.shadowRoot) return\n\n const iconSlot = this.shadowRoot.querySelector(\n 'slot[name=\"icon\"]',\n ) as HTMLSlotElement\n\n if (!iconSlot) return\n\n const assignedElements = iconSlot.assignedElements({\n flatten: true,\n })\n\n // If custom styles are provided, don't apply inline animations\n // Let the custom CSS handle the animation instead\n const hasCustomStyles = !!this.customStyles\n\n const animationDuration =\n getComputedStyle(this).getPropertyValue(\n '--dds-spinner-animation-duration',\n ) \|\| '1s'\n\n assignedElements.forEach(element => {\n if (element instanceof HTMLElement) {\n const prefersReducedMotion = window.matchMedia(\n '(prefers-reduced-motion: reduce)',\n ).matches\n\n // If it's an icon component directly slotted, apply animation and size\n if (\n element.tagName === 'DAP-DS-ICON' \|\|\n element.localName === 'dap-ds-icon'\n ) {\n // Only apply animation via inline styles if no custom styles are provided\n // Custom styles should handle animation in that case\n if (!hasCustomStyles) {\n if (prefersReducedMotion) {\n element.style.animation = `dds-fade ${animationDuration} ease-in-out infinite`\n } else {\n element.style.animation = `dds-spin ${animationDuration} linear infinite`\n }\n } else {\n // Clear any existing inline animation to let CSS take over\n element.style.animation = ''\n }\n element.style.display = 'block'\n\n if (this.spinnerSize) {\n element.setAttribute('size', this.spinnerSize)\n }\n if (this.staticSize !== undefined) {\n element.setAttribute('staticSize', this.staticSize.toString())\n }\n } else {\n // If it's a wrapper element (like span), apply animation only to the wrapper\n // The nested icon will rotate with the wrapper, so we don't need to animate it separately\n if (!hasCustomStyles) {\n if (prefersReducedMotion) {\n element.style.animation = `dds-fade ${animationDuration} ease-in-out infinite`\n } else {\n element.style.animation = `dds-spin ${animationDuration} linear infinite`\n }\n } else {\n // Clear any existing inline animation to let CSS take over\n element.style.animation = ''\n }\n element.style.display = 'block'\n\n // Update nested icon size attributes but don't apply animation to it\n const nestedIcon = element.querySelector('dap-ds-icon')\n if (nestedIcon) {\n nestedIcon.style.display = 'block'\n // Remove any existing animation from nested icon to prevent double animation\n nestedIcon.style.animation = ''\n\n if (this.spinnerSize) {\n nestedIcon.setAttribute('size', this.spinnerSize)\n }\n if (this.staticSize !== undefined) {\n nestedIcon.setAttribute(\n 'staticSize',\n this.staticSize.toString(),\n )\n }\n }\n }\n }\n })\n } catch (error) {\n console.warn('Failed to update slotted icons:', error)\n }\n }\n\n render() {\n if (!this._visible) {\n return null\n }\n\n return html`\n <div\n part=\"base\"\n role=\"status\"\n name=\"icon-spinner\"\n aria-label=${this.ariaLabel ?? this.localize.t('spinner')}\n aria-live=${this.ariaLive}\n class=\"${clsx('spinner', {\n [`spinner--${this.spinnerSize}`]: this.spinnerSize,\n [`spinner--${this.variant}`]: this.variant,\n [`spinner--${this.orientation}`]: this.orientation,\n })}\">\n <slot name=\"icon\" @slotchange=${this._updateSlottedIcons}>\n <dap-ds-icon\n part=\"icon\"\n exportparts=\"base: icon-base, content: icon-content\"\n size=${this.spinnerSize}\n staticSize=${ifDefined(this.staticSize)}\n name=\"loading-spinner\"\n class=\"spinner__icon\"></dap-ds-icon>\n </slot>\n ${this.text\n ? html` <span\n part=\"text\"\n class=${clsx('spinner__text', {\n 'spinner__text--no-color': this.noColor,\n })}>\n ${this.text}\n </span>`\n : html`<slot></slot>`}\n </div>\n `\n }\n}\n"],"names":["SpinnerBaseWithSized","SizedMixin","DdsElement","_DapDSSpinner","_changedProperties","iconSlot","assignedElements","hasCustomStyles","animationDuration","element","prefersReducedMotion","nestedIcon","error","html","_a","clsx","ifDefined","DapDSIcon","unsafeCSS","styles","DapDSSpinner","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/stack/stack.component.d.ts CHANGED Viewed

@@ -8,7 +8,8 @@ import { DdsElement } from '../../internal/dds-hu-element';
  *
  * @slot - The content of the stack.
  *
- * @csspart stack - The main stack container.
+ * @csspart stack - Alias of the base part.
+ * @csspart base - The main stack container.
  */
 export default class DapDSStack extends DdsElement {
     static tagName: string;

package/dist/components/stack/stack.component.js CHANGED Viewed

@@ -1,19 +1,16 @@
-import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as h } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as d } from "../../node_modules/lit-html/static.js";
-import { DdsElement as l } from "../../internal/dds-hu-element.js";
-import f from "./stack.scss.js";
-import { unsafeCSS as u } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (m, r, s, i) => {
-  for (var t = i > 1 ? void 0 : i ? y(r, s) : r, p = m.length - 1, c; p >= 0; p--)
-    (c = m[p]) && (t = (i ? c(r, s, t) : c(t)) || t);
+import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as m } from "lit";
+import { property as o } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { html as l } from "lit/static-html.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import u from "./stack.scss.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (g, r, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? y(r, s) : r, p = g.length - 1, c; p >= 0; p--)
+    (c = g[p]) && (t = (i ? c(r, s, t) : c(t)) || t);
   return i && t && v(r, s, t), t;
 };
-const a = class a extends l {
+const a = class a extends f {
   constructor() {
     super(...arguments), this.direction = "column", this.endMargin = !1, this.startMargin = !1, this.nowrap = !1;
   }
@@ -27,14 +24,14 @@ const a = class a extends l {
     return r === "row" || r === "row-reverse" ? `margin-left: ${i ? `var(--dds-spacing-${s})` : "0"}; margin-right: ${t ? `var(--dds-spacing-${s})` : "0"};` : `margin-top: ${i ? `var(--dds-spacing-${s})` : "0"}; margin-bottom: ${t ? `var(--dds-spacing-${s})` : "0"};`;
   }
   render() {
-    return d`
+    return l`
       <div
-        class=${g("stack", `stack-gap-${this.spacing}`, {
+        class=${h("stack", `stack-gap-${this.spacing}`, {
       [`stack-direction-${this.direction}`]: this.direction,
       "stack-nowrap": this.nowrap
     })}
-        part="base"
-        style=${h(
+        part="base stack"
+        style=${d(
       this.getMarginStyles(
         this.direction,
         this.spacing,
@@ -47,7 +44,7 @@ const a = class a extends l {
     `;
   }
 };
-a.tagName = "dap-ds-stack", a.styles = u(f);
+a.tagName = "dap-ds-stack", a.styles = m(u);
 let e = a;
 n([
   o()

package/dist/components/stack/stack.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stack.component.js","sources":["../../../src/components/stack/stack.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CSSFlexDirection, Spacing } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './stack.scss?inline'\n\n/*\n `dap-ds-stack`\n * @summary A stack is a container for stacked content.\n * @element dap-ds-stack\n * @title - Stack\n \n @slot - The content of the stack.\n \n @csspart stack - The main stack container.\n /\nexport default class DapDSStack extends DdsElement {\n static tagName = 'dap-ds-stack'\n\n /* The direction of the stack.\n * @type {'column' \| 'column-reverse' \| 'row' \| 'row-reverse'}\n /\n @property() direction: CSSFlexDirection = 'column'\n /* Adds margin to the end of the stack. /\n @property({ type: Boolean }) endMargin?: boolean = false\n /* Adds margin to the start of the stack. /\n @property({ type: Boolean }) startMargin?: boolean = false\n /* Disables wrapping of the stack items onto multiple lines. /\n @property({ type: Boolean }) nowrap: boolean = false\n\n private _spacing: Spacing\n /* The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc) */\n @property({ type: Number })\n set spacing(value: Spacing) {\n this._spacing = value\n }\n get spacing() {\n if (\n !this._spacing &&\n this._spacing !== 0 &&\n (this.direction === 'column' \|\| this.direction === 'column-reverse')\n ) {\n return 600\n }\n\n if (\n !this._spacing &&\n this._spacing !== 0 &&\n (this.direction === 'row' \|\| this.direction === 'row-reverse')\n ) {\n return 200\n }\n\n return this._spacing\n }\n\n static readonly styles = unsafeCSS(styles)\n\n getMarginStyles(\n direction: CSSFlexDirection,\n spacing: number,\n startMargin?: boolean,\n endMargin?: boolean,\n ) {\n if (direction === 'row' \|\| direction === 'row-reverse') {\n return `margin-left: ${startMargin ? `var(--dds-spacing-${spacing})` : '0'}; margin-right: ${endMargin ? `var(--dds-spacing-${spacing})` : '0'};`\n }\n\n return `margin-top: ${startMargin ? `var(--dds-spacing-${spacing})` : '0'}; margin-bottom: ${endMargin ? `var(--dds-spacing-${spacing})` : '0'};`\n }\n\n render() {\n return html`\n <div\n class=${clsx('stack', `stack-gap-${this.spacing}`, {\n [`stack-direction-${this.direction}`]: this.direction,\n 'stack-nowrap': this.nowrap,\n })}\n part=\"base\"\n style=${ifDefined(\n this.getMarginStyles(\n this.direction,\n this.spacing,\n this.startMargin,\n this.endMargin,\n ),\n )}>\n <slot></slot>\n </div>\n `\n }\n}\n"],"names":["_DapDSStack","DdsElement","value","direction","spacing","startMargin","endMargin","html","clsx","ifDefined","unsafeCSS","styles","DapDSStack","__decorateClass","property"],"mappings":"~~;;;;;;;;;;;;;;;AAoBA~~,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAM4C,KAAA,YAAA,UAES,KAAA,YAAA,IAEE,KAAA,cAAA,IAEN,KAAA,SAAA;AAAA,EAAA;AAAA,EAK/C,IAAI,QAAQC,GAAgB;AAC1B,SAAK,WAAWA;AAAA,EAAA;AAAA,EAElB,IAAI,UAAU;AAEV,WAAA,CAAC,KAAK,YACN,KAAK,aAAa,MACjB,KAAK,cAAc,YAAY,KAAK,cAAc,oBAE5C,MAIP,CAAC,KAAK,YACN,KAAK,aAAa,MACjB,KAAK,cAAc,SAAS,KAAK,cAAc,iBAEzC,MAGF,KAAK;AAAA,EAAA;AAAA,EAKd,gBACEC,GACAC,GACAC,GACAC,GACA;AACI,WAAAH,MAAc,SAASA,MAAc,gBAChC,gBAAgBE,IAAc,qBAAqBD,CAAO,MAAM,GAAG,mBAAmBE,IAAY,qBAAqBF,CAAO,MAAM,GAAG,MAGzI,eAAeC,IAAc,qBAAqBD,CAAO,MAAM,GAAG,oBAAoBE,IAAY,qBAAqBF,CAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAGhJ,SAAS;AACA,WAAAG;~~AAAAA~~;~~AAAAA~~,gBAEKC,EAAK,SAAS,aAAa,KAAK,OAAO,IAAI;AAAA,MACjD,CAAC,mBAAmB,KAAK,SAAS,EAAE,GAAG,KAAK;AAAA,MAC5C,gBAAgB,KAAK;AAAA,IAAA,CACtB,CAAC;AAAA;AAAA,gBAEMC;~~AAAAA~~,MACN,KAAK;AAAA,QACH,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAAA,IACP,CACD;AAAA;AAAA;AAAA;AAAA,EAAA;AAKT;AA1EET,EAAO,UAAU,gBAuCDA,EAAA,SAASU,EAAUC,CAAM;AAxC3C,IAAqBC,IAArBZ;AAMca,EAAA;AAAA,EAAXC,EAAS;AAAA,GANSF,EAMP,WAAA,aAAA,CAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GARRF,EAQU,WAAA,aAAA,CAAA;AAEAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,eAAA,CAAA;AAEAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAZRF,EAYU,WAAA,UAAA,CAAA;AAKzBC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAhBPF,EAiBf,WAAA,WAAA,CAAA;"}
1	+ {"version":3,"file":"stack.component.js","sources":["../../../src/components/stack/stack.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CSSFlexDirection, Spacing } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './stack.scss?inline'\n\n/*\n `dap-ds-stack`\n * @summary A stack is a container for stacked content.\n * @element dap-ds-stack\n * @title - Stack\n \n @slot - The content of the stack.\n \n @csspart stack - Alias of the base part.\n * @csspart base - The main stack container.\n /\nexport default class DapDSStack extends DdsElement {\n static tagName = 'dap-ds-stack'\n\n /* The direction of the stack.\n * @type {'column' \| 'column-reverse' \| 'row' \| 'row-reverse'}\n /\n @property() direction: CSSFlexDirection = 'column'\n /* Adds margin to the end of the stack. /\n @property({ type: Boolean }) endMargin?: boolean = false\n /* Adds margin to the start of the stack. /\n @property({ type: Boolean }) startMargin?: boolean = false\n /* Disables wrapping of the stack items onto multiple lines. /\n @property({ type: Boolean }) nowrap: boolean = false\n\n private _spacing: Spacing\n /* The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc) */\n @property({ type: Number })\n set spacing(value: Spacing) {\n this._spacing = value\n }\n get spacing() {\n if (\n !this._spacing &&\n this._spacing !== 0 &&\n (this.direction === 'column' \|\| this.direction === 'column-reverse')\n ) {\n return 600\n }\n\n if (\n !this._spacing &&\n this._spacing !== 0 &&\n (this.direction === 'row' \|\| this.direction === 'row-reverse')\n ) {\n return 200\n }\n\n return this._spacing\n }\n\n static readonly styles = unsafeCSS(styles)\n\n getMarginStyles(\n direction: CSSFlexDirection,\n spacing: number,\n startMargin?: boolean,\n endMargin?: boolean,\n ) {\n if (direction === 'row' \|\| direction === 'row-reverse') {\n return `margin-left: ${startMargin ? `var(--dds-spacing-${spacing})` : '0'}; margin-right: ${endMargin ? `var(--dds-spacing-${spacing})` : '0'};`\n }\n\n return `margin-top: ${startMargin ? `var(--dds-spacing-${spacing})` : '0'}; margin-bottom: ${endMargin ? `var(--dds-spacing-${spacing})` : '0'};`\n }\n\n render() {\n return html`\n <div\n class=${clsx('stack', `stack-gap-${this.spacing}`, {\n [`stack-direction-${this.direction}`]: this.direction,\n 'stack-nowrap': this.nowrap,\n })}\n part=\"base stack\"\n style=${ifDefined(\n this.getMarginStyles(\n this.direction,\n this.spacing,\n this.startMargin,\n this.endMargin,\n ),\n )}>\n <slot></slot>\n </div>\n `\n }\n}\n"],"names":["_DapDSStack","DdsElement","value","direction","spacing","startMargin","endMargin","html","clsx","ifDefined","unsafeCSS","styles","DapDSStack","__decorateClass","property"],"mappings":";;;;;;;;;;;;AAqBA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAM4C,KAAA,YAAA,UAES,KAAA,YAAA,IAEE,KAAA,cAAA,IAEN,KAAA,SAAA;AAAA,EAAA;AAAA,EAK/C,IAAI,QAAQC,GAAgB;AAC1B,SAAK,WAAWA;AAAA,EAAA;AAAA,EAElB,IAAI,UAAU;AAEV,WAAA,CAAC,KAAK,YACN,KAAK,aAAa,MACjB,KAAK,cAAc,YAAY,KAAK,cAAc,oBAE5C,MAIP,CAAC,KAAK,YACN,KAAK,aAAa,MACjB,KAAK,cAAc,SAAS,KAAK,cAAc,iBAEzC,MAGF,KAAK;AAAA,EAAA;AAAA,EAKd,gBACEC,GACAC,GACAC,GACAC,GACA;AACI,WAAAH,MAAc,SAASA,MAAc,gBAChC,gBAAgBE,IAAc,qBAAqBD,CAAO,MAAM,GAAG,mBAAmBE,IAAY,qBAAqBF,CAAO,MAAM,GAAG,MAGzI,eAAeC,IAAc,qBAAqBD,CAAO,MAAM,GAAG,oBAAoBE,IAAY,qBAAqBF,CAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAGhJ,SAAS;AACA,WAAAG;AAAA;AAAA,gBAEKC,EAAK,SAAS,aAAa,KAAK,OAAO,IAAI;AAAA,MACjD,CAAC,mBAAmB,KAAK,SAAS,EAAE,GAAG,KAAK;AAAA,MAC5C,gBAAgB,KAAK;AAAA,IAAA,CACtB,CAAC;AAAA;AAAA,gBAEMC;AAAA,MACN,KAAK;AAAA,QACH,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAAA,IACP,CACD;AAAA;AAAA;AAAA;AAAA,EAAA;AAKT;AA1EET,EAAO,UAAU,gBAuCDA,EAAA,SAASU,EAAUC,CAAM;AAxC3C,IAAqBC,IAArBZ;AAMca,EAAA;AAAA,EAAXC,EAAS;AAAA,GANSF,EAMP,WAAA,aAAA,CAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GARRF,EAQU,WAAA,aAAA,CAAA;AAEAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,eAAA,CAAA;AAEAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAZRF,EAYU,WAAA,UAAA,CAAA;AAKzBC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAhBPF,EAiBf,WAAA,WAAA,CAAA;"}

package/dist/components/switch/switch.component.d.ts CHANGED Viewed

@@ -55,6 +55,12 @@ import { default as DapDSTypography } from '../typography/typography.component';
  * @csspart input - The native input of the switch.
  * @csspart control - The control of the switch.
  * @csspart description - The description of the switch.
+ * @csspart label-container - The label container of the switch.
+ * @csspart feedback - The feedback of the switch.
+ * @csspart high-contrast - The high contrast indicator of the switch.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  */
 export default class DapDSSwitch extends LabeledChoiceElement {
     static tagName: string;

package/dist/components/switch/switch.component.js CHANGED Viewed

@@ -1,24 +1,21 @@
 import { clsx as r } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as b } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { query as u } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as l } from "../../node_modules/lit-html/static.js";
-import { LabeledChoiceElement as f } from "../../internal/mixin/labeledChoiceElement.js";
-import y from "../feedback/feedback.component.js";
-import m from "../form/form-label/form-label.component.js";
-import $ from "../icon/icon.component.js";
-import k from "../typography/typography.component.js";
-import _ from "./switch.scss.js";
-import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, c = (h, e, s, p) => {
-  for (var t = void 0, o = h.length - 1, a; o >= 0; o--)
-    (a = h[o]) && (t = a(e, s, t) || t);
-  return t && v(e, s, t), t;
+import { unsafeCSS as u } from "lit";
+import { query as f, property as b } from "lit/decorators.js";
+import { ifDefined as o } from "lit/directives/if-defined.js";
+import { html as l } from "lit/static-html.js";
+import { LabeledChoiceElement as y } from "../../internal/mixin/labeledChoiceElement.js";
+import { formLabelTemplate as m } from "../../internal/templates/formLabel.js";
+import $ from "../feedback/feedback.component.js";
+import k from "../form/form-label/form-label.component.js";
+import _ from "../icon/icon.component.js";
+import g from "../typography/typography.component.js";
+import v from "./switch.scss.js";
+var I = Object.defineProperty, c = (h, e, s, p) => {
+  for (var t = void 0, d = h.length - 1, a; d >= 0; d--)
+    (a = h[d]) && (t = a(e, s, t) || t);
+  return t && I(e, s, t), t;
 }, i;
-const n = (i = class extends f {
+const n = (i = class extends y {
   constructor() {
     super(), this.border = !1, this.type = "normal", this.handleClick = (s) => {
       if (this.disabled || this.readonly) {
@@ -26,7 +23,7 @@ const n = (i = class extends f {
         return;
       }
       this.validateProperties(), this.checked = !this.checked;
-      const { checked: p, value: t, disabled: o } = this;
+      const { checked: p, value: t, disabled: d } = this;
       try {
         const a = new CustomEvent("dds-change", {
           bubbles: !0,
@@ -35,7 +32,7 @@ const n = (i = class extends f {
           detail: {
             checked: p,
             value: t || "",
-            disabled: o,
+            disabled: d,
             readonly: this.readonly
           }
         });
@@ -137,10 +134,10 @@ const n = (i = class extends f {
               .required=${this.required}
               .disabled=${this.disabled}
               .readonly=${this.readonly}
-              aria-labelledby=${d(
+              aria-labelledby=${o(
       !this.ariaLabel && this.label ? this.labelId : void 0
     )}
-              aria-describedby=${this.ariaLabel ? "" : d(this.getAriaDescribedBy())}
+              aria-describedby=${this.ariaLabel ? "" : o(this.getAriaDescribedBy())}
               aria-checked=${this.checked ? "true" : "false"}
               .aria-invalid=${this.invalid ? "true" : null}
               @invalid=${this.handleInvalid}
@@ -191,30 +188,30 @@ const n = (i = class extends f {
       "choice__label--bottom": this.descriptionPlacement === "top",
       "choice__label--top": this.descriptionPlacement === "bottom"
     })}>
-              ${this.label && l`<dap-ds-form-label
-                id=${this.labelId}
-                class="label"
-                part="label"
-                .size=${this.size}
-                .required=${this.required}
-                .requiredLabel=${this.requiredLabel}
-                .optional=${this.optional}
-                .optionalLabel=${this.optionalLabel}
-                aria-hidden="true"
-                subtle
-                .disabled=${this.disabled || this.readonly}
-                .readonly=${this.readonly}
-                .hideLabel=${this.hideLabel}
-                label=${d(this.label)}
-                renderAs="span">
-              </dap-ds-form-label>`}
+              ${m({
+      label: this.label,
+      id: this.labelId,
+      size: this.size,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      disabled: this.disabled || this.readonly,
+      hideLabel: this.hideLabel,
+      subtle: !0,
+      // Rendered as a decorative <span> (not a <label>): checkbox/switch
+      // already wrap the input in an outer <label>, and the accessible
+      // name comes from the input's aria-labelledby=${labelId}.
+      as: "span",
+      ariaHidden: !0
+    })}
               ${this.description && l`
                 <dap-ds-typography
                   part="description"
                   class="description"
                   variant="description"
                   aria-hidden="true"
-                  size=${d(this.size)}
+                  size=${o(this.size)}
                   id=${this.descriptionId}>
                   ${this.description}
                 </dap-ds-typography>
@@ -224,8 +221,8 @@ const n = (i = class extends f {
           ${this.feedback && l`
             <dap-ds-feedback
               part="feedback"
-              feedbackType=${d(this.feedbackType)}
-              feedbackSize=${d(this.size)}
+              feedbackType=${o(this.feedbackType)}
+              feedbackSize=${o(this.size)}
               id="feedback"
               .subtle=${this.subtle}>
               ${this.feedback}
@@ -236,13 +233,13 @@ const n = (i = class extends f {
     `;
   }
 }, i.tagName = "dap-ds-switch", i.dependencies = {
-  "dap-ds-icon": $,
-  "dap-ds-form-label": m,
-  "dap-ds-typography": k,
-  "dap-ds-feedback": y
-}, i.nextId = 0, i.styles = g(_), i);
+  "dap-ds-icon": _,
+  "dap-ds-form-label": k,
+  "dap-ds-typography": g,
+  "dap-ds-feedback": $
+}, i.nextId = 0, i.styles = u(v), i);
 c([
-  u(".input")
+  f(".input")
 ], n.prototype, "input");
 c([
   b({ type: Boolean })
@@ -250,8 +247,8 @@ c([
 c([
   b({ type: String })
 ], n.prototype, "type");
-let T = n;
+let U = n;
 export {
-  T as default
+  U as default
 };
 //# sourceMappingURL=switch.component.js.map