@ctrliq/quantic-components 1.85.1 → 1.86.0

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

@@ -90,7 +90,7 @@ export const WithEventHandlers = story({
       ?disabled=${disabled}
       ?invalid=${invalid}
     ></quantic-number-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>
 `);
 WithEventHandlers.parameters = {
@@ -123,9 +123,9 @@ export const FormAssociated = story({
         <quantic-button size="sm" type="reset" variant="outline">Reset</quantic-button>
       </div>
 
-      <quantic-text size="xs">
+      <p class="story-note">
         Demonstrates form-associated behavior. Submit to see value in Actions panel.
-      </quantic-text>
+      </p>
     </form>
   `);
 FormAssociated.parameters = {

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

@@ -153,7 +153,7 @@ export const InvalidGroup = story({
     args: { ...defaultArgs, name: 'invalid-group', required: true, invalid: true },
 }).render((args) => `
     <div>
-      <quantic-text variant="label">Select a payment method *</quantic-text>
+      <p class="story-label">Select a payment method *</p>
       <quantic-option-card-group ${groupAttrs(args)}>
         <quantic-option-card value="credit" variant="${OptionCardVariant.Ghost}">
           <quantic-icon-lucide-credit-card slot="icon"></quantic-icon-lucide-credit-card>
@@ -173,9 +173,9 @@ export const InvalidGroup = story({
           <div slot="description">Direct transfer from your bank account</div>
         </quantic-option-card>
       </quantic-option-card-group>
-      <quantic-text variant="helper" style="color: var(--quantic-text-error); margin-top: 0.5rem;">
+      <p class="story-note" style="color: var(--quantic-text-error); margin-top: var(--quantic-spacing-2);">
         Please select a payment method to continue
-      </quantic-text>
+      </p>
     </div>
   `);
 export const MixedVariants = story({ args: { ...defaultArgs, name: 'mixed-variants' } }).render((args) => `

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

@@ -14,7 +14,7 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `PanelGroup stacks panels vertically. Use the gap prop for named spacing — prefer this over Cluster when the children are panels.`,
+                component: `PanelGroup stacks panels vertically. Use the gap prop for named spacing.`,
             },
         },
     },

package/dist/quantic-components.js

@@ -6864,6 +6864,14 @@
         quanticElement('quantic-card')
     ], exports.Card);
 
+    /**
+     * @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`.
+     */
     exports.Grid = class Grid extends QuanticElement {
         constructor() {
             super(...arguments);
@@ -6883,10 +6891,16 @@
     };
     exports.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'],
     };
     exports.Grid.styles = i$7 `
     :host {
@@ -8603,11 +8617,13 @@
         quanticElement('quantic-checkbox')
     ], exports.Checkbox);
 
+    /** @deprecated `Cluster` is deprecated. Set `flex-direction` in your own stylesheet. */
     exports.ClusterAxis = void 0;
     (function (ClusterAxis) {
         ClusterAxis["Horizontal"] = "horizontal";
         ClusterAxis["Vertical"] = "vertical";
     })(exports.ClusterAxis || (exports.ClusterAxis = {}));
+    /** @deprecated `Cluster` is deprecated. Set `gap` to a `--quantic-spacing-*` token in your own stylesheet. */
     exports.ClusterGap = void 0;
     (function (ClusterGap) {
         ClusterGap["None"] = "none";
@@ -8617,6 +8633,7 @@
         ClusterGap["Large"] = "lg";
         ClusterGap["ExtraLarge"] = "xl";
     })(exports.ClusterGap || (exports.ClusterGap = {}));
+    /** @deprecated `Cluster` is deprecated. Set `align-items` in your own stylesheet. */
     exports.ClusterAlign = void 0;
     (function (ClusterAlign) {
         ClusterAlign["Start"] = "start";
@@ -8625,6 +8642,13 @@
         ClusterAlign["Stretch"] = "stretch";
     })(exports.ClusterAlign || (exports.ClusterAlign = {}));
 
+    /**
+     * @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`.
+     */
     exports.Cluster = class Cluster extends QuanticElement {
         constructor() {
             super(...arguments);
@@ -8650,13 +8674,15 @@
     };
     exports.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'],
     };
     exports.Cluster.styles = i$7 `
     :host {
@@ -70115,10 +70141,12 @@
         quanticElement('quantic-tag-group')
     ], exports.TagGroup);
 
+    /** @deprecated `Text` is deprecated. Set `font-family` from a `--quantic-font-family-*` token in your own stylesheet. */
     const TextVariant = {
         Body: 'body',
         Display: 'display',
     };
+    /** @deprecated `Text` is deprecated. Set `font-size` from a `--quantic-font-size-*` token in your own stylesheet. */
     const TextSize = {
         ExtraSmall: 'xs',
         Small: 'sm',
@@ -70145,6 +70173,13 @@
         ...Object.values(TextVariant).map(variantRule),
         ...Object.values(TextSize).flatMap((size) => Object.values(TextVariant).map((variant) => sizeRule(size, variant))),
     ].join('\n');
+    /**
+     * @deprecated The markup belongs to the consumer. `as` renders the consumer's own element
+     * inside a shadow root, where `prose.scss` and `type.scss` cannot reach it, type selectors
+     * stop matching, and `aria-labelledby` and `label[for]` cannot cross the boundary. Write
+     * the semantic element in your own document and let the typography stylesheet style it.
+     * Removed in the next major. See `rules/component-api-boundary.md`.
+     */
     exports.Text = class Text extends QuanticElement {
         constructor() {
             super(...arguments);
@@ -70163,13 +70198,16 @@
     };
     exports.Text.meta = {
         tag: 'quantic-text',
-        description: 'Typography component for rendering text with consistent sizing, weight, and color tokens. ' +
-            'Renders any HTML element via the `as` prop for semantic correctness.',
+        description: 'Deprecated typography wrapper. Write the semantic element in your own document, ' +
+            'where quantic-css type styles and IDREF-based accessibility can reach it.',
         category: 'display',
+        deprecated: {
+            reason: "Renders the consumer's element inside a shadow root, so the typography stylesheet cannot style it and IDREFs cannot cross the boundary.",
+        },
         slots: {
             '': { description: 'Text content to render.' },
         },
-        relatedTo: [],
+        relatedTo: ['quantic-prose'],
     };
     exports.Text.styles = r$6(rules);
     __decorate([