@phcdevworks/spectre-components 1.20.0 → 1.21.0

package/dist/alert.d.cts

@@ -1,15 +1,18 @@
-import { S as SpectreInputSize, a as SpectreAlertVariant } from './form-DpPtizpY.cjs';
-export { D as spectreAlertSizes, E as spectreAlertVariants } from './form-DpPtizpY.cjs';
+import { S as SpectreInputSize, a as SpectreAlertVariant } from './form-CVO7mlDa.cjs';
+export { Q as spectreAlertSizes, R as spectreAlertVariants } from './form-CVO7mlDa.cjs';
 import * as lit_html from 'lit-html';
-import { S as SpectreProjectableElement } from './projectable-DLOn6eaW.cjs';
-import './base-D0s95V2v.cjs';
+import { S as SpectreBaseElement } from './base-D0s95V2v.cjs';
+import { a as SpectreInteractionStateProps } from './states-Bgzwu_XZ.cjs';
 import 'lit';
 
-interface SpectreAlertProps {
+interface SpectreAlertProps extends SpectreInteractionStateProps {
+    interactive?: boolean | undefined;
     ariaLabel?: string | null;
     ariaLabelledBy?: string | null;
     ariaDescribedBy?: string | null;
+    dismissLabel?: string | undefined;
     dismissed?: boolean | undefined;
+    dismissible?: boolean | undefined;
     disabled?: boolean | undefined;
     fullWidth?: boolean | undefined;
     id?: string | null | undefined;
@@ -18,12 +21,20 @@ interface SpectreAlertProps {
     title?: string | null | undefined;
     variant?: SpectreAlertVariant | undefined;
 }
-declare class SpectreAlertElement extends SpectreProjectableElement implements SpectreAlertProps {
+declare class SpectreAlertElement extends SpectreBaseElement implements SpectreAlertProps {
     static properties: {
+        dismissLabel: {
+            attribute: string;
+            type: StringConstructor;
+        };
         dismissed: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        dismissible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         disabled: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -45,8 +56,30 @@ declare class SpectreAlertElement extends SpectreProjectableElement implements S
             type: StringConstructor;
             reflect: boolean;
         };
+        active: {
+            readonly type: BooleanConstructor;
+            readonly reflect: true;
+        };
+        focused: {
+            readonly type: BooleanConstructor;
+            readonly reflect: true;
+        };
+        hovered: {
+            readonly type: BooleanConstructor;
+            readonly reflect: true;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
     };
+    interactive: boolean | undefined;
+    active: boolean | undefined;
+    focused: boolean | undefined;
+    hovered: boolean | undefined;
+    dismissLabel: string | undefined;
     dismissed: boolean | undefined;
+    dismissible: boolean | undefined;
     disabled: boolean | undefined;
     fullWidth: boolean | undefined;
     loading: boolean | undefined;
@@ -56,9 +89,9 @@ declare class SpectreAlertElement extends SpectreProjectableElement implements S
     set id(value: string | null | undefined);
     get title(): string;
     set title(value: string | null | undefined);
-    protected getContentContainer(): Element | null;
-    protected isInternalNode(node: Node): boolean;
+    private readonly projection;
     protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
+    private dismiss;
     private get alertClasses();
     render(): lit_html.TemplateResult<1>;
 }

package/dist/alert.d.ts

@@ -1,15 +1,18 @@
-import { S as SpectreInputSize, a as SpectreAlertVariant } from './form-DpPtizpY.js';
-export { D as spectreAlertSizes, E as spectreAlertVariants } from './form-DpPtizpY.js';
+import { S as SpectreInputSize, a as SpectreAlertVariant } from './form-CVO7mlDa.js';
+export { Q as spectreAlertSizes, R as spectreAlertVariants } from './form-CVO7mlDa.js';
 import * as lit_html from 'lit-html';
-import { S as SpectreProjectableElement } from './projectable-D9YCo9NY.js';
-import './base-D0s95V2v.js';
+import { S as SpectreBaseElement } from './base-D0s95V2v.js';
+import { a as SpectreInteractionStateProps } from './states-Bgzwu_XZ.js';
 import 'lit';
 
-interface SpectreAlertProps {
+interface SpectreAlertProps extends SpectreInteractionStateProps {
+    interactive?: boolean | undefined;
     ariaLabel?: string | null;
     ariaLabelledBy?: string | null;
     ariaDescribedBy?: string | null;
+    dismissLabel?: string | undefined;
     dismissed?: boolean | undefined;
+    dismissible?: boolean | undefined;
     disabled?: boolean | undefined;
     fullWidth?: boolean | undefined;
     id?: string | null | undefined;
@@ -18,12 +21,20 @@ interface SpectreAlertProps {
     title?: string | null | undefined;
     variant?: SpectreAlertVariant | undefined;
 }
-declare class SpectreAlertElement extends SpectreProjectableElement implements SpectreAlertProps {
+declare class SpectreAlertElement extends SpectreBaseElement implements SpectreAlertProps {
     static properties: {
+        dismissLabel: {
+            attribute: string;
+            type: StringConstructor;
+        };
         dismissed: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        dismissible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         disabled: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -45,8 +56,30 @@ declare class SpectreAlertElement extends SpectreProjectableElement implements S
             type: StringConstructor;
             reflect: boolean;
         };
+        active: {
+            readonly type: BooleanConstructor;
+            readonly reflect: true;
+        };
+        focused: {
+            readonly type: BooleanConstructor;
+            readonly reflect: true;
+        };
+        hovered: {
+            readonly type: BooleanConstructor;
+            readonly reflect: true;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
     };
+    interactive: boolean | undefined;
+    active: boolean | undefined;
+    focused: boolean | undefined;
+    hovered: boolean | undefined;
+    dismissLabel: string | undefined;
     dismissed: boolean | undefined;
+    dismissible: boolean | undefined;
     disabled: boolean | undefined;
     fullWidth: boolean | undefined;
     loading: boolean | undefined;
@@ -56,9 +89,9 @@ declare class SpectreAlertElement extends SpectreProjectableElement implements S
     set id(value: string | null | undefined);
     get title(): string;
     set title(value: string | null | undefined);
-    protected getContentContainer(): Element | null;
-    protected isInternalNode(node: Node): boolean;
+    private readonly projection;
     protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
+    private dismiss;
     private get alertClasses();
     render(): lit_html.TemplateResult<1>;
 }

package/dist/alert.js

@@ -1,5 +1,5 @@
-import { getAlertClasses } from '@phcdevworks/spectre-ui';
-import { LitElement, nothing, html } from 'lit';
+import { getAlertClasses, getAlertIconClasses, getAlertDismissClasses } from '@phcdevworks/spectre-ui';
+import { svg, LitElement, nothing, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 // src/utils/form.ts
@@ -12,7 +12,8 @@ var spectreAlertVariants = [
   "success",
   "warning",
   "danger",
-  "neutral"
+  "neutral",
+  "brand"
 ];
 function isAlertVariant(value) {
   return spectreAlertVariants.includes(value);
@@ -279,6 +280,28 @@ var SpectreBaseElement = class extends LitElement {
   }
 };
 SpectreBaseElement.properties = {};
+var paths = {
+  check: svg`<path d="M3 8.5l3 3 7-7" />`,
+  chevronDown: svg`<path d="M4 6l4 4 4-4" />`,
+  chevronLeft: svg`<path d="M10 4l-4 4 4 4" />`,
+  chevronRight: svg`<path d="M6 4l4 4-4 4" />`,
+  close: svg`<path d="M4 4l8 8M12 4l-8 8" />`
+};
+function renderIcon(name, sizeClass = "sp-icon-sm") {
+  return html`<svg
+    aria-hidden="true"
+    class="${sizeClass}"
+    fill="none"
+    focusable="false"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 16 16"
+  >
+    ${paths[name]}
+  </svg>`;
+}
 
 // src/utils/dom.ts
 function hasMeaningfulContent(nodes) {
@@ -293,79 +316,135 @@ function hasMeaningfulContent(nodes) {
   });
 }
 
-// src/utils/projectable.ts
-var SpectreProjectableElement = class extends SpectreBaseElement {
-  constructor() {
-    super(...arguments);
-    this.projectedContent = [];
+// src/utils/projection.ts
+function slotOf(node) {
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return void 0;
+  }
+  return node.getAttribute("slot") ?? void 0;
+}
+var ProjectionController = class {
+  constructor(host, internalAttributes) {
+    this.host = host;
+    this.internalAttributes = internalAttributes;
+    this.projected = [];
+    host.addController(this);
   }
-  get hasProjectedContent() {
-    return hasMeaningfulContent(this.projectedContent);
+  hostConnected() {
+    this.sync();
+    this.observe();
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.syncProjectedContent();
-    this.startContentObserver();
-  }
-  disconnectedCallback() {
-    this.stopContentObserver();
-    super.disconnectedCallback();
-  }
-  update(changedProperties) {
-    this.stopContentObserver();
-    super.update(changedProperties);
-    this.startContentObserver();
-  }
-  syncProjectedContent() {
-    const nextProjectedContent = [];
-    const sourceNodes = [
-      ...this.childNodes,
-      ...this.getContentContainer()?.childNodes ?? []
+  hostDisconnected() {
+    this.disconnect();
+  }
+  hostUpdate() {
+    this.sync();
+    this.disconnect();
+  }
+  hostUpdated() {
+    this.observe();
+  }
+  // Every projected node in authored order, regardless of slot.
+  all() {
+    return [...this.projected];
+  }
+  // Omitting `slot` returns the nodes without a slot attribute.
+  nodes(slot) {
+    return this.projected.filter((node) => slotOf(node) === slot);
+  }
+  elements(slot) {
+    return this.nodes(slot).filter(
+      (node) => node.nodeType === Node.ELEMENT_NODE
+    );
+  }
+  has(slot) {
+    return hasMeaningfulContent(this.nodes(slot));
+  }
+  isInternalNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE && this.internalAttributes.some(
+      (name) => node.hasAttribute(name)
+    );
+  }
+  isProjectable(node) {
+    if (node.nodeType === Node.COMMENT_NODE || this.isInternalNode(node)) {
+      return false;
+    }
+    if (node.nodeType === Node.TEXT_NODE && this.hostHasRendered) {
+      return Boolean(node.textContent?.trim());
+    }
+    return true;
+  }
+  get hostHasRendered() {
+    return this.host.hasUpdated;
+  }
+  sync() {
+    const next = [
+      .../* @__PURE__ */ new Set([
+        ...this.projected.filter((node) => this.host.contains(node)),
+        ...Array.from(this.host.childNodes).filter(
+          (node) => this.isProjectable(node)
+        )
+      ])
     ];
-    sourceNodes.forEach((node) => {
-      if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {
-        nextProjectedContent.push(node);
-      }
-    });
-    const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);
-    if (hasChanged) {
-      this.projectedContent = nextProjectedContent;
+    const changed = next.length !== this.projected.length || next.some((node, index) => node !== this.projected[index]);
+    if (changed) {
+      this.projected = next;
     }
-    return hasChanged;
+    return changed;
   }
-  startContentObserver() {
-    if (this.contentObserver) {
+  observe() {
+    if (this.observer || !this.host.isConnected) {
       return;
     }
-    this.contentObserver = new MutationObserver((mutations) => {
-      const isInternalMovement = mutations.every(
-        (mutation) => [...mutation.removedNodes].every(
-          (node) => this.isInternalNode(node) || this.contains(node)
-        ) && [...mutation.addedNodes].every((node) => this.isInternalNode(node))
-      );
-      if (isInternalMovement) {
-        return;
-      }
-      if (this.syncProjectedContent()) {
-        this.requestUpdate();
+    this.observer = new MutationObserver(() => {
+      if (this.sync()) {
+        this.host.requestUpdate();
       }
     });
-    this.contentObserver.observe(this, { childList: true });
+    this.observer.observe(this.host, { childList: true });
   }
-  stopContentObserver() {
-    this.contentObserver?.disconnect();
-    this.contentObserver = void 0;
+  disconnect() {
+    this.observer?.disconnect();
+    this.observer = void 0;
   }
 };
-var SpectreAlertElement = class extends SpectreProjectableElement {
+
+// src/utils/states.ts
+var hoverFocusStateProperties = {
+  focused: { type: Boolean, reflect: true },
+  hovered: { type: Boolean, reflect: true }
+};
+var interactionStateProperties = {
+  ...hoverFocusStateProperties,
+  active: { type: Boolean, reflect: true }
+};
+function hoverFocusStates(element) {
+  return {
+    focused: element.focused ?? false,
+    hovered: element.hovered ?? false
+  };
+}
+function interactionStates(element) {
+  return { ...hoverFocusStates(element), active: element.active ?? false };
+}
+var SpectreAlertElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.interactive = false;
+    this.active = false;
+    this.focused = false;
+    this.hovered = false;
+    this.dismissLabel = "Dismiss";
     this.dismissed = false;
+    this.dismissible = false;
     this.disabled = false;
     this.fullWidth = false;
     this.loading = false;
     this.size = "md";
     this.variant = "info";
+    this.projection = new ProjectionController(this, [
+      "data-sp-alert-native"
+    ]);
   }
   get id() {
     return super.id;
@@ -379,20 +458,16 @@ var SpectreAlertElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
-  getContentContainer() {
-    return this.querySelector("[data-sp-alert-native]");
-  }
-  isInternalNode(node) {
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      return false;
-    }
-    const el = node;
-    return el.hasAttribute("data-sp-alert-native");
-  }
   willUpdate(changedProperties) {
+    if (changedProperties.has("dismissLabel") && !this.dismissLabel) {
+      this.dismissLabel = "Dismiss";
+    }
     if (changedProperties.has("dismissed") && this.dismissed == null) {
       this.dismissed = false;
     }
+    if (changedProperties.has("dismissible") && this.dismissible == null) {
+      this.dismissible = false;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -409,10 +484,20 @@ var SpectreAlertElement = class extends SpectreProjectableElement {
       this.size = "md";
     }
   }
+  dismiss() {
+    if (this.dismissed) {
+      return;
+    }
+    this.dismissed = true;
+    this.dispatchEvent(new CustomEvent("sp-dismiss", { bubbles: true }));
+  }
   get alertClasses() {
     return getAlertClasses({
+      interactive: this.interactive ?? false,
+      ...interactionStates(this),
       disabled: this.isDisabled,
       dismissed: this.dismissed ?? false,
+      dismissible: this.dismissible ?? false,
       fullWidth: this.fullWidth ?? false,
       loading: this.loading ?? false,
       size: this.size,
@@ -431,12 +516,28 @@ var SpectreAlertElement = class extends SpectreProjectableElement {
       role="alert"
       title="${ifDefined(this.title || void 0)}"
     >
-      ${this.hasProjectedContent ? this.projectedContent : nothing}
+      ${this.projection.has("icon") ? html`<span class="${getAlertIconClasses()}"
+              >${this.projection.nodes("icon")}</span
+            >` : nothing}
+      ${this.projection.has() ? this.projection.nodes() : nothing}
+      ${this.dismissible ? html`<button
+              aria-label="${this.dismissLabel ?? "Dismiss"}"
+              class="${getAlertDismissClasses()}"
+              data-sp-alert-dismiss
+              type="button"
+              @click="${() => this.dismiss()}"
+            >
+              ${renderIcon("close")}
+            </button>` : nothing}
     </div>`;
   }
 };
 SpectreAlertElement.properties = {
+  interactive: { type: Boolean, reflect: true },
+  ...interactionStateProperties,
+  dismissLabel: { attribute: "dismiss-label", type: String },
   dismissed: { type: Boolean, reflect: true },
+  dismissible: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   loading: { type: Boolean, reflect: true },