@uncinq/css-components 0.3.0 → 0.4.0

package/css/component/alert.css

@@ -1,7 +1,9 @@
 /* components/alert.css */
 @layer components {
   .alert {
+    --color-link: var(--alert-color-text);
     background-color: var(--alert-color-bg);
+    border: var(--alert-border);
     border-radius: var(--alert-border-radius);
     color: var(--alert-color-text);
     display: flex;

package/css/component/badge.css

@@ -9,15 +9,55 @@
     font-size: var(--badge-font-size);
     font-weight: var(--badge-font-weight);
     padding: var(--badge-padding-y) var(--badge-padding-x);
+    text-decoration: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    a.badge:hover {
+      background-color: var(--badge-color-bg-hover, var(--badge-color-bg));
+      color: var(--badge-color-text-hover, var(--badge-color-text));
+    }
   }
 
   /* Variants */
-  .badge-danger    { --badge-color-bg: var(--color-danger-muted);    --badge-color-text: var(--color-danger-strong); }
-  .badge-dark      { --badge-color-bg: var(--color-dark-muted);      --badge-color-text: var(--color-dark-strong); }
-  .badge-info      { --badge-color-bg: var(--color-info-muted);      --badge-color-text: var(--color-info-strong); }
-  .badge-light     { --badge-color-bg: var(--color-light-muted);     --badge-color-text: var(--color-light-strong); }
-  .badge-primary   { --badge-color-bg: var(--color-primary-muted);   --badge-color-text: var(--color-primary-strong); }
-  .badge-secondary { --badge-color-bg: var(--color-secondary-muted); --badge-color-text: var(--color-secondary-strong); }
-  .badge-success   { --badge-color-bg: var(--color-success-muted);   --badge-color-text: var(--color-success-strong); }
-  .badge-warning   { --badge-color-bg: var(--color-warning-muted);   --badge-color-text: var(--color-warning-strong); }
+  .badge-danger    { 
+    --badge-color-bg: var(--color-danger);
+    --badge-color-bg-hover: var(--color-danger-strong);
+    --badge-color-text: var(--color-text-on-danger);
+  }
+  .badge-dark      { 
+    --badge-color-bg: var(--color-dark);
+    --badge-color-bg-hover: var(--color-dark-strong);
+    --badge-color-text: var(--color-text-on-dark);
+  }
+  .badge-info      { 
+    --badge-color-bg: var(--color-info);
+    --badge-color-bg-hover: var(--color-info-strong);
+    --badge-color-text: var(--color-text-on-info);
+  }
+  .badge-light     { 
+    --badge-color-bg: var(--color-light);
+    --badge-color-bg-hover: var(--color-light-strong);
+    --badge-color-text: var(--color-text-on-light);
+  }
+  .badge-primary   { 
+    --badge-color-bg: var(--color-primary);
+    --badge-color-bg-hover: var(--color-primary-strong);
+    --badge-color-text: var(--color-text-on-primary);
+  }
+  .badge-secondary { 
+    --badge-color-bg: var(--color-secondary);
+    --badge-color-bg-hover: var(--color-secondary-strong);
+    --badge-color-text: var(--color-text-on-secondary);
+  }
+  .badge-success   { 
+    --badge-color-bg: var(--color-success);
+    --badge-color-bg-hover: var(--color-success-strong);
+    --badge-color-text: var(--color-text-on-success);
+  }
+  .badge-warning   { 
+    --badge-color-bg: var(--color-warning);
+    --badge-color-bg-hover: var(--color-warning-strong);
+    --badge-color-text: var(--color-text-on-warning);
+  }
 }

package/css/component/banner.css

@@ -1,6 +1,7 @@
 /* components/banner.css */
 @layer components {
   .banner {
+    --color-link: var(--alert-color-text);
     background-color: var(--alert-color-bg);
     border-radius: var(--alert-border-radius);
     color: var(--alert-color-text);

package/css/component/breadcrumb.css

@@ -1,8 +1,8 @@
 /* components/breadcrumb.css */
 @layer components {
   .breadcrumb-wrapper {
-    border-bottom: var(--breadcrumb-border-width) solid var(--breadcrumb-color-border);
-    border-top: var(--breadcrumb-border-width) solid var(--breadcrumb-color-border);
+    border-bottom: var(--breadcrumb-border);
+    border-top: var(--breadcrumb-border);
     padding-block: var(--breadcrumb-padding);
 
     ol {

package/css/component/btn-close.css

@@ -4,10 +4,10 @@
   .btn-close {
     align-items: center;
     appearance: none;
-    background-color: var(--btn-close-color-bg, var(--btn-color-bg));
-    border: var(--btn-close-border-width, var(--btn-border-width)) var(--btn-close-border-style, var(--btn-border-style)) var(--btn-close-color-border, var(--btn-color-border));
+    background-color: var(--btn-close-color-bg, var(--btn-control-color-bg));
+    border: var(--btn-close-border-width, var(--btn-border-width)) var(--btn-close-border-style, var(--btn-border-style)) var(--btn-close-color-border, var(--btn-control-color-border));
     border-radius: var(--btn-close-border-radius, var(--btn-border-radius));
-    color: var(--btn-close-color-text, var(--btn-color-text));
+    color: var(--btn-close-color-text, var(--btn-control-color-text));
     cursor: pointer;
     display: inline-flex;
     font-size: var(--btn-close-font-size, var(--btn-font-size));
@@ -31,8 +31,8 @@
 
     @media (hover: hover) and (pointer: fine) {
       &:hover {
-        background-color: var(--btn-close-color-bg-hover, var(--btn-color-bg-hover));
-        color: var(--btn-close-color-text-hover, var(--btn-color-text-hover));
+        background-color: var(--btn-close-color-bg-hover, var(--btn-control-color-bg-hover));
+        color: var(--btn-close-color-text-hover, var(--btn-control-color-text-hover));
         text-decoration-color: var(--btn-close-color-text-decoration-hover, var(--btn-color-text-decoration-hover));
       }
     }

package/css/component/btn-filter.css

@@ -0,0 +1,22 @@
+/* component/btn-filter.css */
+/* Filters toggle button — requires .btn base class */
+@layer components {
+  .btn-filter {
+    /* Scope --btn-color-* to control values, allow per-button overrides */
+    --btn-color-bg:           var(--btn-filter-color-bg, var(--btn-control-color-bg));
+    --btn-color-bg-hover:     var(--btn-filter-color-bg-hover, var(--btn-control-color-bg-hover));
+    --btn-color-border:       var(--btn-filter-color-border, var(--btn-control-color-border));
+    --btn-color-border-hover: var(--btn-filter-color-border-hover, var(--btn-control-color-border-hover));
+    --btn-color-text:         var(--btn-filter-color-text, var(--btn-control-color-text));
+    --btn-color-text-hover:   var(--btn-filter-color-text-hover, var(--btn-control-color-text-hover));
+
+    &::before {
+      background-color: currentColor;
+      content: '';
+      flex-shrink: 0;
+      height: var(--icon-size);
+      mask: var(--icon-filter) center / var(--icon-size) no-repeat;
+      width: var(--icon-size);
+    }
+  }
+}

package/css/component/btn-menu.css

@@ -4,16 +4,17 @@
   .btn-menu {
     align-items: center;
     appearance: none;
-    background-color: var(--btn-menu-color-bg, var(--btn-color-bg));
-    border: var(--btn-menu-border-width, var(--btn-border-width)) var(--btn-menu-border-style, var(--btn-border-style)) var(--btn-menu-color-border, var(--btn-color-border));
+    background-color: var(--btn-menu-color-bg, var(--btn-control-color-bg));
+    border: var(--btn-menu-border-width, var(--btn-border-width)) var(--btn-menu-border-style, var(--btn-border-style)) var(--btn-menu-color-border, var(--btn-control-color-border));
     border-radius: var(--btn-menu-border-radius, var(--btn-border-radius));
-    color: var(--btn-menu-color-text, var(--btn-color-text));
+    color: var(--btn-menu-color-text, var(--btn-control-color-text));
     cursor: pointer;
     display: inline-flex;
     font-size: var(--btn-menu-font-size, var(--btn-font-size));
     font-weight: var(--btn-menu-font-weight, var(--btn-font-weight));
     gap: var(--btn-menu-gap, var(--btn-gap));
-    padding: var(--btn-menu-padding-y, var(--btn-padding-y)) var(--btn-menu-padding-x, var(--btn-padding-x));
+    padding-block: var(--btn-menu-padding-y, var(--btn-padding-y));
+    padding-inline: var(--btn-menu-padding-x, var(--btn-padding-x));
     text-decoration-color: var(--btn-menu-color-text-decoration, var(--btn-color-text-decoration));
     text-decoration-line: var(--btn-text-decoration-line);
     text-decoration-thickness: var(--text-decoration-thickness);
@@ -31,8 +32,8 @@
 
     @media (hover: hover) and (pointer: fine) {
       &:hover {
-        background-color: var(--btn-menu-color-bg-hover, var(--btn-color-bg-hover));
-        color: var(--btn-menu-color-text-hover, var(--btn-color-text-hover));
+        background-color: var(--btn-menu-color-bg-hover, var(--btn-control-color-bg-hover));
+        color: var(--btn-menu-color-text-hover, var(--btn-control-color-text-hover));
         text-decoration-color: var(--btn-menu-color-text-decoration-hover, var(--btn-color-text-decoration-hover));
       }
     }

package/css/component/btn-search.css

@@ -1,24 +1,14 @@
 /* component/btn-search.css */
-/* Search button */
+/* Search button — requires .btn base class */
 @layer components {
   .btn-search {
-    align-items: center;
-    appearance: none;
-    background-color: var(--btn-search-color-bg, var(--btn-color-bg));
-    border: var(--btn-search-border-width, var(--btn-border-width)) var(--btn-search-border-style, var(--btn-border-style)) var(--btn-search-color-border, var(--btn-color-border));
-    border-radius: var(--btn-search-border-radius, var(--btn-border-radius));
-    color: var(--btn-search-color-text, var(--btn-color-text));
-    cursor: pointer;
-    display: inline-flex;
-    font-size: var(--btn-search-font-size, var(--btn-font-size));
-    font-weight: var(--btn-search-font-weight, var(--btn-font-weight));
-    gap: var(--btn-search-gap, var(--btn-gap));
-    padding: var(--btn-search-padding-y, var(--btn-padding-y)) var(--btn-search-padding-x, var(--btn-padding-x));
-    text-decoration-color: var(--btn-search-color-text-decoration, var(--btn-color-text-decoration));
-    text-decoration-line: var(--btn-text-decoration-line);
-    text-decoration-thickness: var(--text-decoration-thickness);
-    text-transform: var(--btn-text-transform);
-    text-underline-offset: var(--text-decoration-offset);
+    /* Scope --btn-color-* to control values, allow per-button overrides */
+    --btn-color-bg:           var(--btn-search-color-bg, var(--btn-control-color-bg));
+    --btn-color-bg-hover:     var(--btn-search-color-bg-hover, var(--btn-control-color-bg-hover));
+    --btn-color-border:       var(--btn-search-color-border, var(--btn-control-color-border));
+    --btn-color-border-hover: var(--btn-search-color-border-hover, var(--btn-control-color-border-hover));
+    --btn-color-text:         var(--btn-search-color-text, var(--btn-control-color-text));
+    --btn-color-text-hover:   var(--btn-search-color-text-hover, var(--btn-control-color-text-hover));
 
     &::before {
       background-color: currentColor;
@@ -28,17 +18,5 @@
       mask: var(--icon-search) center / var(--icon-size) no-repeat;
       width: var(--icon-size);
     }
-
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background-color: var(--btn-search-color-bg-hover, var(--btn-color-bg-hover));
-        color: var(--btn-search-color-text-hover, var(--btn-color-text-hover));
-        text-decoration-color: var(--btn-search-color-text-decoration-hover, var(--btn-color-text-decoration-hover));
-      }
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-      transition: var(--btn-transition);
-    }
   }
 }

package/css/component/btn-share.css

@@ -0,0 +1,22 @@
+/* component/btn-share.css */
+/* Share button — requires .btn base class */
+@layer components {
+  .btn-share {
+    /* Scope --btn-color-* to control values, allow per-button overrides */
+    --btn-color-bg:           var(--btn-share-color-bg, var(--btn-control-color-bg));
+    --btn-color-bg-hover:     var(--btn-share-color-bg-hover, var(--btn-control-color-bg-hover));
+    --btn-color-border:       var(--btn-share-color-border, var(--btn-control-color-border));
+    --btn-color-border-hover: var(--btn-share-color-border-hover, var(--btn-control-color-border-hover));
+    --btn-color-text:         var(--btn-share-color-text, var(--btn-control-color-text));
+    --btn-color-text-hover:   var(--btn-share-color-text-hover, var(--btn-control-color-text-hover));
+
+    &::before {
+      background-color: currentColor;
+      content: '';
+      flex-shrink: 0;
+      height: var(--icon-size);
+      mask: var(--icon-share) center / var(--icon-size) no-repeat;
+      width: var(--icon-size);
+    }
+  }
+}

package/css/component/btn-toc.css

@@ -0,0 +1,22 @@
+/* component/btn-toc.css */
+/* Table of contents toggle button — requires .btn base class */
+@layer components {
+  .btn-toc {
+    /* Scope --btn-color-* to control values, allow per-button overrides */
+    --btn-color-bg:           var(--btn-toc-color-bg, var(--btn-control-color-bg));
+    --btn-color-bg-hover:     var(--btn-toc-color-bg-hover, var(--btn-control-color-bg-hover));
+    --btn-color-border:       var(--btn-toc-color-border, var(--btn-control-color-border));
+    --btn-color-border-hover: var(--btn-toc-color-border-hover, var(--btn-control-color-border-hover));
+    --btn-color-text:         var(--btn-toc-color-text, var(--btn-control-color-text));
+    --btn-color-text-hover:   var(--btn-toc-color-text-hover, var(--btn-control-color-text-hover));
+
+    &::before {
+      background-color: currentColor;
+      content: '';
+      flex-shrink: 0;
+      height: var(--icon-size);
+      mask: var(--icon-toc) center / var(--icon-size) no-repeat;
+      width: var(--icon-size);
+    }
+  }
+}

package/css/component/button.css

@@ -6,6 +6,7 @@
     background-color: var(--btn-color-bg);
     border: var(--btn-border-width) var(--btn-border-style) var(--btn-color-border);
     border-radius: var(--btn-border-radius);
+    box-shadow: var(--btn-shadow);
     color: var(--btn-color-text);
     cursor: pointer;
     display: inline-flex;
@@ -13,7 +14,8 @@
     font-weight: var(--btn-font-weight);
     gap: var(--btn-gap);
     justify-content: center;
-    padding: var(--btn-padding-y) var(--btn-padding-x);
+    padding-block: var(--btn-padding-y);
+    padding-inline: var(--btn-padding-x);
     text-decoration-color: var(--btn-color-text-decoration);
     text-decoration-line: var(--btn-text-decoration-line);
     text-decoration-thickness: var(--text-decoration-thickness);
@@ -21,20 +23,21 @@
     text-underline-offset: var(--text-decoration-offset);
 
     &:focus-visible {
-      outline: var(--focus-outline-width, 2px) solid var(--color-focus);
+      outline: var(--focus);
       outline-offset: var(--focus-outline-offset, 2px);
     }
 
     &:disabled,
     &[aria-disabled='true'] {
       cursor: not-allowed;
-      opacity: 0.5;
+      opacity: var(--opacity-disabled);
     }
 
     @media (hover: hover) and (pointer: fine) {
       &:hover {
         background-color: var(--btn-color-bg-hover);
         border-color: var(--btn-color-border-hover);
+        box-shadow: var(--btn-shadow-hover);
         color: var(--btn-color-text-hover);
         text-decoration-color: var(--btn-color-text-decoration-hover);
       }
@@ -46,6 +49,15 @@
   }
 
   /* Variants */
+  .btn-control {
+    --btn-color-bg: var(--btn-control-color-bg);
+    --btn-color-bg-hover: var(--btn-control-color-bg-hover);
+    --btn-color-border: var(--btn-control-color-border);
+    --btn-color-border-hover: var(--btn-control-color-border-hover);
+    --btn-color-text: var(--btn-control-color-text);
+    --btn-color-text-hover: var(--btn-control-color-text-hover);
+  }
+
   .btn-danger {
     --btn-color-bg: var(--color-danger);
     --btn-color-bg-hover: var(--color-danger-strong);

package/css/component/card.css

@@ -17,7 +17,7 @@
 @layer components {
   .card {
     background-color: var(--card-color-bg);
-    border: var(--card-border-width) solid var(--card-color-border);
+    border: var(--card-border);
     border-radius: var(--card-border-radius);
     box-shadow: var(--card-shadow);
     color: var(--card-color-text);
@@ -30,8 +30,24 @@
       flex-direction: column;
       flex: 1;
       gap: var(--card-gap);
-      padding: var(--card-padding);
+      padding-block: var(--card-padding-y);
+      padding-inline: var(--card-padding-x);
       text-decoration: none;
+
+      > * {
+        margin-block: 0;
+      }
+    }
+
+    a.content {
+      &::before {
+        content: '';
+        inset: 0;
+        position: absolute;
+      }
+      &:focus-visible {
+        outline: none;
+      }
     }
 
     .name {
@@ -48,7 +64,24 @@
     .media {
       --media-ratio: var(--card-media-ratio);
       --media-color-bg: var(--card-media-color-bg);
-      order: -1;
+      order: var(--card-media-order, -1);
+    }
+
+    /* Focus */
+    &:has(a.content:focus-visible) {
+      outline: var(--focus);
+      outline-offset: var(--focus-outline-offset);
+    }
+
+    /* Hover */
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        --card-shadow: var(--card-shadow-hover);
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: var(--card-transition);
     }
   }
 }

package/css/component/drawer.css

@@ -34,20 +34,23 @@
     color: var(--drawer-color-text);
     display: flex;
     flex-direction: column;
-    inset-inline-start: var(--drawer-start);
-    inset-inline-end: var(--drawer-end);
+    inset-inline-start: var(--drawer-start, auto);
+    inset-inline-end: var(--drawer-end, 0);
     max-width: 100%;
     overflow: hidden;
     position: fixed;
     top: var(--drawer-top, 0);
-    transform: var(--drawer-translate);
-    transition-duration: var(--drawer-transition-duration);
-    transition-property: transform, visibility;
-    transition-timing-function: var(--drawer-transition-easing);
+    transform: var(--drawer-translate, translateX(100%));
     visibility: hidden;
     width: var(--drawer-width);
     z-index: var(--drawer-z-index);
 
+    @media (prefers-reduced-motion: no-preference) {
+      transition-duration: var(--drawer-transition-duration);
+      transition-property: transform, visibility;
+      transition-timing-function: var(--drawer-transition-easing);
+    }
+
     /* Visible during transitions and when open */
     &.show,
     &.showing,
@@ -154,6 +157,7 @@
   /* ── Backdrop ────────────────────────────────────────────────────── */
 
   .drawer-backdrop {
+    backdrop-filter: blur(var(--drawer-backdrop-blur));
     background-color: var(--drawer-backdrop-color);
     inset: 0;
     position: fixed;
@@ -161,7 +165,10 @@
 
     &.fade {
       opacity: 0;
-      transition: opacity var(--drawer-transition-duration) var(--drawer-transition-easing);
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: opacity var(--drawer-transition-duration) var(--drawer-transition-easing);
+      }
     }
 
     &.show {

package/css/component/dropdown.css

@@ -57,6 +57,11 @@
       width: var(--dropdown-icon-size);
     }
 
+    &:focus-visible {
+      outline: var(--focus);
+      outline-offset: var(--focus-outline-offset);
+    }
+
     &[aria-expanded="true"]::after {
       rotate: 180deg;
     }
@@ -78,12 +83,15 @@
     position: absolute;
     top: 100%;
     transform: translateY(var(--dropdown-translate-y));
-    transition-duration: var(--dropdown-transition-duration);
-    transition-property: opacity, transform, visibility;
-    transition-timing-function: var(--dropdown-transition-easing);
     visibility: hidden;
     z-index: var(--dropdown-z-index);
 
+    @media (prefers-reduced-motion: no-preference) {
+      transition-duration: var(--dropdown-transition-duration);
+      transition-property: opacity, transform, visibility;
+      transition-timing-function: var(--dropdown-transition-easing);
+    }
+
     /* Visible during all transition phases */
     &.show,
     &.showing,
@@ -105,7 +113,8 @@
       color: var(--dropdown-color-text);
       font-size: var(--dropdown-item-font-size);
       display: block;
-      padding: var(--dropdown-item-padding);
+      padding-block: var(--dropdown-item-padding-y);
+      padding-inline: var(--dropdown-item-padding-x);
       text-decoration: none;
       white-space: nowrap;
 

package/css/component/embed.css

@@ -10,7 +10,7 @@
 @layer components {
   .embed {
     aspect-ratio: var(--embed-ratio);
-    border: var(--embed-border-width) var(--embed-border-style) var(--embed-color-border);
+    border: var(--embed-border);
     border-radius: var(--embed-border-radius);
     box-shadow: var(--embed-box-shadow);
     overflow: hidden;

package/css/component/form.css

@@ -0,0 +1,24 @@
+/* components/form.css */
+@layer components {
+  .form {
+    display: grid;
+    gap: var(--gap);
+    grid-template-columns: repeat(auto-fill, minmax(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 1fr));
+
+    .help {
+      color: var(--help-color-text);
+      font-size: var(--help-font-size);
+      font-weight: var(--help-font-weight);
+      margin: var(--help-margin);
+    }
+
+    .actions,
+    .full {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .form-check {
+    display: flex;
+  }
+}

package/css/component/items.css

@@ -0,0 +1,18 @@
+/* components/items.css */
+/*
+ * .items — responsive grid.
+ *
+ * Structure:
+ *   .items
+ *     .item
+ */
+@layer components {
+  .items {
+    container-type: inline-size;
+    container-name: items;
+    display: grid;
+    gap: var(--items-gap);
+    grid-template-columns: repeat(var(--items-cols, auto-fill), minmax(var(--items-min-width, 30ch), 1fr));
+    justify-content: start;
+  }
+}

package/css/component/list.css

@@ -12,25 +12,18 @@
   .list {
     p {
       font-weight: var(--list-label-font-weight);
-      margin-bottom: var(--list-label-margin-bottom);
+      margin-block-end: var(--list-label-margin-bottom);
     }
 
     &,
     ul,
     ol {
-      list-style: none;
-      margin-bottom: 0;
-      padding-inline-start: 0;
+      margin-block-end: 0;
     }
 
     li {
       font-size: var(--list-item-font-size);
       margin-block: var(--list-item-gap);
-
-      &::before {
-        content: var(--list-item-marker);
-        margin-inline-end: var(--list-item-marker-gap);
-      }
     }
   }
 }

package/css/component/map.css

@@ -12,7 +12,7 @@
     margin-block: var(--map-margin-block);
     overflow: hidden;
 
-    @media (--mobile-only) {
+    @media not (--tablet) {
       --map-ratio: var(--map-ratio-mobile);
       .container & {
         margin-inline: calc(-1 * var(--gutter));

package/css/component/nav-accessibility.css

@@ -20,13 +20,16 @@
     overflow: hidden;
     position: absolute;
     transform: translateY(-100%);
-    transition: transform var(--duration-fast) var(--easing-out);
     z-index: 300;
 
     &:focus-within {
       transform: translateY(0);
     }
 
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform var(--duration-fast) var(--easing-out);
+    }
+
     a {
       background: var(--color-bg);
       &:focus {

package/css/component/nav-title.css

@@ -7,6 +7,7 @@
     font-size: var(--nav-font-size-title);
     font-weight: var(--nav-font-weight-title);
     margin: 0;
-    padding: var(--nav-padding-y) var(--nav-padding-x);
+    padding-block: var(--nav-padding-y);
+    padding-inline: var(--nav-padding-x);
   }
 }

package/css/component/nav.css

@@ -22,6 +22,11 @@
       margin: 0;
     }
 
+    &,
+    &:is(ul, ol) {
+      padding-inline-start: 0;
+    }
+
     /* ── Nav item ────────────────────────────────────────────────── */
 
     li {

package/css/component/pagination.css

@@ -91,7 +91,7 @@
     }
 
     /* On small screens: hide first/last controls and non-adjacent page numbers */
-    @media (--mobile-only) {
+    @media not (--tablet) {
       .first,
       .last,
       li:has(.first),

package/css/index.css

@@ -3,14 +3,19 @@
 @import 'component/badge.css';
 @import 'component/banner.css';
 @import 'component/breadcrumb.css';
+@import 'component/button.css';
 @import 'component/btn-close.css';
+@import 'component/btn-filter.css';
 @import 'component/btn-menu.css';
 @import 'component/btn-search.css';
-@import 'component/button.css';
+@import 'component/btn-share.css';
+@import 'component/btn-toc.css';
 @import 'component/card.css';
 @import 'component/drawer.css';
 @import 'component/dropdown.css';
 @import 'component/embed.css';
+@import 'component/form.css';
+@import 'component/items.css';
 @import 'component/list.css';
 @import 'component/map.css';
 @import 'component/media.css';

package/package.json

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