@lmfaole/basics 0.4.0 → 0.5.0

package/{components → basic-components}/basic-toast/index.js

@@ -11,9 +11,36 @@ const PANEL_SELECTOR = "[data-toast-panel]";
 const TITLE_SELECTOR = "[data-toast-title]";
 const OPEN_SELECTOR = "[data-toast-open]";
 const CLOSE_SELECTOR = "[data-toast-close]";
+const ANNOUNCER_ATTRIBUTE = "data-basic-toast-announcer";
 const MANAGED_LABEL_ATTRIBUTE = "data-basic-toast-managed-label";
 const MANAGED_LABELLEDBY_ATTRIBUTE = "data-basic-toast-managed-labelledby";
 const MANAGED_POPOVER_ATTRIBUTE = "data-basic-toast-managed-popover";
+const INTERACTIVE_PANEL_SELECTOR = [
+    "a[href]",
+    "area[href]",
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "summary",
+    "iframe",
+    "audio[controls]",
+    "video[controls]",
+    "[contenteditable]:not([contenteditable=\"false\"])",
+    "[tabindex]:not([tabindex=\"-1\"])",
+].join(", ");
+const VISUALLY_HIDDEN_ANNOUNCER_STYLE = [
+    "position:absolute",
+    "inline-size:1px",
+    "block-size:1px",
+    "margin:-1px",
+    "padding:0",
+    "overflow:hidden",
+    "clip:rect(0 0 0 0)",
+    "clip-path:inset(50%)",
+    "white-space:nowrap",
+    "border:0",
+].join(";");
 
 let nextToastInstanceId = 1;
 
@@ -41,6 +68,98 @@ function isToastPanelOpen(panel) {
     }
 }
 
+function normalizeToastText(value) {
+    return value?.replace(/\s+/g, " ").trim() || "";
+}
+
+function getToastTextFromIdRefs(ownerDocument, value) {
+    if (!ownerDocument || !value) {
+        return "";
+    }
+
+    return value
+        .split(/\s+/)
+        .map((id) => normalizeToastText(ownerDocument.getElementById(id)?.textContent))
+        .filter(Boolean)
+        .join(" ");
+}
+
+function getToastAccessibleName(panel, title) {
+    if (!(panel instanceof HTMLElementBase)) {
+        return { includesTitle: false, text: "" };
+    }
+
+    const labelledBy = panel.getAttribute("aria-labelledby");
+
+    if (labelledBy) {
+        const ids = labelledBy.split(/\s+/).filter(Boolean);
+
+        return {
+            includesTitle: title instanceof HTMLElementBase && !!title.id && ids.includes(title.id),
+            text: getToastTextFromIdRefs(panel.ownerDocument, labelledBy),
+        };
+    }
+
+    const label = normalizeToastText(panel.getAttribute("aria-label"));
+
+    if (label) {
+        return { includesTitle: false, text: label };
+    }
+
+    if (title instanceof HTMLElementBase) {
+        return { includesTitle: true, text: normalizeToastText(title.textContent) };
+    }
+
+    return { includesTitle: false, text: "" };
+}
+
+function getToastBodyText(panel, excludeTitle = false) {
+    if (!(panel instanceof HTMLElementBase)) {
+        return "";
+    }
+
+    if (!excludeTitle) {
+        return normalizeToastText(panel.textContent);
+    }
+
+    const panelClone = panel.cloneNode(true);
+
+    if (!(panelClone instanceof HTMLElementBase)) {
+        return normalizeToastText(panel.textContent);
+    }
+
+    for (const title of panelClone.querySelectorAll(TITLE_SELECTOR)) {
+        title.remove();
+    }
+
+    return normalizeToastText(panelClone.textContent);
+}
+
+function getToastAnnouncementText(panel, title) {
+    const { includesTitle, text: name } = getToastAccessibleName(panel, title);
+    const body = getToastBodyText(panel, includesTitle);
+
+    if (!name) {
+        return body;
+    }
+
+    if (!body || body === name || body.startsWith(`${name} `) || body.startsWith(`${name}.`)) {
+        return name;
+    }
+
+    return `${name}. ${body}`;
+}
+
+function findInteractiveToastDescendants(panel) {
+    if (!(panel instanceof HTMLElementBase)) {
+        return [];
+    }
+
+    return Array.from(panel.querySelectorAll(INTERACTIVE_PANEL_SELECTOR)).filter(
+        (element) => element instanceof HTMLElementBase && !element.hidden,
+    );
+}
+
 export function normalizeToastLabel(value) {
     return value?.trim() || DEFAULT_LABEL;
 }
@@ -88,6 +207,10 @@ export class ToastElement extends HTMLElementBase {
     #closeButtons = [];
     #restoreFocusTo = null;
     #dismissTimer = 0;
+    #announcementTimer = 0;
+    #announcer = null;
+    #open = false;
+    #hasWarnedAboutInteractiveContent = false;
     #eventsBound = false;
 
     connectedCallback() {
@@ -110,6 +233,7 @@ export class ToastElement extends HTMLElementBase {
         this.#eventsBound = false;
         this.#syncPanelEvents(null);
         this.#clearDismissTimer();
+        this.#clearAnnouncement();
     }
 
     attributeChangedCallback() {
@@ -223,6 +347,34 @@ export class ToastElement extends HTMLElementBase {
         this.#applyState();
     }
 
+    #ensureAnnouncer() {
+        if (this.#announcer instanceof HTMLElementBase && this.#announcer.isConnected) {
+            this.#announcer.setAttribute("style", VISUALLY_HIDDEN_ANNOUNCER_STYLE);
+            return this.#announcer;
+        }
+
+        const existingAnnouncer = Array.from(this.children).find(
+            (element) => element instanceof HTMLElementBase && element.hasAttribute(ANNOUNCER_ATTRIBUTE),
+        );
+
+        if (existingAnnouncer instanceof HTMLElementBase) {
+            existingAnnouncer.setAttribute("style", VISUALLY_HIDDEN_ANNOUNCER_STYLE);
+            this.#announcer = existingAnnouncer;
+            return existingAnnouncer;
+        }
+
+        if (!this.ownerDocument?.createElement) {
+            return null;
+        }
+
+        const announcer = this.ownerDocument.createElement("div");
+        announcer.setAttribute(ANNOUNCER_ATTRIBUTE, "");
+        announcer.setAttribute("style", VISUALLY_HIDDEN_ANNOUNCER_STYLE);
+        this.append(announcer);
+        this.#announcer = announcer;
+        return announcer;
+    }
+
     #syncPanelEvents(nextPanel) {
         if (this.#panelWithEvents === nextPanel) {
             return;
@@ -264,6 +416,7 @@ export class ToastElement extends HTMLElementBase {
 
         if (!(this.#panel instanceof HTMLElementBase)) {
             this.#clearDismissTimer();
+            this.#clearAnnouncement();
             return;
         }
 
@@ -273,11 +426,13 @@ export class ToastElement extends HTMLElementBase {
             this.#title.id = `${baseId}-title`;
         }
 
-        this.#panel.setAttribute("role", getToastRoleForLive(this.getAttribute("data-live")));
-        this.#panel.setAttribute("aria-live", normalizeToastLive(this.getAttribute("data-live")));
-        this.#panel.setAttribute("aria-atomic", "true");
+        this.#panel.setAttribute("role", "group");
+        this.#panel.removeAttribute("aria-live");
+        this.#panel.removeAttribute("aria-atomic");
         this.#syncAccessibleLabel();
         this.#syncPopoverState();
+        this.#syncAnnouncerState();
+        this.#warnOnInteractiveContent();
         this.#syncOpenState();
     }
 
@@ -309,6 +464,15 @@ export class ToastElement extends HTMLElementBase {
         this.#dismissTimer = 0;
     }
 
+    #clearAnnouncementTimer() {
+        if (this.#announcementTimer === 0 || typeof window === "undefined") {
+            return;
+        }
+
+        window.clearTimeout(this.#announcementTimer);
+        this.#announcementTimer = 0;
+    }
+
     #syncPopoverState() {
         if (!(this.#panel instanceof HTMLElementBase) || !supportsToastPopover(this.#panel)) {
             return;
@@ -323,6 +487,7 @@ export class ToastElement extends HTMLElementBase {
     #syncOpenState() {
         if (!(this.#panel instanceof HTMLElementBase)) {
             this.#clearDismissTimer();
+            this.#clearAnnouncement();
             return;
         }
 
@@ -350,21 +515,29 @@ export class ToastElement extends HTMLElementBase {
     #syncStateFromPanel() {
         if (!(this.#panel instanceof HTMLElementBase)) {
             this.#clearDismissTimer();
+            this.#clearAnnouncement();
             return;
         }
 
+        const wasOpen = this.#open;
         const open = supportsToastPopover(this.#panel)
             ? isToastPanelOpen(this.#panel)
             : !this.#panel.hidden;
 
+        this.#open = open;
         this.#panel.hidden = !open;
         this.#panel.toggleAttribute("data-open", open);
         this.toggleAttribute("data-open", open);
 
         if (open) {
+            this.#syncAnnouncerState();
             this.#scheduleDismiss();
+            if (!wasOpen) {
+                this.#announce();
+            }
         } else {
             this.#clearDismissTimer();
+            this.#clearAnnouncement();
         }
     }
 
@@ -414,6 +587,94 @@ export class ToastElement extends HTMLElementBase {
         this.#panel.setAttribute("aria-label", nextLabel);
         this.#panel.setAttribute(MANAGED_LABEL_ATTRIBUTE, "");
     }
+
+    #syncAnnouncerState() {
+        if (!this.#open) {
+            if (this.#announcer instanceof HTMLElementBase) {
+                this.#announcer.textContent = "";
+                this.#announcer.removeAttribute("role");
+                this.#announcer.removeAttribute("aria-live");
+                this.#announcer.removeAttribute("aria-atomic");
+                this.#announcer.removeAttribute("aria-relevant");
+            }
+            return;
+        }
+
+        const announcer = this.#ensureAnnouncer();
+
+        if (!(announcer instanceof HTMLElementBase)) {
+            return;
+        }
+
+        announcer.setAttribute("role", getToastRoleForLive(this.getAttribute("data-live")));
+        announcer.setAttribute("aria-live", normalizeToastLive(this.getAttribute("data-live")));
+        announcer.setAttribute("aria-atomic", "true");
+        announcer.setAttribute("aria-relevant", "additions text");
+    }
+
+    #clearAnnouncement() {
+        this.#clearAnnouncementTimer();
+        this.#open = false;
+
+        if (!(this.#announcer instanceof HTMLElementBase)) {
+            return;
+        }
+
+        this.#announcer.textContent = "";
+        this.#announcer.removeAttribute("role");
+        this.#announcer.removeAttribute("aria-live");
+        this.#announcer.removeAttribute("aria-atomic");
+        this.#announcer.removeAttribute("aria-relevant");
+    }
+
+    #announce() {
+        const announcement = getToastAnnouncementText(this.#panel, this.#title);
+        const announcer = this.#ensureAnnouncer();
+
+        if (!announcement || !(announcer instanceof HTMLElementBase)) {
+            return;
+        }
+
+        this.#clearAnnouncementTimer();
+        this.#syncAnnouncerState();
+        announcer.textContent = "";
+
+        if (typeof window === "undefined") {
+            announcer.textContent = announcement;
+            return;
+        }
+
+        this.#announcementTimer = window.setTimeout(() => {
+            this.#announcementTimer = 0;
+
+            if (!this.#open || !(this.#announcer instanceof HTMLElementBase)) {
+                return;
+            }
+
+            this.#announcer.textContent = announcement;
+        }, 0);
+    }
+
+    #warnOnInteractiveContent() {
+        if (
+            this.#hasWarnedAboutInteractiveContent
+            || !(this.#panel instanceof HTMLElementBase)
+            || typeof globalThis.console?.warn !== "function"
+        ) {
+            return;
+        }
+
+        if (findInteractiveToastDescendants(this.#panel).length === 0) {
+            return;
+        }
+
+        this.#hasWarnedAboutInteractiveContent = true;
+        globalThis.console.warn(
+            "basic-toast panels should only contain non-interactive message content. "
+            + "Move links, buttons, and other focusable controls outside [data-toast-panel], "
+            + "or use a more appropriate pattern such as basic-alert or basic-dialog.",
+        );
+    }
 }
 
 export function defineToast(registry = globalThis.customElements) {

package/basic-components/basic-toc/README.md

@@ -0,0 +1,43 @@
+# `basic-toc`
+
+Generated table-of-contents navigation from the nearest `<main>`.
+
+## Register
+
+```js
+import "@lmfaole/basics/basic-components/basic-toc/register";
+```
+
+## Example
+
+```html
+<basic-toc data-title="Innhold">
+  <nav aria-label="Innhold" data-page-toc-nav></nav>
+</basic-toc>
+```
+
+## Props
+
+| Prop | Description | Type | Default | Options |
+| --- | --- | --- | --- | --- |
+| `data-title` | Accessible label applied to the generated nav. | string | `Innhold` | any string |
+| `data-heading-selector` | Selector used to collect headings from the nearest `<main>`. | CSS selector | `h1, h2, h3, h4, h5, h6` | any CSS selector |
+
+## Markup Hooks
+
+| Hook | Description | Type | Default | Options |
+| --- | --- | --- | --- | --- |
+| `data-page-toc-nav` | Container where the generated outline links are rendered. | descendant element attribute | required | present on one descendant element |
+
+## Behavior
+
+- Generates missing heading ids automatically
+- Gives duplicate headings unique fragment ids
+- Ignores hidden headings
+- Rebuilds the outline when matching headings are added or changed
+
+## Markup Contract
+
+- Render the element inside the same `<main>` that contains the content it should index
+- Provide a descendant element with `data-page-toc-nav` for the generated links
+- Keep layout and styling outside the package

package/basic-components/basic-toc/register.d.ts

@@ -0,0 +1 @@
+export {};

package/basic-styling/components/basic-accordion.css

@@ -1,16 +1,20 @@
 basic-accordion {
     --basic-accordion-padding: var(--basic-panel-padding);
     display: grid;
+    gap: 0;
 }
 
 basic-accordion > details {
     margin: 0;
-    border: var(--basic-border-width) solid var(--basic-color-border);
-    border-radius: var(--basic-radius);
+    border-inline: var(--basic-border-width) solid var(--basic-color-border);
     background: var(--basic-color-surface);
 }
 
 basic-accordion > details > summary {
+    --basic-interaction-border-rest: transparent;
+    --basic-interaction-border-hover: transparent;
+    --basic-interaction-border-active: transparent;
+    --basic-interaction-border-selected: transparent;
     list-style: none;
     display: flex;
     align-items: center;
@@ -20,6 +24,7 @@ basic-accordion > details > summary {
     font-weight: 600;
     text-align: left;
     cursor: pointer;
+    background: transparent;
 }
 
 basic-accordion > details > summary::-webkit-details-marker {
@@ -34,9 +39,34 @@ basic-accordion > details > summary::after {
     line-height: 1;
 }
 
+basic-accordion > details:first-child {
+    border-block-start: var(--basic-border-width) solid var(--basic-color-border);
+    border-start-start-radius: var(--basic-radius);
+    border-start-end-radius: var(--basic-radius);
+}
+
+basic-accordion > details:first-child > summary {
+    border-start-start-radius: var(--basic-radius);
+    border-start-end-radius: var(--basic-radius);
+}
+
+basic-accordion > details + details {
+    border-block-start: var(--basic-border-width) solid var(--basic-color-border);
+}
+
+basic-accordion > details:last-child {
+    border-block-end: var(--basic-border-width) solid var(--basic-color-border);
+    border-end-start-radius: var(--basic-radius);
+    border-end-end-radius: var(--basic-radius);
+}
+
+basic-accordion > details:last-child:not([open]) > summary {
+    border-end-start-radius: var(--basic-radius);
+    border-end-end-radius: var(--basic-radius);
+}
+
 basic-accordion > details[open] > summary {
-    background: var(--basic-color-surface-muted);
-    margin-block-end: var(--basic-flow-space);
+    border-block-end: var(--basic-border-width) solid var(--basic-color-border-selected);
 }
 
 basic-accordion > details[open] > summary::after {
@@ -48,6 +78,10 @@ basic-accordion > details[open] {
     padding-block-end: var(--basic-accordion-padding);
 }
 
+basic-accordion > details[open] > summary + :where(*) {
+    margin-block-start: var(--basic-accordion-padding);
+}
+
 basic-accordion > details > :where(:not(summary)) {
     margin-block: 0;
     margin-inline: var(--basic-accordion-padding);

package/basic-styling/components/basic-carousel.css

@@ -0,0 +1,183 @@
+basic-carousel {
+    --basic-carousel-gap: var(--basic-space-4);
+    --basic-carousel-controls-gap: var(--basic-space-3);
+    --basic-carousel-button-size: 2.75rem;
+    --basic-carousel-marker-size: 1.75rem;
+    --basic-carousel-item-width: 90%;
+    --basic-carousel-track-padding: var(--basic-space-1);
+    --basic-carousel-snap-align: center;
+    display: block;
+}
+
+basic-carousel[data-basic-carousel-snapping="start"] {
+    --basic-carousel-snap-align: start;
+}
+
+basic-carousel[data-basic-carousel-snapping="end"] {
+    --basic-carousel-snap-align: end;
+}
+
+basic-carousel [data-carousel-track] {
+    display: flex;
+    align-items: stretch;
+    gap: var(--basic-carousel-gap);
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--basic-carousel-track-padding);
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+}
+
+basic-carousel :is(ol, ul)[data-carousel-track] {
+    list-style: none;
+    padding-inline-start: var(--basic-carousel-track-padding);
+}
+
+basic-carousel [data-carousel-track] > * {
+    box-sizing: border-box;
+    flex: 0 0 var(--basic-carousel-item-width);
+    inline-size: var(--basic-carousel-item-width);
+    min-inline-size: 0;
+    padding: var(--basic-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface);
+    scroll-snap-align: var(--basic-carousel-snap-align);
+    scroll-snap-stop: always;
+}
+
+basic-carousel [data-carousel-track] > * > :where(*) {
+    margin-block: 0;
+}
+
+basic-carousel [data-carousel-track] > * > :where(* + *) {
+    margin-block-start: var(--basic-flow-space);
+}
+
+basic-carousel [data-carousel-track] > * > p:first-child {
+    color: var(--basic-color-text-muted);
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+basic-carousel [data-carousel-track] > * > a {
+    color: inherit;
+    font-weight: 600;
+}
+
+@supports (scroll-marker-group: after) {
+    basic-carousel {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        grid-template-rows: minmax(0, auto) auto;
+        gap: var(--basic-carousel-controls-gap);
+        align-items: start;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="markers"], [data-basic-carousel-controls="none"]) {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    basic-carousel [data-carousel-track] {
+        grid-column: 1 / -1;
+        grid-row: 1;
+        scroll-marker-group: after;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="markers"], [data-basic-carousel-controls="none"]) [data-carousel-track] {
+        grid-column: 1;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="arrows"], [data-basic-carousel-controls="none"]) [data-carousel-track] {
+        scroll-marker-group: none;
+    }
+
+    basic-carousel [data-carousel-track]::scroll-button(inline-start),
+    basic-carousel [data-carousel-track]::scroll-button(inline-end) {
+        display: inline-flex;
+        align-items: center;
+        align-self: center;
+        justify-content: center;
+        inline-size: var(--basic-carousel-button-size);
+        block-size: var(--basic-carousel-button-size);
+        margin: 0;
+        padding: 0;
+        border: var(--basic-border-width) solid var(--basic-color-border);
+        border-radius: var(--basic-radius-pill);
+        background: var(--basic-color-surface);
+        color: inherit;
+        cursor: pointer;
+        grid-row: 2;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="markers"], [data-basic-carousel-controls="none"]) [data-carousel-track]::scroll-button(inline-start),
+    basic-carousel:is([data-basic-carousel-controls="markers"], [data-basic-carousel-controls="none"]) [data-carousel-track]::scroll-button(inline-end) {
+        display: none;
+    }
+
+    basic-carousel [data-carousel-track]::scroll-button(inline-start) {
+        content: "<" / "Previous slide";
+        grid-column: 1;
+        justify-self: end;
+    }
+
+    basic-carousel [data-carousel-track]::scroll-button(inline-end) {
+        content: ">" / "Next slide";
+        grid-column: 3;
+        justify-self: start;
+    }
+
+    basic-carousel [data-carousel-track]::scroll-button(*):disabled {
+        opacity: 0.45;
+        cursor: not-allowed;
+    }
+
+    basic-carousel [data-carousel-track]::scroll-marker-group {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        align-self: center;
+        justify-content: center;
+        gap: var(--basic-space-2);
+        min-block-size: var(--basic-carousel-button-size);
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    basic-carousel[data-basic-carousel-controls="markers"] [data-carousel-track]::scroll-marker-group {
+        grid-column: 1;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="arrows"], [data-basic-carousel-controls="none"]) [data-carousel-track]::scroll-marker-group {
+        display: none;
+    }
+
+    basic-carousel [data-carousel-track] > *::scroll-marker {
+        content: attr(data-basic-carousel-marker) / attr(data-basic-carousel-marker-label);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-inline-size: var(--basic-carousel-marker-size);
+        block-size: var(--basic-carousel-marker-size);
+        padding-inline: var(--basic-space-2);
+        border: var(--basic-border-width) solid var(--basic-color-border);
+        border-radius: var(--basic-radius-pill);
+        background: var(--basic-color-surface);
+        color: inherit;
+        font-size: 0.875rem;
+        font-weight: 600;
+    }
+
+    basic-carousel:is([data-basic-carousel-controls="arrows"], [data-basic-carousel-controls="none"]) [data-carousel-track] > *::scroll-marker {
+        content: none;
+    }
+
+    basic-carousel [data-carousel-track] > *::scroll-marker:target-current {
+        border-color: var(--basic-color-border-selected);
+        background: var(--basic-color-surface-selected);
+    }
+}

package/basic-styling/components/basic-popover.css

@@ -7,6 +7,8 @@ basic-popover {
 
 basic-popover [data-popover-open],
 basic-popover [data-popover-close] {
+    --basic-interaction-surface-selected: var(--basic-color-surface-muted);
+    --basic-interaction-border-selected: var(--basic-color-border);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -19,10 +21,6 @@ basic-popover [data-popover-close] {
     cursor: pointer;
 }
 
-basic-popover [data-popover-open][aria-expanded="true"] {
-    background: var(--basic-color-surface-muted);
-}
-
 basic-popover [data-popover-panel] {
     width: min(var(--basic-popover-width, 20rem), var(--basic-popover-max-width, calc(100vw - 2rem)));
     max-width: var(--basic-popover-max-width, calc(100vw - 2rem));