@ctrliq/quantic-components 1.70.2 → 1.71.0

package/dist/panel/index.stories.js

@@ -1,4 +1,5 @@
 import { story } from '../shared/story';
+import { STORY_IMAGE_WIDE } from '../shared/story-images';
 import { PanelVariant } from './index.constants';
 export default {
     title: 'Components/Layout/Panel',
@@ -99,7 +100,7 @@ export const VariantGhost = story({
   <quantic-panel variant="${variant}"${highlighted ? ' highlighted' : ''}>
     <quantic-panel-header slot="header">Ghost Panel</quantic-panel-header>
     <img
-      src="https://placehold.co/600x200/e2e8f0/64748b?text=Full+Width+Content"
+      src="${STORY_IMAGE_WIDE}"
       alt="Example"
       style="width: 100%; display: block; margin: 0 0 1rem;"
     />

package/dist/prose/index.constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ProseAs: {
+    readonly Article: "article";
+    readonly Section: "section";
+    readonly Div: "div";
+};
+export type ProseAs = (typeof ProseAs)[keyof typeof ProseAs];

package/dist/prose/index.constants.js

@@ -0,0 +1,5 @@
+export const ProseAs = {
+    Article: 'article',
+    Section: 'section',
+    Div: 'div',
+};

package/dist/prose/index.d.ts

@@ -0,0 +1,15 @@
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+import { ProseAs } from './index.constants';
+export { ProseAs } from './index.constants';
+export declare class Prose extends QuanticElement {
+    static meta: ComponentMeta;
+    as: ProseAs;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-prose': Prose;
+    }
+}

package/dist/prose/index.js

@@ -0,0 +1,96 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { quanticElement, QuanticElement } from '../shared/quantic-element';
+import { prop } from '../shared/component-meta.decorators';
+import { ProseAs } from './index.constants';
+export { ProseAs } from './index.constants';
+let Prose = class Prose extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.as = ProseAs.Article;
+    }
+    render() {
+        const Tag = unsafeStatic(this.as);
+        return html `<${Tag}><slot></slot></${Tag}>`;
+    }
+};
+Prose.meta = {
+    tag: 'quantic-prose',
+    description: 'Article context for long-form HTML (markdown, MDX, docs). Typography comes from ' +
+        '@ctrliq/quantic-css/prose on the critical path (`@forward` in global.scss) so first paint ' +
+        'matches before the custom element upgrades. The host only wraps slotted content in a ' +
+        'landmark (`as`) for catalog/Storybook — it does not ship article CSS. Use quantic-text for one-off strings.',
+    category: 'display',
+    slots: {
+        '': { description: 'Article content (headings, paragraphs, lists, pre, embedded components).' },
+    },
+    relatedTo: ['quantic-text', 'quantic-alert'],
+};
+Prose.styles = css `
+    :host {
+      display: block;
+    }
+
+    /* Slotted siblings ignore document > * + * margins for layout; flex gap handles rhythm. */
+    article,
+    section,
+    div {
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--quantic-spacing-5);
+    }
+
+    slot {
+      display: contents;
+    }
+
+    /* prose.scss margins stack with flex gap in the slot — zero them on slotted blocks. */
+    ::slotted(h1),
+    ::slotted(h2),
+    ::slotted(h3),
+    ::slotted(h4),
+    ::slotted(p),
+    ::slotted(ul),
+    ::slotted(ol),
+    ::slotted(pre),
+    ::slotted(blockquote),
+    ::slotted(figure),
+    ::slotted(table),
+    ::slotted(hr),
+    ::slotted(quantic-alert) {
+      margin-block: 0 !important;
+      margin-inline: 0;
+    }
+
+    /* row-gap (spacing-5) + extras mirror prose.scss rhythm without doubling. */
+    ::slotted(.lead),
+    ::slotted(.lede) {
+      margin-block-end: var(--quantic-spacing-3) !important;
+    }
+
+    ::slotted(h2) {
+      margin-block-start: var(--quantic-spacing-3) !important;
+    }
+
+    ::slotted(p + p) {
+      margin-block-start: var(--quantic-spacing-1) !important;
+    }
+  `;
+__decorate([
+    prop({
+        type: 'ProseAs',
+        options: Object.values(ProseAs),
+        default: ProseAs.Article,
+        description: 'Landmark element wrapping the slot (article, section, or div).',
+    })
+], Prose.prototype, "as", void 0);
+Prose = __decorate([
+    quanticElement('quantic-prose')
+], Prose);
+export { Prose };

package/dist/prose/index.stories.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    render: ({ html }: {
+        html: import("../shared/story").HtmlFn;
+    }) => unknown;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            story: {
+                iframeHeight: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Article: import("../shared/story").StoryObject<object>;

package/dist/prose/index.stories.js

@@ -0,0 +1,121 @@
+import { story } from '../shared/story';
+import { STORY_IMAGE_INLINE } from '../shared/story-images';
+import { Alert } from '../alert';
+import { AlertType } from '../alert/index.constants';
+import { Prose } from './index';
+Prose.ensureDefined();
+Alert.ensureDefined();
+const renderFixture = ({ html }) => html `
+  <quantic-prose>
+    <h1>Getting started</h1>
+    <p class="lead">
+      Install the package on a supported host, authenticate with the portal, and confirm the
+      service is running before you open the dashboard.
+    </p>
+
+    <quantic-alert type="${AlertType.Info}">
+      <span slot="title">Portal token required</span>
+      Sign in to the customer portal and copy your access token before adding the package
+      repository to the host.
+    </quantic-alert>
+
+    <h2>Before you begin</h2>
+    <p>
+      Make sure the host meets the baseline requirements below. Most teams can finish a first
+      install in under ten minutes once outbound network access is in place.
+    </p>
+    <p>
+      If you are upgrading from an older release, skim the supported branches table at the
+      bottom of this page before you move production traffic.
+    </p>
+
+    <h3>Configure the repository</h3>
+    <p>
+      Add the repository for your distribution, then install the package. Confirm the unit is
+      active with <code>systemctl status example</code>, or jump ahead to the
+      <a href="#installation">installation commands</a>.
+    </p>
+
+    <h4>Prerequisites</h4>
+    <ul>
+      <li>A supported Linux host (x86_64 or aarch64)</li>
+      <li>Outbound access to the package repositories</li>
+      <li>An organization and access token from the customer portal</li>
+    </ul>
+
+    <ol>
+      <li>Create an account or sign in to the portal</li>
+      <li>Create or join an organization</li>
+      <li>Copy the access token into your shell environment</li>
+    </ol>
+
+    <blockquote>
+      <p>
+        Ordered lists in prose use decimal markers. Circle step markers belong on the Steps
+        layout component when you are writing a tutorial.
+      </p>
+    </blockquote>
+
+    <h2 id="installation">Installation</h2>
+    <p>
+      Run the commands below on the target host. Long lines scroll inside the block instead of
+      wrapping the layout.
+    </p>
+    <pre><code>sudo dnf config-manager --add-repo https://packages.example.com/example.repo
+sudo dnf install example
+sudo systemctl enable --now example</code></pre>
+
+    <hr />
+
+    <figure>
+      <img
+        src="${STORY_IMAGE_INLINE}"
+        alt="Service topology across portal, host, and package repository"
+        width="480"
+        height="120"
+      />
+      <figcaption>Figure 1. Request path from the host to the package repository.</figcaption>
+    </figure>
+
+    <table>
+      <caption>Supported release branches</caption>
+      <thead>
+        <tr>
+          <th scope="col">Version</th>
+          <th scope="col">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">9.x</th>
+          <td>Supported</td>
+        </tr>
+        <tr>
+          <th scope="row">8.x</th>
+          <td>Maintenance</td>
+        </tr>
+      </tbody>
+    </table>
+  </quantic-prose>
+`;
+export default {
+    title: 'Components/Display/Prose',
+    component: 'quantic-prose',
+    tags: ['autodocs'],
+    render: renderFixture,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Long-form article context for native HTML (headings, lists, code, tables, blockquotes). ' +
+                    'Apps must `@forward \'@ctrliq/quantic-css/prose\'` in global.scss so article typography is on ' +
+                    'the critical path and first paint matches before `<quantic-prose>` upgrades. The custom element ' +
+                    'only provides a landmark wrapper (`as`) and catalog API. Styles are not in the shadow root. ' +
+                    'Tutorial step lists use `<Steps>`, not prose `ol`.',
+            },
+            story: {
+                iframeHeight: '880px',
+            },
+        },
+    },
+};
+export const Article = story().render(renderFixture);

package/dist/quantic-components.js

@@ -367,7 +367,7 @@
                     const hasContent = slot
                         .assignedNodes({ flatten: true })
                         .some(__classPrivateFieldGet(this, _AutoHideEmptySlotsClass_isMeaningful, "f"));
-                    slot.style.display = hasContent ? 'block' : '';
+                    slot.style.display = hasContent ? 'revert-layer' : '';
                 });
             }
             static finalizeStyles(styles) {
@@ -65394,7 +65394,7 @@
             this.collapsible = false;
             this.handleToggle = () => {
                 this.dispatchEvent(new CustomEvent('expanded-changed', {
-                    detail: { expanded: !this.isAsideExpanded },
+                    detail: { expanded: this.isAsideExpanded === false },
                     bubbles: true,
                     composed: true,
                 }));
@@ -65413,12 +65413,15 @@
             }
         }
         render() {
+            const isAsideExpanded = this.isAsideExpanded !== false;
+            const toggleLabel = isAsideExpanded ? 'Collapse' : 'Expand sidebar';
+            const toggleTitle = isAsideExpanded ? 'Collapse sidebar' : 'Expand sidebar';
             return u$2 `
       <nav
-        class=${e$3({ main: true, 'is-aside-expanded': this.isAsideExpanded !== false })}
+        class=${e$3({ main: true, 'is-aside-expanded': isAsideExpanded })}
         role="navigation"
         aria-label=${this.ariaLabel}
-        aria-expanded=${this.isAsideExpanded !== false ? 'true' : 'false'}
+        aria-expanded=${isAsideExpanded ? 'true' : 'false'}
       >
         <div class="header">
           <slot name="header"></slot>
@@ -65437,19 +65440,19 @@
             ? u$2 `<div class="toggle-container">
                   <quantic-sidebar-menu-item
                     @click=${this.handleToggle}
-                    title=${this.isAsideExpanded ? 'Collapse sidebar' : 'Expand sidebar'}
-                    label=${this.isAsideExpanded ? 'Collapse' : 'Expand sidebar'}
+                    title=${toggleTitle}
+                    label=${toggleLabel}
                     variant=${SidebarMenuItemVariant.Secondary}
                   >
                     <quantic-icon-lucide-panel-left-close
                       slot="icon"
                       size="sm"
-                      ?hidden=${!this.isAsideExpanded}
+                      ?hidden=${!isAsideExpanded}
                     ></quantic-icon-lucide-panel-left-close>
                     <quantic-icon-lucide-panel-left
                       slot="icon"
                       size="sm"
-                      ?hidden=${this.isAsideExpanded}
+                      ?hidden=${isAsideExpanded}
                     ></quantic-icon-lucide-panel-left>
                   </quantic-sidebar-menu-item>
                 </div>`
@@ -67130,6 +67133,96 @@
         quanticElement('quantic-progress')
     ], exports.Progress);
 
+    const ProseAs = {
+        Article: 'article',
+        Section: 'section',
+        Div: 'div',
+    };
+
+    exports.Prose = class Prose extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.as = ProseAs.Article;
+        }
+        render() {
+            const Tag = s$5(this.as);
+            return u$2 `<${Tag}><slot></slot></${Tag}>`;
+        }
+    };
+    exports.Prose.meta = {
+        tag: 'quantic-prose',
+        description: 'Article context for long-form HTML (markdown, MDX, docs). Typography comes from ' +
+            '@ctrliq/quantic-css/prose on the critical path (`@forward` in global.scss) so first paint ' +
+            'matches before the custom element upgrades. The host only wraps slotted content in a ' +
+            'landmark (`as`) for catalog/Storybook — it does not ship article CSS. Use quantic-text for one-off strings.',
+        category: 'display',
+        slots: {
+            '': { description: 'Article content (headings, paragraphs, lists, pre, embedded components).' },
+        },
+        relatedTo: ['quantic-text', 'quantic-alert'],
+    };
+    exports.Prose.styles = i$7 `
+    :host {
+      display: block;
+    }
+
+    /* Slotted siblings ignore document > * + * margins for layout; flex gap handles rhythm. */
+    article,
+    section,
+    div {
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--quantic-spacing-5);
+    }
+
+    slot {
+      display: contents;
+    }
+
+    /* prose.scss margins stack with flex gap in the slot — zero them on slotted blocks. */
+    ::slotted(h1),
+    ::slotted(h2),
+    ::slotted(h3),
+    ::slotted(h4),
+    ::slotted(p),
+    ::slotted(ul),
+    ::slotted(ol),
+    ::slotted(pre),
+    ::slotted(blockquote),
+    ::slotted(figure),
+    ::slotted(table),
+    ::slotted(hr),
+    ::slotted(quantic-alert) {
+      margin-block: 0 !important;
+      margin-inline: 0;
+    }
+
+    /* row-gap (spacing-5) + extras mirror prose.scss rhythm without doubling. */
+    ::slotted(.lead),
+    ::slotted(.lede) {
+      margin-block-end: var(--quantic-spacing-3) !important;
+    }
+
+    ::slotted(h2) {
+      margin-block-start: var(--quantic-spacing-3) !important;
+    }
+
+    ::slotted(p + p) {
+      margin-block-start: var(--quantic-spacing-1) !important;
+    }
+  `;
+    __decorate([
+        prop({
+            type: 'ProseAs',
+            options: Object.values(ProseAs),
+            default: ProseAs.Article,
+            description: 'Landmark element wrapping the slot (article, section, or div).',
+        })
+    ], exports.Prose.prototype, "as", void 0);
+    exports.Prose = __decorate([
+        quanticElement('quantic-prose')
+    ], exports.Prose);
+
     exports.Skeleton = class Skeleton extends QuanticElement {
         render() {
             return b `
@@ -70498,6 +70591,7 @@
     exports.PopoverTrigger = PopoverTrigger;
     exports.ProgressColor = ProgressColor;
     exports.ProgressSize = ProgressSize;
+    exports.ProseAs = ProseAs;
     exports.QuanticElement = QuanticElement;
     exports.RadioGroupGap = RadioGroupGap;
     exports.RadioGroupVariant = RadioGroupVariant;