@ctrliq/quantic-components 1.85.1 → 1.86.1

package/dist/card/card-carousel.stories.js

@@ -92,9 +92,9 @@ const renderDensityWithBreakpoints = (density, cardCount, cardSize = CardSize.Me
     ${breakpoints
     .map((bp) => `
       <div>
-        <quantic-text as="h4" style="margin-bottom: var(--quantic-spacing-2);">
+        <h4 style="margin: 0 0 var(--quantic-spacing-2);">
           ${bp.name}
-        </quantic-text>
+        </h4>
         <div
           style="
             width: ${bp.width};

package/dist/card/card-group.stories.js

@@ -43,9 +43,9 @@ const renderDensityWithBreakpoints = (density, cardCount, cardSize) => html `
   <div style="display: flex; flex-direction: column; gap: var(--quantic-spacing-6); margin-bottom: var(--quantic-spacing-6); margin-inline: var(--quantic-spacing-4);">
     ${breakpoints.map((bp) => html `
       <div>
-        <quantic-text as="h4" style="margin-bottom: var(--quantic-spacing-2);">
+        <h4 style="margin: 0 0 var(--quantic-spacing-2);">
           ${bp.name} (${bp.width})
-        </quantic-text>
+        </h4>
         <div style="width: ${bp.width}; border: 1px dashed var(--quantic-color-blue-900); background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);">
           <quantic-card-group density=${density}>
             ${Array.from({ length: cardCount }, (_, i) => sampleCard(i + 1, cardSize))}

package/dist/checkbox/index.stories.js

@@ -65,7 +65,7 @@ export const WithEventHandlers = story({
       ?required=${required}
       ?invalid=${invalid}
     ></quantic-checkbox>
-    <quantic-text size="xs">See actions panel for more details.</quantic-text>
+    <p class="story-note">See actions panel for more details.</p>
   </div>
 `);
 export const FormAssociated = story({
@@ -109,11 +109,11 @@ export const FormAssociated = story({
         <quantic-button size="sm" type="reset" variant="outline">Reset</quantic-button>
       </div>
 
-      <quantic-text size="xs">
+      <p class="story-note">
         This story demonstrates form-associated behavior using ElementInternals.
         Try submitting or resetting the form to see the values in the Actions
         panel.
-      </quantic-text>
+      </p>
     </form>
   `);
 FormAssociated.parameters = {

package/dist/cluster/cluster.component.d.ts

@@ -1,6 +1,13 @@
 import { ClusterAxis, ClusterGap, ClusterAlign } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
+/**
+ * @deprecated Presentation belongs in CSS. Every prop this element carries maps
+ * one-to-one to a CSS property, so it is a `div` with a shadow root around it. For a
+ * uniform run of children use the group that names them: `TagGroup`, `BadgeGroup` or
+ * `ActionGroup`. Anything else is page layout, so write the flex rule in your own
+ * stylesheet. Removed in the next major. See `rules/component-api-boundary.md`.
+ */
 export declare class Cluster extends QuanticElement {
     static meta: ComponentMeta;
     axis: ClusterAxis;

package/dist/cluster/cluster.component.js

@@ -10,6 +10,13 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ClusterAxis, ClusterGap, ClusterAlign } from './index.constants';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { prop } from '../shared/component-meta.decorators';
+/**
+ * @deprecated Presentation belongs in CSS. Every prop this element carries maps
+ * one-to-one to a CSS property, so it is a `div` with a shadow root around it. For a
+ * uniform run of children use the group that names them: `TagGroup`, `BadgeGroup` or
+ * `ActionGroup`. Anything else is page layout, so write the flex rule in your own
+ * stylesheet. Removed in the next major. See `rules/component-api-boundary.md`.
+ */
 let Cluster = class Cluster extends QuanticElement {
     constructor() {
         super(...arguments);
@@ -35,13 +42,15 @@ let Cluster = class Cluster extends QuanticElement {
 };
 Cluster.meta = {
     tag: 'quantic-cluster',
-    description: 'Generic flex container that arranges child items along a horizontal or vertical axis with consistent spacing. ' +
-        'Use for grouping small inline elements like badges, tags, or buttons. ' +
-        'Prefer quantic-card-group for cards, quantic-panel-group for panels, and quantic-grid for multi-column responsive layouts — ' +
-        'those components provide semantics and density presets that Cluster does not.',
+    description: 'Deprecated generic flex container. Use quantic-tag-group, quantic-badge-group or ' +
+        'quantic-action-group for a uniform run of children, and a flex rule in your own ' +
+        'stylesheet for anything else.',
     category: 'layout',
+    deprecated: {
+        reason: 'Every prop maps one-to-one to a CSS property, so the element adds a shadow boundary and nothing else.',
+    },
     slots: { '': { description: 'Items to arrange.' } },
-    relatedTo: ['quantic-grid', 'quantic-card-group', 'quantic-panel-group'],
+    relatedTo: ['quantic-tag-group', 'quantic-badge-group', 'quantic-action-group'],
 };
 Cluster.styles = css `
     :host {

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

@@ -1,7 +1,9 @@
+/** @deprecated `Cluster` is deprecated. Set `flex-direction` in your own stylesheet. */
 export declare enum ClusterAxis {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
+/** @deprecated `Cluster` is deprecated. Set `gap` to a `--quantic-spacing-*` token in your own stylesheet. */
 export declare enum ClusterGap {
     None = "none",
     ExtraSmall = "xs",
@@ -10,6 +12,7 @@ export declare enum ClusterGap {
     Large = "lg",
     ExtraLarge = "xl"
 }
+/** @deprecated `Cluster` is deprecated. Set `align-items` in your own stylesheet. */
 export declare enum ClusterAlign {
     Start = "start",
     Center = "center",

package/dist/cluster/index.constants.js

@@ -1,8 +1,10 @@
+/** @deprecated `Cluster` is deprecated. Set `flex-direction` in your own stylesheet. */
 export var ClusterAxis;
 (function (ClusterAxis) {
     ClusterAxis["Horizontal"] = "horizontal";
     ClusterAxis["Vertical"] = "vertical";
 })(ClusterAxis || (ClusterAxis = {}));
+/** @deprecated `Cluster` is deprecated. Set `gap` to a `--quantic-spacing-*` token in your own stylesheet. */
 export var ClusterGap;
 (function (ClusterGap) {
     ClusterGap["None"] = "none";
@@ -12,6 +14,7 @@ export var ClusterGap;
     ClusterGap["Large"] = "lg";
     ClusterGap["ExtraLarge"] = "xl";
 })(ClusterGap || (ClusterGap = {}));
+/** @deprecated `Cluster` is deprecated. Set `align-items` in your own stylesheet. */
 export var ClusterAlign;
 (function (ClusterAlign) {
     ClusterAlign["Start"] = "start";

package/dist/code-input/index.stories.js

@@ -125,7 +125,7 @@ export const WithEventHandlers = story({
     return `
     <div style="display: flex; gap: .5em; flex-direction: column">
       <quantic-code-input value="${args.value.replace(/"/g, '&quot;')}" ${attrs}></quantic-code-input>
-      <quantic-text size="xs">See actions panel for more details.</quantic-text>
+      <p class="story-note">See actions panel for more details.</p>
     </div>
   `;
 });
@@ -169,11 +169,11 @@ export const FormAssociated = story({
         >
       </div>
 
-      <quantic-text size="xs">
+      <p class="story-note">
         This story demonstrates form-associated behavior using ElementInternals.
         Try submitting or resetting the form to see the values in the Actions
         panel.
-      </quantic-text>
+      </p>
     </form>
   `);
 FormAssociated.parameters = {

package/dist/field/field.stories.d.ts

@@ -10,6 +10,7 @@ type FieldArgs = {
 };
 declare const _default: {
     title: string;
+    component: string;
     tags: string[];
     parameters: {
         docs: {

package/dist/field/field.stories.js

@@ -2,6 +2,7 @@ import { story } from '../shared/story';
 import { FieldValidationStatus, FieldSize, FieldHintPosition } from './index.constants';
 export default {
     title: 'Components/Forms/Field',
+    component: 'quantic-field',
     tags: ['autodocs'],
     parameters: {
         docs: {

package/dist/grid/grid.component.d.ts

@@ -1,6 +1,14 @@
 import { GridDensity } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
+/**
+ * @deprecated Becoming internal anatomy. Grid sizes its children, so every layout it does
+ * not anticipate is unreachable from outside the shadow boundary. Use `CardGroup`, which
+ * owns its row sizing, or write the grid in your own stylesheet. `OptionCardGroup` is the
+ * equivalent when the children are option cards. The element stays registered because
+ * those two render it; the public export goes in the next major. See
+ * `rules/component-api-boundary.md`.
+ */
 export declare class Grid extends QuanticElement {
     static meta: ComponentMeta;
     density: GridDensity;

package/dist/grid/grid.component.js

@@ -10,6 +10,14 @@ import { GridDensity } from './index.constants';
 import { ContainerSizeBreakpoint } from '../shared/shared.constants';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { prop } from '../shared/component-meta.decorators';
+/**
+ * @deprecated Becoming internal anatomy. Grid sizes its children, so every layout it does
+ * not anticipate is unreachable from outside the shadow boundary. Use `CardGroup`, which
+ * owns its row sizing, or write the grid in your own stylesheet. `OptionCardGroup` is the
+ * equivalent when the children are option cards. The element stays registered because
+ * those two render it; the public export goes in the next major. See
+ * `rules/component-api-boundary.md`.
+ */
 let Grid = class Grid extends QuanticElement {
     constructor() {
         super(...arguments);
@@ -29,10 +37,16 @@ let Grid = class Grid extends QuanticElement {
 };
 Grid.meta = {
     tag: 'quantic-grid',
-    description: 'CSS grid layout container that arranges child items into a responsive multi-column grid. ' +
-        'Column count and gap scale automatically with container width based on the chosen density preset.',
+    description: 'Deprecated public export, becoming internal anatomy of quantic-card-group and ' +
+        'quantic-option-card-group. Use quantic-card-group, quantic-option-card-group for ' +
+        'option cards, or write the grid in your own stylesheet.',
     category: 'layout',
+    deprecated: {
+        use: 'quantic-card-group',
+        reason: 'Grid sizes its children, so any track or row rule it does not anticipate cannot be reached from outside.',
+    },
     slots: { '': { description: 'Grid items to be laid out.' } },
+    relatedTo: ['quantic-card-group', 'quantic-option-card-group'],
 };
 Grid.styles = css `
     :host {