@skf-design-system/ui-components 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/components/loader/loader.component.js

@@ -1,45 +1,71 @@
-var m = (t) => {
-  throw TypeError(t);
-};
-var f = (t, r, e) => r.has(t) || m("Cannot " + e);
-var p = (t, r, e) => (f(t, r, "read from private field"), e ? e.call(t) : r.get(t)), h = (t, r, e) => r.has(t) ? m("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, e), y = (t, r, e, l) => (f(t, r, "write to private field"), l ? l.call(t, e) : r.set(t, e), e);
 import { SkfElement as u } from "../../internal/components/skf-element.js";
-import b from "../../styles/component.styles.js";
-import { html as g } from "lit";
-import { property as n } from "lit/decorators.js";
-import _ from "./loader.styles.js";
-var x = Object.defineProperty, c = (t, r, e, l) => {
-  for (var i = void 0, a = t.length - 1, d; a >= 0; a--)
-    (d = t[a]) && (i = d(r, e, i) || i);
-  return i && x(r, e, i), i;
-}, s;
-const v = class v extends u {
+import { COLORS as c } from "@skf-design-system/ui-assets";
+import m from "../../styles/component.styles.js";
+import { svg as d, html as h } from "lit";
+import { property as a } from "lit/decorators.js";
+import v from "./loader.styles.js";
+var f = Object.defineProperty, o = (l, t, i, g) => {
+  for (var e = void 0, s = l.length - 1, p; s >= 0; s--)
+    (p = l[s]) && (e = p(t, i, e) || e);
+  return e && f(t, i, e), e;
+};
+const n = class n extends u {
   constructor() {
-    super();
-    h(this, s);
-    this.ariaLabel = "Loading...", this.size = "md", y(this, s, this.attachInternals()), p(this, s).role = "progressbar", p(this, s).ariaLive = "polite";
+    super(...arguments), this.ariaLabel = "Loading...", this.invert = !1, this.size = "md";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "progressbar"), this.setAttribute("aria-live", "polite");
+  }
+  /** @internal */
+  getCircle(t, i) {
+    return d`
+			<circle
+				cx=${t}
+				cy="26"
+				fill=${this.invert ? c.neutralWhite : c.brandBase}
+				key=${t}
+				r="6"
+				stroke="none"
+			>
+				<animate
+					attributeName="opacity"
+					begin=${i}
+					dur="1s"
+					repeatCount="indefinite"
+					values="0;1;0"
+				/>
+			</circle>
+		`;
   }
   render() {
-    return g`
-			<div id="root">
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
+    return h`
+			<div aria-hidden="true" id="loader">
+				<svg
+					enableBackground="new 0 0 0 0"
+					height="100%"
+					version="1.1"
+					viewBox="0 0 52 52"
+					width="100%"
+					x="0px"
+					y="0px"
+				>
+					${[this.getCircle(6, 0.1), this.getCircle(26, 0.2), this.getCircle(46, 0.3)]}
+				</svg>
 			</div>
 		`;
   }
 };
-s = new WeakMap(), v.styles = [b, _];
-let o = v;
-c([
-  n({ reflect: !0, attribute: "aria-label" })
-], o.prototype, "ariaLabel");
-c([
-  n({ type: Boolean })
-], o.prototype, "invert");
-c([
-  n({ type: String, reflect: !0 })
-], o.prototype, "size");
+n.styles = [m, v];
+let r = n;
+o([
+  a({ type: String, reflect: !0, attribute: "aria-label" })
+], r.prototype, "ariaLabel");
+o([
+  a({ type: Boolean })
+], r.prototype, "invert");
+o([
+  a({ type: String, reflect: !0 })
+], r.prototype, "size");
 export {
-  o as SkfLoader
+  r as SkfLoader
 };

package/dist/components/loader/loader.styles.js

@@ -1,50 +1,18 @@
 import { css as s } from "lit";
-const e = s`
-	@layer components {
-		:host {
-			display: inline-flex;
-		}
-
-		#root {
-			display: flex;
-			gap: var(--_skf-loader-gap, var(--skf-spacing-50));
-
-			:host([size='sm']) & {
-				--_skf-loader-gap: var(--skf-spacing-25);
-			}
-		}
-
-		.circle {
-			animation: skf-loader 0.5s infinite ease-in alternate;
-			aspect-ratio: 1;
-			background-color: var(--_skf-loader-color, var(--skf-bg-color-emphasised));
-			border-radius: 50%;
-			inline-size: var(--_skf-loader-size, var(--skf-size-12));
-
-			&:nth-child(2) {
-				animation-delay: 0.1s;
-			}
-
-			&:nth-child(3) {
-				animation-delay: 0.2s;
-			}
-
-			:host([invert]) & {
-				--_skf-loader-color: var(--skf-bg-color-neutral-1);
-			}
+const a = s`
+	:host {
+		display: inline-flex;
+	}
 
-			:host([size='sm']) & {
-				--_skf-loader-size: var(--skf-size-4);
-			}
-		}
+	#loader {
+		aspect-ratio: 1;
+		block-size: var(--_skf-loader-size, var(--skf-size-48));
 
-		@keyframes skf-loader {
-			to {
-				opacity: 0;
-			}
+		:host([size='sm']) & {
+			--_skf-loader-size: var(--skf-size-24);
 		}
 	}
 `;
 export {
-  e as default
+  a as default
 };

package/dist/components/logo/logo.component.d.ts

@@ -10,12 +10,10 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfLogo extends SkfElement {
     static styles: CSSResultGroup;
-    /** Defines the title of the logo */
+    /** The title of the logo */
     title: string;
-    /**
-     * If defined, sets color of the logo
-     * @type { "primary" | "secondary" | "inverse" }
-     */
+    /** If provided, sets color of the logo */
+    /** @type { "primary" | "secondary" | "inverse" } */
     color?: Logo;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/logo/logo.component.js

@@ -1,12 +1,12 @@
 import { SkfElement as i } from "../../internal/components/skf-element.js";
 import m from "../../styles/component.styles.js";
 import { html as n } from "lit";
-import { property as l } from "lit/decorators.js";
+import { property as v } from "lit/decorators.js";
 import a from "./logo.styles.js";
-var d = Object.defineProperty, s = (h, o, p, f) => {
-  for (var c = void 0, r = h.length - 1, v; r >= 0; r--)
-    (v = h[r]) && (c = v(o, p, c) || c);
-  return c && d(o, p, c), c;
+var d = Object.defineProperty, s = (h, o, l, f) => {
+  for (var c = void 0, r = h.length - 1, p; r >= 0; r--)
+    (p = h[r]) && (c = p(o, l, c) || c);
+  return c && d(o, l, c), c;
 };
 const e = class e extends i {
   constructor() {
@@ -14,7 +14,7 @@ const e = class e extends i {
   }
   render() {
     return n`
-			<svg id="root" viewBox="0 0 1300 300" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
+			<svg id="logo" viewBox="0 0 1300 300" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
 				<title>${this.title}</title>
 				<g>
 					<g>
@@ -58,10 +58,10 @@ c0,5.8-4.3,6.1-9.1,6.1H1230.9z"
 e.styles = [m, a];
 let t = e;
 s([
-  l()
+  v()
 ], t.prototype, "title");
 s([
-  l()
+  v()
 ], t.prototype, "color");
 export {
   t as SkfLogo

package/dist/components/logo/logo.styles.js

@@ -1,10 +1,10 @@
 import { css as o } from "lit";
 const r = o`
 	:host {
-		display: inline-flex;
+		display: contents;
 	}
 
-	#root {
+	#logo {
 		aspect-ratio: 13 / 3;
 		block-size: var(--skf-logo-height, var(--skf-size-32));
 		fill: var(--_skf-logo-color, var(--skf-logo-primary));

package/dist/components/radio/radio.component.d.ts

@@ -5,42 +5,40 @@ import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-radio>` component is used to create a radio input
  *
- * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
  *
  * @attribute {boolean} disabled - If true, sets disabled state
  * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
  *
  * @event change {object} - When the value of the input changes
  *
- * @slot - The radios label. Alternatively, you can use the `label` attribute.
+ * @slot Default -  Alternatively, you can use the `label` attribute
  *
  * @tagname skf-radio
  */
 export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
+    /** @internal */
     private _initialChecked;
-    /** If true, outputs helping hints in console */
-    debug?: boolean;
+    /** If provided, outputs helping hints in console */
+    debug?: boolean | undefined;
     /** If true, outputs helping hints in console */
     checked?: boolean;
     /** If true, forces component to invalid state until removed */
     customInvalid?: boolean;
     /** If true, hides the label visually */
-    hideLabel?: boolean;
-    /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
+    hideLabel: boolean;
+    /** The input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
-    /** If defined, adds name to the input-element */
+    /** If provided, adds name to the input-element */
     name?: string;
-    /** If defined, renders an alternative A11y text for the asterisk */
+    /** If provided, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
-    /** Size of the Radio */
-    size: 'sm' | 'md';
-    /**
-     * If defined, displays provided severity state
-     * @type {"success" | "info" | "warning" | "alert"}
-     */
+    /** If provided, displays an alternative size */
+    size?: 'sm' | 'md';
+    /** If provided, displays provided severity state */
     severity?: FormFieldBaseProps['severity'];
-    /** If true, displays valid state after interaction */
+    /** If provided, displays valid state after interaction */
     showValid?: boolean;
     /** The current value of the input field  */
     value: string;

package/dist/components/radio/radio.component.js

@@ -14,7 +14,7 @@ var k = Object.defineProperty, i = (n, t, r, l) => {
 };
 const d = class d extends u {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
+    super(...arguments), this._initialChecked = !1, this.debug = !1, this.hideLabel = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
       t.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
     };
   }
@@ -70,7 +70,7 @@ const d = class d extends u {
   }
   render() {
     return m`
-			<label id="root">
+			<label id="radio">
 				<input
 					?disabled=${this.disabled}
 					?required=${this.required}
@@ -115,7 +115,7 @@ i([
   a({ reflect: !0 })
 ], e.prototype, "size");
 i([
-  a()
+  a({ reflect: !0 })
 ], e.prototype, "severity");
 i([
   a({ type: Boolean, attribute: "show-valid" })

package/dist/components/radio/radio.styles.js

@@ -1,6 +1,6 @@
 import { visuallyHidden as r } from "../../styles/util.styles.js";
 import { css as o } from "lit";
-const i = [
+const e = [
   r,
   o`
 		@layer components {
@@ -8,7 +8,7 @@ const i = [
 				contain: initial;
 			}
 
-			#root {
+			#radio {
 				align-items: center;
 				display: flex;
 				grid-gap: var(--skf-spacing-50);
@@ -94,5 +94,5 @@ const i = [
 	`
 ];
 export {
-  i as default
+  e as default
 };

package/dist/components/select/select.component.d.ts

@@ -15,9 +15,10 @@ import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationC
  *
  * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
  *
- * @attribute {boolean} [disabled] - If true, the select is disabled	`default: false`
+ * @attribute {Boolean} [disabled] - If true, the select is disabled	`default: false`
  *
  * @slot - The select's placeholder content
+ * @slot icon - The select's slot for custom meta information
  *
  * @event change - Fired when the selected option(s) changes
  * @event invalid - Fired when the select is invalid
@@ -47,28 +48,28 @@ export declare class SkfSelect extends FormBase {
     get getSelectedValues(): string[];
     /** A readonly property that returns the selected slot(s) text content in a array */
     get getSelectedOptionsText(): (string | null)[];
-    /** If defined, displays provided label */
-    label?: string;
+    /** Sets the visible label of the select in the form */
+    label: string;
     /** If defined, limits the number of selectable options */
     max?: number;
     /** If defined, sets the minimum number of required options */
     min?: number;
-    /** If true, allows for multiple options to be selected */
+    /** If provided, allows for multiple options to be selected */
     multiple?: boolean;
-    /** If defined, set name of the component */
+    /** If provided, set name of the component */
     name?: string;
     /** If defined, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
     /** If defined, displays provided severity state */
     severity?: FormFieldBaseProps['severity'];
-    /** If true, displays valid state after interaction */
+    /** If provided, displays valid state after interaction */
     showValid?: boolean;
     /** Size of the Select */
     size: 'sm' | 'md';
     /** Read only, returns the selected value. (if multiple: in a comma separated string) */
     get value(): string;
-    /** Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
     /** @internal */
+    /** Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
     private _selectedOptions;
     /** @internal */
     /** The selected options in an array. Treat it as a read only property. See selectedValues, slectedSlots for computed value arrays. */

package/dist/components/select/select.component.js

@@ -1,4 +1,4 @@
-import { computePosition as f, flip as v, shift as _, offset as g } from "@floating-ui/dom";
+import { computePosition as f, flip as _, shift as v, offset as g } from "@floating-ui/dom";
 import { FormBase as b } from "../../internal/components/formBase.js";
 import { findMatchingTags as y } from "../../internal/helpers/findMatchingTags.js";
 import { hintSeverity as O } from "../../internal/helpers/hintSeverity.js";
@@ -14,13 +14,13 @@ import "../tag/tag.js";
 import { ScrollController as C, ResizeController as A, GlobalClickController as E, KeyboardNavigationController as k, DeveloperFeedbackController as L } from "./select.controllers.js";
 import { styles as P } from "./select.styles.js";
 var D = Object.defineProperty, M = Object.getOwnPropertyDescriptor, l = (u, t, e, s) => {
-  for (var o = s > 1 ? void 0 : s ? M(t, e) : t, n = u.length - 1, a; n >= 0; n--)
-    (a = u[n]) && (o = (s ? a(t, e, o) : a(o)) || o);
+  for (var o = s > 1 ? void 0 : s ? M(t, e) : t, a = u.length - 1, n; a >= 0; a--)
+    (n = u[a]) && (o = (s ? n(t, e, o) : n(o)) || o);
   return s && o && D(t, e, o), o;
 };
 const c = class c extends b {
   constructor() {
-    super(), this.selectDelay = 200, this._optionsList = [], this.buttonLabel = "Select an option", this.size = "md", this._expanded = !1, this._invalid = !1, this.scrollController = new C(this), this.resizeController = new A(this), this.globalClickController = new E(this), this.keyboardNavController = new k(this), this.developerFeedbackController = new L(this), this._handleOptionSelected = (t) => {
+    super(), this.selectDelay = 50, this._optionsList = [], this.buttonLabel = "Select an option", this.label = "Default label", this.size = "md", this._expanded = !1, this._invalid = !1, this.scrollController = new C(this), this.resizeController = new A(this), this.globalClickController = new E(this), this.keyboardNavController = new k(this), this.developerFeedbackController = new L(this), this._handleOptionSelected = (t) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
       this.setFormValue(e ? this.getSelectedValues.join(",") : null), this._updateState(t);
@@ -38,14 +38,14 @@ const c = class c extends b {
       const s = this.$selectBtn, o = this.$dropdown;
       !s || !o || (o.showPopover(), f(s, o, {
         placement: "bottom",
-        middleware: [v(), _({ padding: 5 }), g(2)]
-      }).then(({ x: n, y: a }) => {
+        middleware: [_(), v({ padding: 5 }), g(2)]
+      }).then(({ x: a, y: n }) => {
         Object.assign(o.style, {
-          left: `${String(n)}px`,
-          top: `${String(Math.round(a - window.scrollY))}px`
+          left: `${String(a)}px`,
+          top: `${String(Math.round(n - window.scrollY))}px`
         });
-      }).catch((n) => {
-        console.error(n);
+      }).catch((a) => {
+        console.error(a);
       }));
     } }), this._handleDropdownToggle = (t) => {
       t.stopPropagation(), this._expanded = !this._expanded;
@@ -126,8 +126,8 @@ const c = class c extends b {
   attributeChangedCallback(t, e, s) {
     if (super.attributeChangedCallback(t, e, s), t === "custom-invalid")
       if (typeof s == "string") {
-        const n = String(s).trim() || "Custom error";
-        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, n), this.checkValidity();
+        const a = String(s).trim() || "Custom error";
+        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, a), this.checkValidity();
       } else
         this.setValidity({}), this._validateInput();
   }
@@ -168,20 +168,20 @@ const c = class c extends b {
       this._invalid = !0;
       return;
     } else if (t) {
-      const n = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : "Please select an option";
-      this.setValidity({ valueMissing: !0 }, String(n)), this._pristine || (this._invalid = !0);
+      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : "Please select an option";
+      this.setValidity({ valueMissing: !0 }, String(a)), this._pristine || (this._invalid = !0);
     } else if (e) {
-      const n = this.hasAttribute("data-rangeunderflow") ? this.getAttribute("data-rangeunderflow") : `Please select minimum ${String(this.min)} options`;
-      this.setValidity({ rangeUnderflow: !0 }, String(n)), this._pristine || (this._invalid = !0);
+      const a = this.hasAttribute("data-rangeunderflow") ? this.getAttribute("data-rangeunderflow") : `Please select minimum ${String(this.min)} options`;
+      this.setValidity({ rangeUnderflow: !0 }, String(a)), this._pristine || (this._invalid = !0);
     } else if (s) {
-      const n = this.hasAttribute("data-rangeoverflow") ? this.getAttribute("data-rangeoverflow") : `Please select maximum ${String(this.max)} options`;
-      this.setValidity({ rangeOverflow: !0 }, String(n)), this._pristine || (this._invalid = !0);
+      const a = this.hasAttribute("data-rangeoverflow") ? this.getAttribute("data-rangeoverflow") : `Please select maximum ${String(this.max)} options`;
+      this.setValidity({ rangeOverflow: !0 }, String(a)), this._pristine || (this._invalid = !0);
     } else
       this.setValidity({}), !this._pristine && this.showValid && this.setAttribute("valid", "true");
   }
   render() {
     return h`
-			<div id="root">
+			<div id="select">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
 						${this.label}
@@ -227,7 +227,7 @@ const c = class c extends b {
 							id="hint"
 							severity=${m(O(this.severity, this._invalid))}
 						>
-							${this.customInvalid ? this.customInvalid : this.hint}
+							${this.hint}
 						</skf-hint>
 					`}
 				</div>

package/dist/components/select/select.styles.js

@@ -1,14 +1,14 @@
 import { visuallyHidden as r } from "../../styles/util.styles.js";
-import { css as o } from "lit";
+import { css as e } from "lit";
 const t = [
   r,
-  o`
+  e`
 		@layer components {
 			:host {
 				contain: initial;
 			}
 
-			#root {
+			#select {
 				color: var(--_skf-select-color, var(--skf-text-color-primary));
 				display: flex;
 				flex-direction: column;

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

@@ -9,12 +9,13 @@ import { type CSSResultGroup } from 'lit';
  * @attribute {boolean} disabled - If true, sets disabled state
  * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
  *
- * @slot - The Switchs label. Alternatively, you can use the `label` attribute.
+ * @slot - The component's placeholder content
  *
  * @tagname skf-switch
  */
 export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
+    /** @internal */
     private _initialChecked;
     /** If true, outputs helping hints in console */
     debug?: boolean;
@@ -22,7 +23,7 @@ export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
     checked?: boolean;
     /** If true, hides the label visually */
     hideLabel?: boolean;
-    /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
+    /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, adds name to the input-element */
     name?: string;

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

@@ -48,7 +48,7 @@ const h = class h extends o {
   }
   render() {
     return c`
-			<label id="root">
+			<label id="switch">
 				<input
 					?checked=${this.checked}
 					?disabled=${this.disabled}

package/dist/components/switch/switch.styles.js

@@ -8,7 +8,7 @@ const t = [
 				contain: layout;
 			}
 
-			#root {
+			label {
 				align-items: center;
 				display: flex;
 				grid-gap: var(--skf-spacing-50);

package/dist/components/tag/tag.component.d.ts

@@ -13,29 +13,24 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfTag extends SkfElement {
     static styles: CSSResultGroup;
+    /** @internal */
     private _onClick?;
+    /** @internal */
     protected _onRemove?: (event: Event) => void;
-    /** Specifies Tag size */
+    /** Specifies Tag size - @default "md" */
     size: 'sm' | 'md' | 'lg';
-    /**
-     * If defined, displays leading/provided icon
-     * @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" }
-     */
+    /** If defined, displays leading/provided icon - @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" } */
     icon?: Icon;
-    /**
-     * If defined, gives the supplied appearance
-     * @type {  "warning" | "success" | "info" | "error" | "alert" }
-     */
+    /** If defined, gives the supplied appearance - @type {  "warning" | "success" | "info" | "error" | "alert" } */
     color?: SeverityBgColor;
-    /** If defined, accepts a function that runs on click */
+    /** If provided, accepts a function that runs on click. */
     set onClick(onClickFn: ((event: Event) => void) | undefined);
     get onClick(): ((event: Event) => void) | undefined;
-    /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
+    /** If provided, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
     set onRemove(onRemoveFn: ((event: Event) => void) | undefined);
     get onRemove(): ((event: Event) => void) | undefined;
     /** If true, adds trailing button to remove tag */
     removable?: boolean;
-    /** @internal */
     $removeButton: HTMLButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;