@ctrliq/quantic-components 1.67.3 → 1.67.5

package/dist/shared/auto-hide-empty-slots.mixin.js

@@ -1,4 +1,5 @@
 import { unsafeCSS, } from 'lit';
+import { escapeCssString, whenSlotPresent } from './slot-utils';
 /**
  * Mixin that automatically hides empty named slots using CSS only.
  *
@@ -31,11 +32,13 @@ export const AutoHideEmptySlotsMixin = (superClass, namedSlots = []) => {
         ? style.cssText
         : Array.from(style.cssRules, (rule) => rule.cssText).join('\n');
     const slotRulesCSS = namedSlots
-        .map((name) => [
-        `slot[name="${name}"] { display: none; }`,
-        `:host(:has([slot="${name}"])) slot[name="${name}"] { display: revert-layer; }`,
-        `@scope { :scope:has([slot="${name}"]) slot[name="${name}"] { display: revert-layer; } }`,
-    ].join(' '))
+        .map((name) => {
+        const escaped = escapeCssString(name);
+        return [
+            `slot[name="${escaped}"] { display: none; }`,
+            whenSlotPresent(name, unsafeCSS(`slot[name="${escaped}"] { display: revert-layer; }`)).cssText,
+        ].join(' ');
+    })
         .join(' ');
     class AutoHideEmptySlotsClass extends superClass {
         static finalizeStyles(styles) {

package/dist/shared/slot-utils.d.ts

@@ -22,3 +22,22 @@ export declare function onSlotChange(setter: (has: boolean) => void): (e: Event)
  * html`<slot @slotchange=${onSlotTextChange((t) => (this._labelText = t))}></slot>`
  */
 export declare function onSlotTextChange(setter: (text: string) => void): (e: Event) => void;
+import { type CSSResult } from 'lit';
+/**
+ * Generates a CSSResult that applies `rules` when the host has a light DOM
+ * child with the given slot name. Two forms are emitted for cross-browser
+ * Declarative Shadow DOM compatibility:
+ *
+ * - `:host(:has([slot="name"])) { rules }` — standard shadow DOM (Safari, Firefox)
+ * - `@scope { :scope:has([slot="name"]) { rules } }` — Chrome DSD
+ *
+ * @example
+ * whenSlotPresent('action-icon', css`
+ *   .main { padding-right: calc(var(--quantic-component-card-padding) * 2); }
+ * `)
+ */
+export declare function whenSlotPresent(slotName: string, rules: CSSResult): CSSResult;
+/**
+ * Escapes a value for safe interpolation inside a double-quoted CSS string.
+ */
+export declare function escapeCssString(value: string): string;

package/dist/shared/slot-utils.js

@@ -36,3 +36,29 @@ export function onSlotChange(setter) {
 export function onSlotTextChange(setter) {
     return (e) => setter(slotTextContent(e.target));
 }
+import { unsafeCSS } from 'lit';
+/**
+ * Generates a CSSResult that applies `rules` when the host has a light DOM
+ * child with the given slot name. Two forms are emitted for cross-browser
+ * Declarative Shadow DOM compatibility:
+ *
+ * - `:host(:has([slot="name"])) { rules }` — standard shadow DOM (Safari, Firefox)
+ * - `@scope { :scope:has([slot="name"]) { rules } }` — Chrome DSD
+ *
+ * @example
+ * whenSlotPresent('action-icon', css`
+ *   .main { padding-right: calc(var(--quantic-component-card-padding) * 2); }
+ * `)
+ */
+export function whenSlotPresent(slotName, rules) {
+    const r = rules.cssText;
+    const name = escapeCssString(slotName);
+    return unsafeCSS(`:host(:has([slot="${name}"])) { ${r} } ` +
+        `@scope { :scope:has([slot="${name}"]) { ${r} } }`);
+}
+/**
+ * Escapes a value for safe interpolation inside a double-quoted CSS string.
+ */
+export function escapeCssString(value) {
+    return value.replace(/["\\]/g, '\\$&');
+}

package/dist/table/table.component.js

@@ -148,7 +148,7 @@ __decorate([
     prop({ type: 'TableVariant', options: Object.values(TableVariant), default: TableVariant.Outline, reflect: true, description: 'Visual style. "outline" adds row borders; "striped" alternates row backgrounds; "minimal" removes borders.' })
 ], Table.prototype, "variant", void 0);
 __decorate([
-    prop({ type: 'boolean', default: 'false', description: 'Reduces cell padding for compact display.' })
+    prop({ type: 'boolean', default: 'false', reflect: true, description: 'Reduces cell padding for compact display.' })
 ], Table.prototype, "dense", void 0);
 __decorate([
     prop({ type: 'string', attribute: 'aria-label', description: 'Accessible label for the table.' })

package/dist/types/card/card.component.d.ts

@@ -13,8 +13,7 @@ export declare class Card extends Card_base {
     target: string | undefined;
     rel: string | undefined;
     download: string | undefined;
-    private hasActionIconSlot;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     render(): import("lit").TemplateResult;
 }
 export {};

package/dist/types/dropdown-menu/group.component.d.ts

@@ -4,8 +4,7 @@ declare const DropdownMenuGroup_base: typeof QuanticElement;
 export declare class DropdownMenuGroup extends DropdownMenuGroup_base {
     static meta: ComponentMeta;
     label: string;
-    private hasLabelSlot;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     render(): import("lit").TemplateResult<1>;
 }
 export {};

package/dist/types/field/field.component.d.ts

@@ -11,9 +11,6 @@ export declare class Field extends QuanticElement {
     status: FieldValidationStatus | undefined;
     size: FieldSize;
     hintPosition: FieldHintPosition;
-    private hasLabelSlot;
-    private hasHintSlot;
-    private hasMessageSlot;
     static styles: import("lit").CSSResult[];
     render(): import("lit").TemplateResult<1>;
 }

package/dist/types/inline-edit/index.d.ts

@@ -5,10 +5,9 @@ export declare class InlineEdit extends QuanticElement {
     label: string;
     active: boolean;
     invalid: boolean;
-    private hasLabelSlot;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     private activate;
     private deactivate;
     private handleActivateClick;

package/dist/types/shared/slot-utils.d.ts

@@ -22,3 +22,22 @@ export declare function onSlotChange(setter: (has: boolean) => void): (e: Event)
  * html`<slot @slotchange=${onSlotTextChange((t) => (this._labelText = t))}></slot>`
  */
 export declare function onSlotTextChange(setter: (text: string) => void): (e: Event) => void;
+import { type CSSResult } from 'lit';
+/**
+ * Generates a CSSResult that applies `rules` when the host has a light DOM
+ * child with the given slot name. Two forms are emitted for cross-browser
+ * Declarative Shadow DOM compatibility:
+ *
+ * - `:host(:has([slot="name"])) { rules }` — standard shadow DOM (Safari, Firefox)
+ * - `@scope { :scope:has([slot="name"]) { rules } }` — Chrome DSD
+ *
+ * @example
+ * whenSlotPresent('action-icon', css`
+ *   .main { padding-right: calc(var(--quantic-component-card-padding) * 2); }
+ * `)
+ */
+export declare function whenSlotPresent(slotName: string, rules: CSSResult): CSSResult;
+/**
+ * Escapes a value for safe interpolation inside a double-quoted CSS string.
+ */
+export declare function escapeCssString(value: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrliq/quantic-components",
-  "version": "1.67.3",
+  "version": "1.67.5",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {