@politiet/sheriff-web-components 2.12.0 → 2.13.1

package/custom-elements.json

@@ -3116,7 +3116,13 @@
               "kind": "field",
               "name": "cache",
               "privacy": "private",
-              "default": "new Map<string, string | Promise<string>>()"
+              "default": "new Map<string, string>()"
+            },
+            {
+              "kind": "field",
+              "name": "pending",
+              "privacy": "private",
+              "default": "new Map<string, Promise<string>>()"
             },
             {
               "kind": "field",
@@ -4268,6 +4274,16 @@
           "description": "",
           "name": "SDSRadio",
           "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: false, }",
+              "description": "The host carries `role=\"radio\"` and must receive focus itself, so focus must not be\ndelegated into the shadow root the way SDSFormControlMixin sets up by default."
+            },
             {
               "kind": "field",
               "name": "required",
@@ -4370,6 +4386,14 @@
                 "text": "HTMLInputElement"
               }
             },
+            {
+              "kind": "field",
+              "name": "_helpTextElement",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_hasSlottedLabel",
@@ -4379,6 +4403,24 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_slottedLabelText",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_rootNode",
+              "type": {
+                "text": "Document | ShadowRoot | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "_disabled",
@@ -4424,6 +4466,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_pendingGroupSync",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "method",
               "name": "_getGroupRadios",
@@ -4432,34 +4483,119 @@
                 "type": {
                   "text": "SDSRadio[]"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "default": "this.name"
+                },
+                {
+                  "name": "root",
+                  "default": "this._rootNode ?? (this.getRootNode() as Document | ShadowRoot)"
+                }
+              ],
+              "description": "Matches on the `name` property rather than the reflected attribute, so radios created\nimperatively are found before Lit has reflected `name` back out."
             },
             {
               "kind": "method",
-              "name": "_updateGroupValidation",
-              "privacy": "private"
+              "name": "_syncHostAria",
+              "privacy": "private",
+              "description": "Mirrors state onto the host, which is the radio in the accessibility tree.\n\nWritten as attributes rather than through ElementInternals: internals ARIA is\nIDL-only, so assistive technology sees it but axe, Playwright and Testing Library —\nwhich all resolve role and name from attributes — do not."
             },
             {
               "kind": "field",
-              "name": "_handleKeydown",
+              "name": "_supportsAriaElementReferences",
               "privacy": "private",
+              "static": true,
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "_handleMouseDown",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Not every browser focuses a tabindex host on click, and the host must hold focus."
+            },
+            {
+              "kind": "field",
+              "name": "_handleClick",
+              "privacy": "private",
+              "readonly": true,
+              "description": "The label is deliberately not associated with the inert input — a `for` would make\ngetByLabel and friends resolve to an unclickable element — so selection is driven here."
+            },
             {
               "kind": "method",
-              "name": "formResetCallback"
+              "name": "_select",
+              "privacy": "private",
+              "description": "Selection never goes through the inner input: its click is composed, so it would\nretarget to the host and every click would be seen twice from the outside.\nLike a native radio, this only fires `change` when the checkedness actually changes."
             },
             {
               "kind": "method",
-              "name": "_uncheckSiblings",
+              "name": "_updateGroupPositions",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "members",
+                  "type": {
+                    "text": "SDSRadio[]"
+                  }
+                }
+              ],
+              "description": "A radio group does not cross shadow roots, so the browser sees each radio as a set of\none. State the position explicitly across the whole name-group instead."
+            },
+            {
+              "kind": "method",
+              "name": "_updateGroupTabStops",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "members",
+                  "type": {
+                    "text": "SDSRadio[]"
+                  }
+                }
+              ],
+              "description": "A radio group is one tab stop: the checked option, or the first enabled one."
+            },
+            {
+              "kind": "method",
+              "name": "_syncGroup",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "members",
+                  "type": {
+                    "text": "SDSRadio[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_scheduleGroupSync",
+              "privacy": "private",
+              "description": "Conditional rendering and reordering both run through disconnect/connect, while\nfirstUpdated only ever fires once. Membership is recomputed from the microtask so the\nsurrounding batch of insertions has settled — and so every member has been upgraded,\nsince a non-upgraded element matches the selector but has no `name`."
+            },
+            {
+              "kind": "method",
+              "name": "_updateGroupValidation",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_handleChange",
+              "name": "_handleKeydown",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "_uncheckSiblings",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_handleFocus",
@@ -4472,6 +4608,42 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "type",
@@ -6161,6 +6333,16 @@
               "attribute": "strong",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "subtle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "subtle",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "tall",
@@ -6189,6 +6371,14 @@
               "default": "false",
               "fieldName": "strong"
             },
+            {
+              "name": "subtle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "subtle"
+            },
             {
               "name": "tall",
               "type": {
@@ -6252,6 +6442,18 @@
                 "module": "src/sds-text/sds-text.component.ts"
               }
             },
+            {
+              "name": "subtle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "subtle",
+              "inheritedFrom": {
+                "name": "SDSTextComponent",
+                "module": "src/sds-text/sds-text.component.ts"
+              }
+            },
             {
               "name": "tall",
               "type": {
@@ -6294,6 +6496,20 @@
                 "module": "src/sds-text/sds-text.component.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "subtle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "subtle",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SDSTextComponent",
+                "module": "src/sds-text/sds-text.component.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "tall",

package/dist/frameworks/vue.d.ts

@@ -1,35 +1,84 @@
-import type { DefineComponent } from 'vue';
+import type { DefineComponent, HTMLAttributes, ButtonHTMLAttributes, DetailsHTMLAttributes, DialogHTMLAttributes, InputHTMLAttributes, LiHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'vue';
+import type { SDSAlertProps, SDSButtonProps, SDSCardProps, SDSCheckboxGroupProps, SDSCheckboxProps, SDSChipProps, SDSDetailsGroupProps, SDSDetailProps, SDSDialogProps, SDSEnvironmentBannerProps, SDSHeadingProps, SDSIconProps, SDSInternalHeaderProps, SDSLoaderProps, SDSNotificationProps, SDSPopoverProps, SDSProcessProps, SDSProcessStepProps, SDSRadioGroupProps, SDSRadioProps, SDSSelectProps, SDSStepperProps, SDSStepperStepProps, SDSSwitchProps, SDSTagProps, SDSTextAreaProps, SDSTextFieldProps, SDSTextProps, SDSTooltipProps } from '..';
+type Merge<Base, Props> = Omit<Base, keyof Props> & Props;
+/**
+ * Convert  kebab-cased to camelCased/
+ * E.g. `@sds-remove` converts to an `onSdsRemove` prop, because Vue
+ * camelizes listener names that contain no uppercase letters
+ */
+type Camelize<S extends string> = S extends `${infer Head}-${infer Tail}` ? `${Head}${Camelize<Capitalize<Tail>>}` : S;
+/** A component that dispatches no custom events */
+type NoEvents = Record<never, never>;
+/**
+ * Type for a handler receives several kinds of events with the same name.
+ */
+type EventFor<DetailOrEvent> = DetailOrEvent extends Event ? DetailOrEvent : CustomEvent<DetailOrEvent>;
+/**
+ * Makes our event more Vue-esque by mapping a record of `eventName: detail` to the optional `on*` handler.
+ * Covers both the plain-name events (`change`) and the prefixed ones (`sds-remove`).
+ */
+type CustomEventHandlers<Events> = {
+    [Name in keyof Events as `on${Capitalize<Camelize<Name & string>>}`]?: (event: EventFor<Events[Name]>) => void;
+};
+/**
+ * A base type for all of our Sheriff components with props, the standard attributes/events
+ * of the closest matching HTML element, and any custom events it dispatches.
+ */
+type SDSCustomElement<Props, Events = NoEvents, Base = HTMLAttributes> = DefineComponent<Merge<Merge<Base, Partial<Props>>, CustomEventHandlers<Events>>>;
 declare module 'vue' {
     interface GlobalComponents {
-        'sds-alert': DefineComponent<any>;
-        'sds-button': DefineComponent<any>;
-        'sds-checkbox': DefineComponent<any>;
-        'sds-checkbox-group': DefineComponent<any>;
-        'sds-chip': DefineComponent<any>;
-        'sds-details': DefineComponent<any>;
-        'sds-details-group': DefineComponent<any>;
-        'sds-dialog': DefineComponent<any>;
-        'sds-environment-banner': DefineComponent<any>;
-        'sds-heading': DefineComponent<any>;
-        'sds-icon': DefineComponent<any>;
-        'sds-internal-header': DefineComponent<any>;
-        'sds-loader': DefineComponent<any>;
-        'sds-card': DefineComponent<any>;
-        'sds-notification': DefineComponent<any>;
-        'sds-process': DefineComponent<any>;
-        'sds-process-step': DefineComponent<any>;
-        'sds-popover': DefineComponent<any>;
-        'sds-radio': DefineComponent<any>;
-        'sds-radio-group': DefineComponent<any>;
-        'sds-select': DefineComponent<any>;
-        'sds-stepper': DefineComponent<any>;
-        'sds-stepper-step': DefineComponent<any>;
-        'sds-switch': DefineComponent<any>;
-        'sds-tag': DefineComponent<any>;
-        'sds-text': DefineComponent<any>;
-        'sds-textfield': DefineComponent<any>;
-        'sds-textarea': DefineComponent<any>;
-        'sds-tooltip': DefineComponent<any>;
+        'sds-alert': SDSCustomElement<SDSAlertProps, {
+            'sds-remove': void;
+        }>;
+        'sds-card': SDSCustomElement<SDSCardProps>;
+        'sds-environment-banner': SDSCustomElement<SDSEnvironmentBannerProps>;
+        'sds-heading': SDSCustomElement<SDSHeadingProps>;
+        'sds-icon': SDSCustomElement<SDSIconProps>;
+        'sds-internal-header': SDSCustomElement<SDSInternalHeaderProps>;
+        'sds-loader': SDSCustomElement<SDSLoaderProps>;
+        'sds-notification': SDSCustomElement<SDSNotificationProps, {
+            'sds-remove': void;
+        }>;
+        'sds-tag': SDSCustomElement<SDSTagProps>;
+        'sds-text': SDSCustomElement<SDSTextProps>;
+        'sds-tooltip': SDSCustomElement<SDSTooltipProps, {
+            toggle: CustomEvent<HTMLElement> | ToggleEvent;
+        }>;
+        'sds-process': SDSCustomElement<SDSProcessProps>;
+        'sds-process-step': SDSCustomElement<SDSProcessStepProps, NoEvents, LiHTMLAttributes>;
+        'sds-stepper': SDSCustomElement<SDSStepperProps, {
+            change: {
+                index: number;
+            };
+        }>;
+        'sds-stepper-step': SDSCustomElement<SDSStepperStepProps, NoEvents, LiHTMLAttributes>;
+        'sds-popover': SDSCustomElement<SDSPopoverProps>;
+        'sds-details': SDSCustomElement<SDSDetailProps, {
+            toggle: {
+                open: boolean;
+            };
+        }, DetailsHTMLAttributes>;
+        'sds-details-group': SDSCustomElement<SDSDetailsGroupProps>;
+        'sds-button': SDSCustomElement<SDSButtonProps, NoEvents, ButtonHTMLAttributes>;
+        'sds-dialog': SDSCustomElement<SDSDialogProps, {
+            'sds-close': void;
+        }, DialogHTMLAttributes>;
+        'sds-checkbox': SDSCustomElement<SDSCheckboxProps, NoEvents, InputHTMLAttributes>;
+        'sds-checkbox-group': SDSCustomElement<SDSCheckboxGroupProps, {
+            'sds-update': void;
+        }, InputHTMLAttributes>;
+        'sds-chip': SDSCustomElement<SDSChipProps, {
+            'sds-remove': void;
+        }, InputHTMLAttributes>;
+        'sds-radio': SDSCustomElement<SDSRadioProps, NoEvents, InputHTMLAttributes>;
+        'sds-radio-group': SDSCustomElement<SDSRadioGroupProps, {
+            'sds-update': void;
+        }, InputHTMLAttributes>;
+        'sds-switch': SDSCustomElement<SDSSwitchProps, NoEvents, InputHTMLAttributes>;
+        'sds-textfield': SDSCustomElement<SDSTextFieldProps, NoEvents, InputHTMLAttributes>;
+        'sds-select': SDSCustomElement<SDSSelectProps, NoEvents, SelectHTMLAttributes>;
+        'sds-textarea': SDSCustomElement<SDSTextAreaProps, NoEvents, TextareaHTMLAttributes>;
     }
 }
+export {};
 //# sourceMappingURL=vue.d.ts.map

package/dist/frameworks/vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/frameworks/vue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,QAAQ,KAAK,CAAC;IACpB,UAAiB,gBAAgB;QAChC,WAAW,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QAClC,YAAY,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACnC,cAAc,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACrC,oBAAoB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QAC3C,UAAU,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACjC,aAAa,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACpC,mBAAmB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QAC1C,YAAY,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACnC,wBAAwB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QAC/C,aAAa,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACpC,UAAU,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACjC,qBAAqB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QAC5C,YAAY,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACnC,UAAU,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACjC,kBAAkB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACzC,aAAa,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACpC,kBAAkB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACzC,aAAa,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACpC,WAAW,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QAClC,iBAAiB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACxC,YAAY,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACnC,aAAa,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACpC,kBAAkB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACzC,YAAY,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACnC,SAAS,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QAChC,UAAU,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACjC,eAAe,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACtC,cAAc,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACrC,aAAa,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;KACpC;CACD"}
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/frameworks/vue.ts"],"names":[],"mappings":"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"}

package/dist/mixins/sds-dialog-target-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-dialog-target-mixin.d.ts","sourceRoot":"","sources":["../../src/mixins/sds-dialog-target-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,KAAK,aAAa,GAAG,OAAO,GAAG,eAAe,GAAG,YAAY,CAAC;AAM9D,MAAM,WAAW,6BAA6B;IAC7C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,aAAa,CAAC;IAC1C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACtC,gBAAgB,IAAI,IAAI,CAAC;CACzB;AAED,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,aAAa,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,aAAa,CAAC,6BAA6B,CAAC,GAAG,CAAC,CAkHzI"}
+{"version":3,"file":"sds-dialog-target-mixin.d.ts","sourceRoot":"","sources":["../../src/mixins/sds-dialog-target-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,KAAK,aAAa,GAAG,OAAO,GAAG,eAAe,GAAG,YAAY,CAAC;AAM9D,MAAM,WAAW,6BAA6B;IAC7C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,aAAa,CAAC;IAC1C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACtC,gBAAgB,IAAI,IAAI,CAAC;CACzB;AAED,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,aAAa,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,aAAa,CAAC,6BAA6B,CAAC,GAAG,CAAC,CA8HzI"}

package/dist/mixins/sds-dialog-target-mixin.js

@@ -22,6 +22,13 @@ export function SDSDialogTargetMixin(superClass) {
                 this._updateCommandTarget();
             }
         }
+        connectedCallback() {
+            super.connectedCallback();
+            // React moves keyed nodes by disconnect/reconnect without changing props, so updated() won't re-run.
+            if (this.hasUpdated) {
+                this._updateCommandTarget();
+            }
+        }
         disconnectedCallback() {
             super.disconnectedCallback();
             this._cleanupDialogObserver();
@@ -80,6 +87,9 @@ export function SDSDialogTargetMixin(superClass) {
             }
         }
         runDialogCommand() {
+            if (!this._dialogElement?.isConnected) {
+                this._updateCommandTarget();
+            }
             if (!this._dialogElement) {
                 return;
             }

package/dist/mixins/sds-dialog-target-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-dialog-target-mixin.js","sourceRoot":"","sources":["../../src/mixins/sds-dialog-target-mixin.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Constructable } from './types';\n\nimport type { SDSDialog } from '../sds-dialog/sds-dialog';\n\ntype DialogCommand = 'close' | 'request-close' | 'show-modal';\n\nfunction isSDSDialog(node: Element | null): node is SDSDialog {\n\treturn node != null && 'showModal' in node && 'requestClose' in node && 'close' in node && 'open' in node;\n}\n\nexport interface SDSDialogTargetMixinInterface {\n\tcommand?: DialogCommand;\n\tcommandFor?: string;\n\treadonly effectiveCommand?: DialogCommand;\n\treadonly effectiveCommandFor?: string;\n\trunDialogCommand(): void;\n}\n\nexport function SDSDialogTargetMixin<T extends Constructable<LitElement>>(superClass: T): Constructable<SDSDialogTargetMixinInterface> & T {\n\tclass SDSDialogTarget extends superClass {\n\t\t@property({ type: String, attribute: 'command', reflect: true }) command?: DialogCommand;\n\t\t@property({ type: String, attribute: 'commandfor', reflect: true }) commandFor?: string;\n\t\t@property({ type: String, attribute: 'data-command' }) dataCommand?: DialogCommand;\n\t\t@property({ type: String, attribute: 'data-commandfor' }) dataCommandFor?: string;\n\n\t\tprivate _dialogElement?: SDSDialog;\n\t\tprivate _dialogOpenObserver?: MutationObserver;\n\n\t\tget effectiveCommand(): DialogCommand | undefined {\n\t\t\treturn this.command ?? this.dataCommand;\n\t\t}\n\n\t\tget effectiveCommandFor(): string | undefined {\n\t\t\treturn this.commandFor ?? this.dataCommandFor;\n\t\t}\n\n\t\toverride updated(changed: PropertyValues) {\n\t\t\tsuper.updated(changed);\n\n\t\t\tif (changed.has('command') || changed.has('commandFor') || changed.has('dataCommand') || changed.has('dataCommandFor')) {\n\t\t\t\tthis._updateCommandTarget();\n\t\t\t}\n\t\t}\n\n\t\toverride disconnectedCallback() {\n\t\t\tsuper.disconnectedCallback();\n\t\t\tthis._cleanupDialogObserver();\n\t\t}\n\n\t\tprivate _cleanupDialogObserver() {\n\t\t\tif (this._dialogOpenObserver) {\n\t\t\t\tthis._dialogOpenObserver.disconnect();\n\t\t\t\tthis._dialogOpenObserver = undefined;\n\t\t\t}\n\t\t\tthis._dialogElement = undefined;\n\t\t}\n\n\t\tprivate _observeDialog(button: HTMLButtonElement, dialog: SDSDialog) {\n\t\t\t// Observe the 'open' attribute to detect when the dialog opens\n\t\t\tthis._dialogOpenObserver = new MutationObserver((mutations) => {\n\t\t\t\tfor (const mutation of mutations) {\n\t\t\t\t\tif (mutation.attributeName === 'open') {\n\t\t\t\t\t\tconst isOpen = dialog.hasAttribute('open');\n\t\t\t\t\t\tbutton.setAttribute('aria-expanded', String(isOpen));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis._dialogOpenObserver.observe(dialog, { attributes: true, attributeFilter: ['open'] });\n\t\t}\n\n\t\tprivate _clearAriaFields(button: HTMLButtonElement) {\n\t\t\tbutton.removeAttribute('aria-haspopup');\n\t\t\tbutton.removeAttribute('aria-expanded');\n\t\t\tbutton.removeAttribute('aria-controls');\n\t\t}\n\n\t\tprivate _updateCommandTarget() {\n\t\t\tthis._cleanupDialogObserver();\n\n\t\t\tconst internalButton = this.shadowRoot?.querySelector<HTMLButtonElement>('#control');\n\t\t\tif (!internalButton) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst command = this.effectiveCommand;\n\t\t\tconst commandFor = this.effectiveCommandFor;\n\n\t\t\tif (!commandFor || !command) {\n\t\t\t\tthis._clearAriaFields(internalButton);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\tconst targetDialog = root.getElementById?.(commandFor) ?? document.getElementById(commandFor);\n\n\t\t\tif (!isSDSDialog(targetDialog)) {\n\t\t\t\tthis._clearAriaFields(internalButton);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis._dialogElement = targetDialog;\n\n\t\t\tif (command === 'show-modal') {\n\t\t\t\tinternalButton.setAttribute('aria-haspopup', 'dialog');\n\t\t\t\tinternalButton.setAttribute('aria-expanded', String(targetDialog.open));\n\t\t\t\tinternalButton.setAttribute('aria-controls', commandFor);\n\t\t\t\tthis._observeDialog(internalButton, targetDialog);\n\t\t\t} else {\n\t\t\t\tthis._clearAriaFields(internalButton);\n\t\t\t}\n\t\t}\n\n\t\trunDialogCommand(): void {\n\t\t\tif (!this._dialogElement) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tswitch (this.effectiveCommand) {\n\t\t\t\tcase 'show-modal':\n\t\t\t\t\tthis._dialogElement.showModal();\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'close':\n\t\t\t\t\tthis._dialogElement.close();\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'request-close':\n\t\t\t\t\tthis._dialogElement.requestClose();\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn SDSDialogTarget;\n}\n"]}
+{"version":3,"file":"sds-dialog-target-mixin.js","sourceRoot":"","sources":["../../src/mixins/sds-dialog-target-mixin.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Constructable } from './types';\n\nimport type { SDSDialog } from '../sds-dialog/sds-dialog';\n\ntype DialogCommand = 'close' | 'request-close' | 'show-modal';\n\nfunction isSDSDialog(node: Element | null): node is SDSDialog {\n\treturn node != null && 'showModal' in node && 'requestClose' in node && 'close' in node && 'open' in node;\n}\n\nexport interface SDSDialogTargetMixinInterface {\n\tcommand?: DialogCommand;\n\tcommandFor?: string;\n\treadonly effectiveCommand?: DialogCommand;\n\treadonly effectiveCommandFor?: string;\n\trunDialogCommand(): void;\n}\n\nexport function SDSDialogTargetMixin<T extends Constructable<LitElement>>(superClass: T): Constructable<SDSDialogTargetMixinInterface> & T {\n\tclass SDSDialogTarget extends superClass {\n\t\t@property({ type: String, attribute: 'command', reflect: true }) command?: DialogCommand;\n\t\t@property({ type: String, attribute: 'commandfor', reflect: true }) commandFor?: string;\n\t\t@property({ type: String, attribute: 'data-command' }) dataCommand?: DialogCommand;\n\t\t@property({ type: String, attribute: 'data-commandfor' }) dataCommandFor?: string;\n\n\t\tprivate _dialogElement?: SDSDialog;\n\t\tprivate _dialogOpenObserver?: MutationObserver;\n\n\t\tget effectiveCommand(): DialogCommand | undefined {\n\t\t\treturn this.command ?? this.dataCommand;\n\t\t}\n\n\t\tget effectiveCommandFor(): string | undefined {\n\t\t\treturn this.commandFor ?? this.dataCommandFor;\n\t\t}\n\n\t\toverride updated(changed: PropertyValues) {\n\t\t\tsuper.updated(changed);\n\n\t\t\tif (changed.has('command') || changed.has('commandFor') || changed.has('dataCommand') || changed.has('dataCommandFor')) {\n\t\t\t\tthis._updateCommandTarget();\n\t\t\t}\n\t\t}\n\n\t\toverride connectedCallback() {\n\t\t\tsuper.connectedCallback();\n\t\t\t// React moves keyed nodes by disconnect/reconnect without changing props, so updated() won't re-run.\n\t\t\tif (this.hasUpdated) {\n\t\t\t\tthis._updateCommandTarget();\n\t\t\t}\n\t\t}\n\n\t\toverride disconnectedCallback() {\n\t\t\tsuper.disconnectedCallback();\n\t\t\tthis._cleanupDialogObserver();\n\t\t}\n\n\t\tprivate _cleanupDialogObserver() {\n\t\t\tif (this._dialogOpenObserver) {\n\t\t\t\tthis._dialogOpenObserver.disconnect();\n\t\t\t\tthis._dialogOpenObserver = undefined;\n\t\t\t}\n\t\t\tthis._dialogElement = undefined;\n\t\t}\n\n\t\tprivate _observeDialog(button: HTMLButtonElement, dialog: SDSDialog) {\n\t\t\t// Observe the 'open' attribute to detect when the dialog opens\n\t\t\tthis._dialogOpenObserver = new MutationObserver((mutations) => {\n\t\t\t\tfor (const mutation of mutations) {\n\t\t\t\t\tif (mutation.attributeName === 'open') {\n\t\t\t\t\t\tconst isOpen = dialog.hasAttribute('open');\n\t\t\t\t\t\tbutton.setAttribute('aria-expanded', String(isOpen));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis._dialogOpenObserver.observe(dialog, { attributes: true, attributeFilter: ['open'] });\n\t\t}\n\n\t\tprivate _clearAriaFields(button: HTMLButtonElement) {\n\t\t\tbutton.removeAttribute('aria-haspopup');\n\t\t\tbutton.removeAttribute('aria-expanded');\n\t\t\tbutton.removeAttribute('aria-controls');\n\t\t}\n\n\t\tprivate _updateCommandTarget() {\n\t\t\tthis._cleanupDialogObserver();\n\n\t\t\tconst internalButton = this.shadowRoot?.querySelector<HTMLButtonElement>('#control');\n\t\t\tif (!internalButton) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst command = this.effectiveCommand;\n\t\t\tconst commandFor = this.effectiveCommandFor;\n\n\t\t\tif (!commandFor || !command) {\n\t\t\t\tthis._clearAriaFields(internalButton);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\tconst targetDialog = root.getElementById?.(commandFor) ?? document.getElementById(commandFor);\n\n\t\t\tif (!isSDSDialog(targetDialog)) {\n\t\t\t\tthis._clearAriaFields(internalButton);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis._dialogElement = targetDialog;\n\n\t\t\tif (command === 'show-modal') {\n\t\t\t\tinternalButton.setAttribute('aria-haspopup', 'dialog');\n\t\t\t\tinternalButton.setAttribute('aria-expanded', String(targetDialog.open));\n\t\t\t\tinternalButton.setAttribute('aria-controls', commandFor);\n\t\t\t\tthis._observeDialog(internalButton, targetDialog);\n\t\t\t} else {\n\t\t\t\tthis._clearAriaFields(internalButton);\n\t\t\t}\n\t\t}\n\n\t\trunDialogCommand(): void {\n\t\t\tif (!this._dialogElement?.isConnected) {\n\t\t\t\tthis._updateCommandTarget();\n\t\t\t}\n\n\t\t\tif (!this._dialogElement) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tswitch (this.effectiveCommand) {\n\t\t\t\tcase 'show-modal':\n\t\t\t\t\tthis._dialogElement.showModal();\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'close':\n\t\t\t\t\tthis._dialogElement.close();\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'request-close':\n\t\t\t\t\tthis._dialogElement.requestClose();\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn SDSDialogTarget;\n}\n"]}

package/dist/sds-alert/sds-alert.component.js

@@ -27,8 +27,8 @@ export class SDSAlertComponent extends SDSEventDispatcherMixin(SDSElement) {
         this._remove = () => {
             this.dispatchSheriffEvent('sds-remove');
         };
-        this._renderIcon = (iconName, size, cls) => {
-            return staticHtml `<${this.iconTag} ${cls ? `class=${cls}` : ''} name="${iconName}" size=${size}></${this.iconTag}>`;
+        this._renderIcon = (iconName, size) => {
+            return staticHtml `<${this.iconTag} name="${iconName}" size=${size}></${this.iconTag}>`;
         };
         this._renderRemoveButton = (ariaLabel) => {
             return staticHtml `<${this.buttonTag}
@@ -47,7 +47,7 @@ export class SDSAlertComponent extends SDSEventDispatcherMixin(SDSElement) {
         const iconSize = this.variant === 'primary' ? 'md' : this.size ?? 'md';
         const iconName = alertIcons[this.palette] ?? alertIcons['info'];
         return html `<div class="sds-alert">
-			<div class="sds-alert__type">${this._renderIcon(iconName, iconSize, 'sds-alert__icon')}</div>
+			<div class="sds-alert__type">${this._renderIcon(iconName, iconSize)}</div>
 			<div class="sds-alert__content">
 				<slot name="title"></slot>
 				<slot name="message"></slot>

package/dist/sds-alert/sds-alert.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-alert.component.js","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { SDSElement } from '../utils/sds-element';\nimport { property } from 'lit/decorators.js';\nimport { html as staticHtml, literal } from 'lit/static-html.js';\nimport type { StaticValue } from 'lit-html/static.js';\nimport { styles } from './sds-alert.styles';\nimport { SDS_VARIANTS, SDS_SIZES } from '../types';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\ntype ColorPalette = 'info' | 'success' | 'attention' | 'danger';\ntype Variants = Extract<SDS_VARIANTS, 'primary' | 'secondary'>;\ntype AlertSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nconst alertIcons: Record<ColorPalette, string> = {\n\tinfo: 'InformationSquareFill-aksel-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'warning-material-filled',\n\tdanger: 'dangerous-material-filled',\n};\n\nexport interface SDSAlertProps {\n\tvariant?: Variants;\n\tsize?: AlertSize;\n\t'removable-label'?: string;\n}\n\nexport class SDSAlertComponent extends SDSEventDispatcherMixin(SDSElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) variant: Variants = 'primary';\n\t@property({ type: String, reflect: true }) size: AlertSize = 'md';\n\t@property({ type: String, attribute: 'removable-label', reflect: true }) removableLabel?: string;\n\t@property({ type: String, attribute: 'data-palette', reflect: true }) palette: ColorPalette = 'info';\n\n\tprotected iconTag: StaticValue = literal`sds-icon`;\n\tprotected buttonTag: StaticValue = literal`sds-button`;\n\n\tprivate readonly _remove = () => {\n\t\tthis.dispatchSheriffEvent('sds-remove');\n\t};\n\n\tprivate readonly _renderIcon = (iconName: string, size: string, cls?: string) => {\n\t\treturn staticHtml`<${this.iconTag} ${cls ? `class=${cls}` : ''} name=\"${iconName}\" size=${size}></${this.iconTag}>`;\n\t};\n\n\tprivate readonly _renderRemoveButton = (ariaLabel: string) => {\n\t\treturn staticHtml`<${this.buttonTag}\n\t\tclass=\"sds-alert__remove-btn\"\n\t\tvariant=\"tertiary\"\n\t\tsize=\"sm\"\n\t\t?icon=${true}\n\t\tlabel=${ariaLabel}\n\t\t@click=${this._remove}\n\t\t>\n\t\t${this._renderIcon('close-material-outlined', 'sm')}\n\t\t</${this.buttonTag}>`;\n\t};\n\n\toverride render() {\n\t\tconst iconSize = this.variant === 'primary' ? 'md' : this.size ?? 'md';\n\t\tconst iconName = alertIcons[this.palette] ?? alertIcons['info'];\n\n\t\treturn html`<div class=\"sds-alert\">\n\t\t\t<div class=\"sds-alert__type\">${this._renderIcon(iconName, iconSize, 'sds-alert__icon')}</div>\n\t\t\t<div class=\"sds-alert__content\">\n\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t<slot name=\"message\"></slot>\n\t\t\t</div>\n\t\t\t${this.removableLabel && this.variant === 'primary' ? html`<div class=\"sds-alert__actions\">${this._renderRemoveButton(this.removableLabel)}</div>` : nothing}\n\t\t</div>`;\n\t}\n}\n"]}
+{"version":3,"file":"sds-alert.component.js","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAM/E,MAAM,UAAU,GAAiC;IAChD,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,yBAAyB;IACpC,MAAM,EAAE,2BAA2B;CACnC,CAAC;AAQF,MAAM,OAAO,iBAAkB,SAAQ,uBAAuB,CAAC,UAAU,CAAC;IAA1E;;QAG4C,YAAO,GAAa,SAAS,CAAC;QAC9B,SAAI,GAAc,IAAI,CAAC;QAEI,YAAO,GAAiB,MAAM,CAAC;QAE3F,YAAO,GAAgB,OAAO,CAAA,UAAU,CAAC;QACzC,cAAS,GAAgB,OAAO,CAAA,YAAY,CAAC;QAEtC,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACzC,CAAC,CAAC;QAEe,gBAAW,GAAG,CAAC,QAAgB,EAAE,IAAY,EAAE,EAAE;YACjE,OAAO,UAAU,CAAA,IAAI,IAAI,CAAC,OAAO,UAAU,QAAQ,UAAU,IAAI,MAAM,IAAI,CAAC,OAAO,GAAG,CAAC;QACxF,CAAC,CAAC;QAEe,wBAAmB,GAAG,CAAC,SAAiB,EAAE,EAAE;YAC5D,OAAO,UAAU,CAAA,IAAI,IAAI,CAAC,SAAS;;;;UAI3B,IAAI;UACJ,SAAS;WACR,IAAI,CAAC,OAAO;;IAEnB,IAAI,CAAC,WAAW,CAAC,yBAAyB,EAAE,IAAI,CAAC;MAC/C,IAAI,CAAC,SAAS,GAAG,CAAC;QACvB,CAAC,CAAC;IAeH,CAAC;IAbS,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC;QACvE,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC;QAEhE,OAAO,IAAI,CAAA;kCACqB,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC;;;;;KAKjE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;SACtJ,CAAC;IACT,CAAC;;AA3Ce,wBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAA+B;AAC9B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAwB;AACO;IAAxE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAyB;AAC3B;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAgC","sourcesContent":["import { html, nothing } from 'lit';\nimport { SDSElement } from '../utils/sds-element';\nimport { property } from 'lit/decorators.js';\nimport { html as staticHtml, literal } from 'lit/static-html.js';\nimport type { StaticValue } from 'lit-html/static.js';\nimport { styles } from './sds-alert.styles';\nimport { SDS_VARIANTS, SDS_SIZES } from '../types';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\ntype ColorPalette = 'info' | 'success' | 'attention' | 'danger';\ntype Variants = Extract<SDS_VARIANTS, 'primary' | 'secondary'>;\ntype AlertSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nconst alertIcons: Record<ColorPalette, string> = {\n\tinfo: 'InformationSquareFill-aksel-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'warning-material-filled',\n\tdanger: 'dangerous-material-filled',\n};\n\nexport interface SDSAlertProps {\n\tvariant?: Variants;\n\tsize?: AlertSize;\n\t'removable-label'?: string;\n}\n\nexport class SDSAlertComponent extends SDSEventDispatcherMixin(SDSElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) variant: Variants = 'primary';\n\t@property({ type: String, reflect: true }) size: AlertSize = 'md';\n\t@property({ type: String, attribute: 'removable-label', reflect: true }) removableLabel?: string;\n\t@property({ type: String, attribute: 'data-palette', reflect: true }) palette: ColorPalette = 'info';\n\n\tprotected iconTag: StaticValue = literal`sds-icon`;\n\tprotected buttonTag: StaticValue = literal`sds-button`;\n\n\tprivate readonly _remove = () => {\n\t\tthis.dispatchSheriffEvent('sds-remove');\n\t};\n\n\tprivate readonly _renderIcon = (iconName: string, size: string) => {\n\t\treturn staticHtml`<${this.iconTag} name=\"${iconName}\" size=${size}></${this.iconTag}>`;\n\t};\n\n\tprivate readonly _renderRemoveButton = (ariaLabel: string) => {\n\t\treturn staticHtml`<${this.buttonTag}\n\t\tclass=\"sds-alert__remove-btn\"\n\t\tvariant=\"tertiary\"\n\t\tsize=\"sm\"\n\t\t?icon=${true}\n\t\tlabel=${ariaLabel}\n\t\t@click=${this._remove}\n\t\t>\n\t\t${this._renderIcon('close-material-outlined', 'sm')}\n\t\t</${this.buttonTag}>`;\n\t};\n\n\toverride render() {\n\t\tconst iconSize = this.variant === 'primary' ? 'md' : this.size ?? 'md';\n\t\tconst iconName = alertIcons[this.palette] ?? alertIcons['info'];\n\n\t\treturn html`<div class=\"sds-alert\">\n\t\t\t<div class=\"sds-alert__type\">${this._renderIcon(iconName, iconSize)}</div>\n\t\t\t<div class=\"sds-alert__content\">\n\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t<slot name=\"message\"></slot>\n\t\t\t</div>\n\t\t\t${this.removableLabel && this.variant === 'primary' ? html`<div class=\"sds-alert__actions\">${this._renderRemoveButton(this.removableLabel)}</div>` : nothing}\n\t\t</div>`;\n\t}\n}\n"]}

package/dist/sds-alert/sds-alert.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-alert.styles.d.ts","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAsLlB,CAAC"}
+{"version":3,"file":"sds-alert.styles.d.ts","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgLlB,CAAC"}

package/dist/sds-alert/sds-alert.styles.js

@@ -90,12 +90,6 @@ export const styles = css `
 		--sds-button-text-color: var(--_sds-alert-text-color);
 	}
 
-	.sds-alert__icon {
-		display: block;
-		position: relative;
-		z-index: 1;
-	}
-
 	:host([variant='secondary']) {
 		--_sds-alert-background-color: var(--sds-alert-background-color, transparent);
 		--_sds-alert-border-color: var(--sds-alert-border-color, transparent);