@uncinq/css-components 1.9.0 → 1.10.0

package/css/components/panel.css

@@ -351,28 +351,19 @@
 
   /* ── Trigger ───────────────────────────────────────────────────────
    * Once the panel has gone inline there is nothing left to open, so its
-   * trigger goes with it. Kept here rather than restated by every host.
+   * trigger goes with it.
    *
-   * Only reaches a trigger that is the panel's own previous sibling: adjacency
-   * is what proves intent, so any button there qualifies. A trigger placed
-   * further away — inside the heading that precedes the panel, as the filters
-   * do — is not covered and stays visible. */
-
-  @media (--sm) {
-    button:has(+ .panel-inline-sm) { display: none; }
-  }
-
-  @media (--md) {
-    button:has(+ .panel-inline-md) { display: none; }
-  }
-
-  @media (--lg) {
-    button:has(+ .panel-inline-lg) { display: none; }
-  }
-
-  @media (--xl) {
-    button:has(+ .panel-inline-xl) { display: none; }
-  }
+   * The trigger carries its own breakpoint rather than being reached from the
+   * panel: the only reliable link between the two is data-target matching the
+   * id, and no selector can compare two values. Any positional rule would work
+   * only as long as nobody moves the markup — and a filter button lives in the
+   * page heading, not beside the panel. Both classes come from one site param,
+   * so the pair cannot disagree. */
+
+  @media (--sm) { .panel-trigger-sm { display: none; } }
+  @media (--md) { .panel-trigger-md { display: none; } }
+  @media (--lg) { .panel-trigger-lg { display: none; } }
+  @media (--xl) { .panel-trigger-xl { display: none; } }
 
   /* ── Entry transition ──────────────────────────────────────────────
    * Opening is a discrete display change, so the start state has to be

package/css/components/surtitle.css

@@ -0,0 +1,27 @@
+/* components/surtitle.css */
+/*
+ * .surtitle — eyebrow label displayed above a heading.
+ *
+ * Expected HTML:
+ *   <p class="surtitle">Category</p>
+ *   <h2>Main title</h2>
+ */
+@layer components {
+  .surtitle {
+    background-color: var(--surtitle-color-background);
+    border-color: var(--surtitle-border-color);
+    border-radius: var(--surtitle-border-radius);
+    border-style: var(--surtitle-border-style);
+    border-width: var(--surtitle-border-width);
+    color: var(--surtitle-color-text);
+    font-size: var(--surtitle-font-size);
+    font-weight: var(--surtitle-font-weight);
+    letter-spacing: var(--surtitle-letter-spacing);
+    line-height: var(--surtitle-line-height);
+    margin-block-end: var(--surtitle-margin-block-end);
+    margin-block-start: var(--surtitle-margin-block-start);
+    padding-block: var(--surtitle-padding-block);
+    padding-inline: var(--surtitle-padding-inline);
+    text-transform: var(--surtitle-text-transform);
+  }
+}

package/css/index.css

@@ -25,3 +25,4 @@
 @import 'components/nav-title.css';
 @import 'components/pagination.css';
 @import 'components/panel.css';
+@import 'components/surtitle.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/css-components",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Framework-agnostic CSS component implementations.",
   "license": "MIT",
   "repository": {