@uncinq/css-components 0.4.0 → 1.0.0

package/css/components/alert.css

@@ -0,0 +1,67 @@
+/* components/alert.css */
+@layer components {
+  .alert {
+    --color-link-default: var(--alert-color-text);
+    background-color: var(--alert-color-background);
+    border: var(--alert-border-width) var(--alert-border-style) var(--alert-color-border);
+    border-radius: var(--alert-border-radius);
+    color: var(--alert-color-text);
+    display: flex;
+    flex-direction: column;
+    font-size: var(--alert-font-size);
+    gap: var(--alert-gap);
+    margin: var(--alert-margin);
+    padding: var(--alert-padding);
+
+    > * {
+      margin: 0;
+    }
+
+    .alert-heading {
+      align-items: center;
+      color: var(--alert-color-text);
+      display: flex;
+      font-weight: var(--font-weight-semibold);
+      gap: var(--alert-gap);
+    }
+
+    &:has(.icon:first-child):not(:has(.alert-heading)) {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+  }
+
+  /* Variants */
+  .alert-danger {
+    --alert-color-background: var(--color-danger-muted);
+    --alert-color-text: var(--color-danger-strong);
+  }
+  .alert-dark {
+    --alert-color-background: var(--color-dark-muted);
+    --alert-color-text: var(--color-dark-strong);
+  }
+  .alert-info {
+    --alert-color-background: var(--color-info-muted);
+    --alert-color-text: var(--color-info-strong);
+  }
+  .alert-light {
+    --alert-color-background: var(--color-light-muted);
+    --alert-color-text: var(--color-light-strong);
+  }
+  .alert-primary {
+    --alert-color-background: var(--color-primary-muted);
+    --alert-color-text: var(--color-primary-strong);
+  }
+  .alert-secondary {
+    --alert-color-background: var(--color-secondary-muted);
+    --alert-color-text: var(--color-secondary-strong);
+  }
+  .alert-success {
+    --alert-color-background: var(--color-success-muted);
+    --alert-color-text: var(--color-success-strong);
+  }
+  .alert-warning {
+    --alert-color-background: var(--color-warning-muted);
+    --alert-color-text: var(--color-warning-strong);
+  }
+}

package/css/components/badge.css

@@ -0,0 +1,63 @@
+/* components/badge.css */
+@layer components {
+  .badge {
+    background-color: var(--badge-color-background);
+    border: var(--badge-border-width) var(--badge-border-style) var(--badge-color-border);
+    border-radius: var(--badge-border-radius);
+    color: var(--badge-color-text);
+    display: inline-flex;
+    font-size: var(--badge-font-size);
+    font-weight: var(--badge-font-weight);
+    padding: var(--badge-padding-block) var(--badge-padding-inline);
+    text-decoration: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    a.badge:hover {
+      background-color: var(--badge-color-background-hover, var(--badge-color-background));
+      color: var(--badge-color-text-hover, var(--badge-color-text));
+    }
+  }
+
+  /* Variants */
+  .badge-danger    {
+    --badge-color-background: var(--color-danger);
+    --badge-color-background-hover: var(--color-danger-strong);
+    --badge-color-text: var(--color-text-on-danger);
+  }
+  .badge-dark      {
+    --badge-color-background: var(--color-dark);
+    --badge-color-background-hover: var(--color-dark-strong);
+    --badge-color-text: var(--color-text-on-dark);
+  }
+  .badge-info      {
+    --badge-color-background: var(--color-info);
+    --badge-color-background-hover: var(--color-info-strong);
+    --badge-color-text: var(--color-text-on-info);
+  }
+  .badge-light     {
+    --badge-color-background: var(--color-light);
+    --badge-color-background-hover: var(--color-light-strong);
+    --badge-color-text: var(--color-text-on-light);
+  }
+  .badge-primary   {
+    --badge-color-background: var(--color-primary);
+    --badge-color-background-hover: var(--color-primary-strong);
+    --badge-color-text: var(--color-text-on-primary);
+  }
+  .badge-secondary {
+    --badge-color-background: var(--color-secondary);
+    --badge-color-background-hover: var(--color-secondary-strong);
+    --badge-color-text: var(--color-text-on-secondary);
+  }
+  .badge-success   {
+    --badge-color-background: var(--color-success);
+    --badge-color-background-hover: var(--color-success-strong);
+    --badge-color-text: var(--color-text-on-success);
+  }
+  .badge-warning   {
+    --badge-color-background: var(--color-warning);
+    --badge-color-background-hover: var(--color-warning-strong);
+    --badge-color-text: var(--color-text-on-warning);
+  }
+}

package/css/components/banner.css

@@ -0,0 +1,54 @@
+/* components/banner.css */
+@layer components {
+  .banner {
+    --color-link: var(--alert-color-text);
+    background-color: var(--alert-color-background);
+    border-radius: var(--alert-border-radius);
+    color: var(--alert-color-text);
+    display: flex;
+    flex-direction: column;
+    font-size: var(--alert-font-size);
+    gap: var(--alert-gap);
+    padding: var(--alert-padding);
+    padding-inline: 0;
+    text-align: center;
+
+    p {
+      margin: 0 auto;
+    }
+  }
+
+  /* Variants */
+  .banner-danger {
+    --alert-color-background: var(--color-danger-muted);
+    --alert-color-text: var(--color-danger-strong);
+  }
+  .banner-dark {
+    --alert-color-background: var(--color-dark-muted);
+    --alert-color-text: var(--color-dark-strong);
+  }
+  .banner-info {
+    --alert-color-background: var(--color-info-muted);
+    --alert-color-text: var(--color-info-strong);
+  }
+  .banner-light {
+    --alert-color-background: var(--color-light-muted);
+    --alert-color-text: var(--color-light-strong);
+  }
+  .banner-primary {
+    --alert-color-background: var(--color-primary-muted);
+    --alert-color-text: var(--color-primary-strong);
+  }
+  .banner-secondary {
+    --alert-color-background: var(--color-secondary-muted);
+    --alert-color-text: var(--color-secondary-strong);
+  }
+  .banner-success {
+    --alert-color-background: var(--color-success-muted);
+    --alert-color-text: var(--color-success-strong);
+  }
+  .banner-warning {
+    --alert-color-background: var(--color-warning-muted);
+    --alert-color-text: var(--color-warning-strong);
+  }
+}

package/css/{component → components}/breadcrumb.css

@@ -1,9 +1,9 @@
 /* components/breadcrumb.css */
 @layer components {
   .breadcrumb-wrapper {
-    border-bottom: var(--breadcrumb-border);
-    border-top: var(--breadcrumb-border);
-    padding-block: var(--breadcrumb-padding);
+    border-block-end: var(--breadcrumb-border-width) var(--breadcrumb-border-style) var(--breadcrumb-color-border);
+    border-block-start: var(--breadcrumb-border-width) var(--breadcrumb-border-style) var(--breadcrumb-color-border);
+    padding-block: var(--breadcrumb-padding-block);
 
     ol {
       display: flex;

package/css/{component → components}/btn-close.css

@@ -1,10 +1,10 @@
-/* component/btn-close.css */
+/* components/btn-close.css */
 /* Close button */
 @layer components {
   .btn-close {
     align-items: center;
     appearance: none;
-    background-color: var(--btn-close-color-bg, var(--btn-control-color-bg));
+    background-color: var(--btn-close-color-background, var(--btn-control-color-background));
     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-control-color-text));
@@ -13,7 +13,7 @@
     font-size: var(--btn-close-font-size, var(--btn-font-size));
     font-weight: var(--btn-close-font-weight, var(--btn-font-weight));
     gap: var(--btn-close-gap, var(--btn-gap));
-    padding: var(--btn-close-padding-y, var(--btn-padding-y)) var(--btn-close-padding-x, var(--btn-padding-x));
+    padding: var(--btn-close-padding-block, var(--btn-padding-block)) var(--btn-close-padding-inline, var(--btn-padding-inline));
     text-decoration-color: var(--btn-close-color-text-decoration, var(--btn-color-text-decoration));
     text-decoration-line: var(--btn-text-decoration-line);
     text-decoration-thickness: var(--text-decoration-thickness);
@@ -31,7 +31,7 @@
 
     @media (hover: hover) and (pointer: fine) {
       &:hover {
-        background-color: var(--btn-close-color-bg-hover, var(--btn-control-color-bg-hover));
+        background-color: var(--btn-close-color-background-hover, var(--btn-control-color-background-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 → components}/btn-filter.css

@@ -1,10 +1,10 @@
-/* component/btn-filter.css */
+/* components/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-background:           var(--btn-filter-color-background, var(--btn-control-color-background));
+    --btn-color-background-hover:     var(--btn-filter-color-background-hover, var(--btn-control-color-background-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));

package/css/{component → components}/btn-menu.css

@@ -1,10 +1,10 @@
-/* component/btn-menu.css */
+/* components/btn-menu.css */
 /* Menu toggle button */
 @layer components {
   .btn-menu {
     align-items: center;
     appearance: none;
-    background-color: var(--btn-menu-color-bg, var(--btn-control-color-bg));
+    background-color: var(--btn-menu-color-background, var(--btn-control-color-background));
     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-control-color-text));
@@ -13,8 +13,8 @@
     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-block: var(--btn-menu-padding-y, var(--btn-padding-y));
-    padding-inline: var(--btn-menu-padding-x, var(--btn-padding-x));
+    padding-block: var(--btn-menu-padding-block, var(--btn-padding-block));
+    padding-inline: var(--btn-menu-padding-inline, var(--btn-padding-inline));
     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);
@@ -32,7 +32,7 @@
 
     @media (hover: hover) and (pointer: fine) {
       &:hover {
-        background-color: var(--btn-menu-color-bg-hover, var(--btn-control-color-bg-hover));
+        background-color: var(--btn-menu-color-background-hover, var(--btn-control-color-background-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/components/btn-search.css

@@ -0,0 +1,22 @@
+/* components/btn-search.css */
+/* Search button — requires .btn base class */
+@layer components {
+  .btn-search {
+    /* Scope --btn-color-* to control values, allow per-button overrides */
+    --btn-color-background: var(--btn-search-color-background, var(--btn-control-color-background));
+    --btn-color-background-hover: var(--btn-search-color-background-hover, var(--btn-control-color-background-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;
+      content: '';
+      flex-shrink: 0;
+      height: var(--icon-size);
+      mask: var(--icon-search) center / var(--icon-size) no-repeat;
+      width: var(--icon-size);
+    }
+  }
+}

package/css/components/btn-share.css

@@ -0,0 +1,22 @@
+/* components/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-background: var(--btn-share-color-background, var(--btn-control-color-background));
+    --btn-color-background-hover: var(--btn-share-color-background-hover, var(--btn-control-color-background-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 → components}/btn-toc.css

@@ -1,14 +1,14 @@
-/* component/btn-toc.css */
+/* components/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-background: var(--btn-toc-color-background, var(--btn-control-color-background));
+    --btn-color-background-hover: var(--btn-toc-color-background-hover, var(--btn-control-color-background-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));
+    --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;

package/css/{component → components}/button.css

@@ -3,7 +3,7 @@
   .btn {
     align-items: center;
     appearance: none;
-    background-color: var(--btn-color-bg);
+    background-color: var(--btn-color-background);
     border: var(--btn-border-width) var(--btn-border-style) var(--btn-color-border);
     border-radius: var(--btn-border-radius);
     box-shadow: var(--btn-shadow);
@@ -14,8 +14,8 @@
     font-weight: var(--btn-font-weight);
     gap: var(--btn-gap);
     justify-content: center;
-    padding-block: var(--btn-padding-y);
-    padding-inline: var(--btn-padding-x);
+    padding-block: var(--btn-padding-block);
+    padding-inline: var(--btn-padding-inline);
     text-decoration-color: var(--btn-color-text-decoration);
     text-decoration-line: var(--btn-text-decoration-line);
     text-decoration-thickness: var(--text-decoration-thickness);
@@ -35,7 +35,7 @@
 
     @media (hover: hover) and (pointer: fine) {
       &:hover {
-        background-color: var(--btn-color-bg-hover);
+        background-color: var(--btn-color-background-hover);
         border-color: var(--btn-color-border-hover);
         box-shadow: var(--btn-shadow-hover);
         color: var(--btn-color-text-hover);
@@ -50,8 +50,8 @@
 
   /* Variants */
   .btn-control {
-    --btn-color-bg: var(--btn-control-color-bg);
-    --btn-color-bg-hover: var(--btn-control-color-bg-hover);
+    --btn-color-background: var(--btn-control-color-background);
+    --btn-color-background-hover: var(--btn-control-color-background-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);
@@ -59,24 +59,24 @@
   }
 
   .btn-danger {
-    --btn-color-bg: var(--color-danger);
-    --btn-color-bg-hover: var(--color-danger-strong);
+    --btn-color-background: var(--color-danger);
+    --btn-color-background-hover: var(--color-danger-strong);
     --btn-color-border: var(--color-danger);
     --btn-color-border-hover: var(--color-danger-strong);
     --btn-color-text: var(--color-text-on-danger);
   }
 
   .btn-dark {
-    --btn-color-bg: var(--color-dark);
-    --btn-color-bg-hover: var(--color-dark-strong);
+    --btn-color-background: var(--color-dark);
+    --btn-color-background-hover: var(--color-dark-strong);
     --btn-color-border: var(--color-dark);
     --btn-color-border-hover: var(--color-dark-strong);
     --btn-color-text: var(--color-text-on-dark);
   }
 
   .btn-ghost {
-    --btn-color-bg: transparent;
-    --btn-color-bg-hover: transparent;
+    --btn-color-background: transparent;
+    --btn-color-background-hover: transparent;
     --btn-color-border: transparent;
     --btn-color-border-hover: transparent;
     --btn-color-text: var(--color-text);
@@ -84,24 +84,24 @@
   }
 
   .btn-info {
-    --btn-color-bg: var(--color-info);
-    --btn-color-bg-hover: var(--color-info-strong);
+    --btn-color-background: var(--color-info);
+    --btn-color-background-hover: var(--color-info-strong);
     --btn-color-border: var(--color-info);
     --btn-color-border-hover: var(--color-info-strong);
     --btn-color-text: var(--color-text-on-info);
   }
 
   .btn-light {
-    --btn-color-bg: var(--color-light);
-    --btn-color-bg-hover: var(--color-light-strong);
+    --btn-color-background: var(--color-light);
+    --btn-color-background-hover: var(--color-light-strong);
     --btn-color-border: var(--color-light);
     --btn-color-border-hover: var(--color-light-strong);
     --btn-color-text: var(--color-text-on-light);
   }
 
   .btn-link {
-    --btn-color-bg: transparent;
-    --btn-color-bg-hover: transparent;
+    --btn-color-background: transparent;
+    --btn-color-background-hover: transparent;
     --btn-color-border: transparent;
     --btn-color-border-hover: transparent;
     --btn-color-text: var(--color-text);
@@ -116,32 +116,32 @@
   }
 
   .btn-primary {
-    --btn-color-bg: var(--color-brand);
-    --btn-color-bg-hover: var(--color-brand-strong);
+    --btn-color-background: var(--color-brand);
+    --btn-color-background-hover: var(--color-brand-strong);
     --btn-color-border: var(--color-brand);
     --btn-color-border-hover: var(--color-brand-strong);
     --btn-color-text: var(--color-text-on-brand);
   }
 
   .btn-secondary {
-    --btn-color-bg: var(--color-secondary);
-    --btn-color-bg-hover: var(--color-secondary-strong);
+    --btn-color-background: var(--color-secondary);
+    --btn-color-background-hover: var(--color-secondary-strong);
     --btn-color-border: var(--color-secondary);
     --btn-color-border-hover: var(--color-secondary-strong);
     --btn-color-text: var(--color-text-on-secondary);
   }
 
   .btn-success {
-    --btn-color-bg: var(--color-success);
-    --btn-color-bg-hover: var(--color-success-strong);
+    --btn-color-background: var(--color-success);
+    --btn-color-background-hover: var(--color-success-strong);
     --btn-color-border: var(--color-success);
     --btn-color-border-hover: var(--color-success-strong);
     --btn-color-text: var(--color-text-on-success);
   }
 
   .btn-warning {
-    --btn-color-bg: var(--color-warning);
-    --btn-color-bg-hover: var(--color-warning-strong);
+    --btn-color-background: var(--color-warning);
+    --btn-color-background-hover: var(--color-warning-strong);
     --btn-color-border: var(--color-warning);
     --btn-color-border-hover: var(--color-warning-strong);
     --btn-color-text: var(--color-text-on-warning);
@@ -150,31 +150,31 @@
   /* Sizes */
   .btn-xs {
     --btn-font-size: var(--font-size-xs);
-    --btn-padding-x: var(--spacing-xs);
-    --btn-padding-y: var(--spacing-xs);
+    --btn-padding-inline: var(--spacing-xs);
+    --btn-padding-block: var(--spacing-xs);
   }
 
   .btn-sm {
     --btn-font-size: var(--font-size-sm);
-    --btn-padding-x: var(--spacing-sm);
-    --btn-padding-y: var(--spacing-sm);
+    --btn-padding-inline: var(--spacing-sm);
+    --btn-padding-block: var(--spacing-sm);
   }
 
   .btn-md {
     --btn-font-size: var(--font-size-md);
-    --btn-padding-x: var(--spacing-md);
-    --btn-padding-y: var(--spacing-md);
+    --btn-padding-inline: var(--spacing-md);
+    --btn-padding-block: var(--spacing-md);
   }
 
   .btn-lg {
     --btn-font-size: var(--font-size-lg);
-    --btn-padding-x: var(--spacing-lg);
-    --btn-padding-y: var(--spacing-lg);
+    --btn-padding-inline: var(--spacing-lg);
+    --btn-padding-block: var(--spacing-lg);
   }
 
   .btn-xl {
     --btn-font-size: var(--font-size-xl);
-    --btn-padding-x: var(--spacing-xl);
-    --btn-padding-y: var(--spacing-xl);
+    --btn-padding-inline: var(--spacing-xl);
+    --btn-padding-block: var(--spacing-xl);
   }
 }

package/css/{component → components}/card.css

@@ -16,8 +16,8 @@
  */
 @layer components {
   .card {
-    background-color: var(--card-color-bg);
-    border: var(--card-border);
+    background-color: var(--card-color-background);
+    border: var(--card-border-width) var(--card-border-style) var(--card-color-border);
     border-radius: var(--card-border-radius);
     box-shadow: var(--card-shadow);
     color: var(--card-color-text);
@@ -30,8 +30,8 @@
       flex-direction: column;
       flex: 1;
       gap: var(--card-gap);
-      padding-block: var(--card-padding-y);
-      padding-inline: var(--card-padding-x);
+      padding-block: var(--card-padding-block);
+      padding-inline: var(--card-padding-inline);
       text-decoration: none;
 
       > * {
@@ -51,10 +51,10 @@
     }
 
     .name {
-      color: var(--card-color-title);
-      font-size: var(--card-font-size-title);
-      font-weight: var(--card-font-weight-title);
-      line-height: var(--card-line-height-title);
+      color: var(--card-title-color);
+      font-size: var(--card-title-font-size);
+      font-weight: var(--card-title-font-weight);
+      line-height: var(--card-title-line-height);
     }
 
     .description {
@@ -63,7 +63,7 @@
 
     .media {
       --media-ratio: var(--card-media-ratio);
-      --media-color-bg: var(--card-media-color-bg);
+      --media-color-background: var(--card-media-color-background);
       order: var(--card-media-order, -1);
     }
 

package/css/{component → components}/drawer.css

@@ -28,7 +28,7 @@
   /* ── Panel ───────────────────────────────────────────────────────── */
 
   .drawer {
-    background-color: var(--drawer-color-bg);
+    background-color: var(--drawer-color-background);
     bottom: var(--drawer-bottom, 0);
     box-shadow: var(--drawer-shadow);
     color: var(--drawer-color-text);

package/css/{component → components}/dropdown.css

@@ -70,7 +70,7 @@
   /* ── Menu panel ──────────────────────────────────────────────────── */
 
   .dropdown-menu {
-    background-color: var(--dropdown-color-bg);
+    background-color: var(--dropdown-color-background);
     border: var(--dropdown-border-width) var(--dropdown-border-style) var(--dropdown-color-border);
     border-radius: var(--dropdown-border-radius);
     box-shadow: var(--dropdown-shadow);
@@ -113,14 +113,14 @@
       color: var(--dropdown-color-text);
       font-size: var(--dropdown-item-font-size);
       display: block;
-      padding-block: var(--dropdown-item-padding-y);
-      padding-inline: var(--dropdown-item-padding-x);
+      padding-block: var(--dropdown-item-padding-block);
+      padding-inline: var(--dropdown-item-padding-inline);
       text-decoration: none;
       white-space: nowrap;
 
       @media (hover: hover) and (pointer: fine) {
         &:hover {
-          background-color: var(--dropdown-item-color-bg-hover);
+          background-color: var(--dropdown-item-color-background-hover);
         }
       }
     }
@@ -130,7 +130,7 @@
   /* ── Alignment variants ──────────────────────────────────────────── */
 
   .dropdown-menu-end {
-    left: auto;
-    right: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
   }
 }

package/css/{component → components}/list.css

@@ -12,7 +12,7 @@
   .list {
     p {
       font-weight: var(--list-label-font-weight);
-      margin-block-end: var(--list-label-margin-bottom);
+      margin-block: var(--list-label-margin-block);
     }
 
     &,

package/css/{component → components}/map.css

@@ -8,7 +8,7 @@
 @layer components {
   .map {
     aspect-ratio: var(--map-ratio);
-    background-color: var(--map-color-bg);
+    background-color: var(--map-color-background);
     margin-block: var(--map-margin-block);
     overflow: hidden;
 

package/css/{component → components}/media.css

@@ -8,7 +8,7 @@
 
   .media {
     aspect-ratio: var(--media-ratio);
-    background-color: var(--media-color-bg);
+    background-color: var(--media-color-background);
     overflow: hidden;
 
     picture,
@@ -34,7 +34,7 @@
 
   .media-icon {
     --media-ratio: none;
-    --media-color-bg: transparent;
+    --media-color-background: transparent;
   }
 
 }

package/css/{component → components}/nav-accessibility.css

@@ -16,7 +16,7 @@
   .nav-accessibility {
     flex-direction: row;
     font-size: var(--font-size-xs);
-    left: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     position: absolute;
     transform: translateY(-100%);
@@ -31,10 +31,10 @@
     }
 
     a {
-      background: var(--color-bg);
+      background: var(--color-background);
       &:focus {
         background: var(--color-text);
-        color: var(--color-bg);
+        color: var(--color-background);
         outline: none;
       }
     }

package/css/components/nav-title.css

@@ -0,0 +1,13 @@
+/* components/nav-title.css */
+/*
+ * .nav-title — navigation title.
+ */
+@layer components {
+  .nav-title {
+    font-size: var(--nav-title-font-size);
+    font-weight: var(--nav-title-font-weight);
+    margin: 0;
+    padding-block: var(--nav-padding-block);
+    padding-inline: var(--nav-padding-inline);
+  }
+}

package/css/{component → components}/nav.css

@@ -30,8 +30,8 @@
     /* ── Nav item ────────────────────────────────────────────────── */
 
     li {
-      margin-block: var(--nav-margin-y, 0);
-      margin-inline: var(--nav-margin-x, 0);
+      margin-block: var(--nav-margin-block, 0);
+      margin-inline: var(--nav-margin-inline, 0);
       position: relative;
     }
 
@@ -39,7 +39,7 @@
 
     a {
       display: block;
-      padding: var(--nav-padding-y) var(--nav-padding-x);
+      padding: var(--nav-padding-block) var(--nav-padding-inline);
     }
 
     a:not(.btn) {
@@ -53,14 +53,14 @@
     li > span {
       color: var(--nav-color-text);
       display: block;
-      padding: var(--nav-padding-y) var(--nav-padding-x);
+      padding: var(--nav-padding-block) var(--nav-padding-inline);
     }
 
     /* ── Item highlighted ───────────────────────────────────────────────────── */
 
     .nav-item-highlighted {
       line-height: var(--line-height-snug);
-      margin-inline: var(--nav-padding-x);
+      margin-inline: var(--nav-padding-inline);
     }
   }
 }

package/css/{component → components}/pagination.css

@@ -30,27 +30,27 @@
 
     a {
       align-items: center;
-      background-color: var(--pagination-item-color-bg);
+      background-color: var(--pagination-item-color-background);
       border-radius: var(--pagination-item-border-radius);
       color: var(--pagination-item-color-text);
       display: flex;
       font-size: var(--pagination-item-font-size);
       font-weight: var(--pagination-item-font-weight);
-      height: var(--pagination-item-size);
       justify-content: center;
+      min-height: var(--pagination-item-size);
       min-width: var(--pagination-item-size);
       padding-inline: var(--spacing-2xs);
       text-decoration: none;
 
       &:hover {
-        background-color: var(--pagination-item-color-bg-hover);
+        background-color: var(--pagination-item-color-background-hover);
         color: var(--pagination-item-color-text-hover);
       }
     }
 
     /* Active page */
     .active a {
-      --pagination-item-color-bg:   var(--pagination-item-color-bg-active);
+      --pagination-item-color-background: var(--pagination-item-color-background-active);
       --pagination-item-color-text: var(--pagination-item-color-text-active);
       cursor: default;
       pointer-events: none;

package/css/index.css

@@ -1,25 +1,25 @@
 /* css/index.css */
-@import 'component/alert.css';
-@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/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';
-@import 'component/nav.css';
-@import 'component/nav-accessibility.css';
-@import 'component/nav-title.css';
-@import 'component/pagination.css';
+@import 'components/alert.css';
+@import 'components/badge.css';
+@import 'components/banner.css';
+@import 'components/breadcrumb.css';
+@import 'components/button.css';
+@import 'components/btn-close.css';
+@import 'components/btn-filter.css';
+@import 'components/btn-menu.css';
+@import 'components/btn-search.css';
+@import 'components/btn-share.css';
+@import 'components/btn-toc.css';
+@import 'components/card.css';
+@import 'components/drawer.css';
+@import 'components/dropdown.css';
+@import 'components/embed.css';
+@import 'components/form.css';
+@import 'components/items.css';
+@import 'components/list.css';
+@import 'components/map.css';
+@import 'components/media.css';
+@import 'components/nav.css';
+@import 'components/nav-accessibility.css';
+@import 'components/nav-title.css';
+@import 'components/pagination.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/css-components",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "Framework-agnostic CSS component implementations.",
   "license": "MIT",
   "repository": {
@@ -24,7 +24,7 @@
   "exports": {
     ".": "./css/index.css",
     "./css/index.css": "./css/index.css",
-    "./css/component/*": "./css/component/*"
+    "./css/components/*": "./css/components/*"
   },
   "style": "./css/index.css",
   "peerDependencies": {

package/css/component/alert.css

@@ -1,43 +0,0 @@
-/* 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;
-    flex-direction: column;
-    font-size: var(--alert-font-size);
-    gap: var(--alert-gap);
-    margin: var(--alert-margin);
-    padding: var(--alert-padding);
-
-    > * {
-      margin: 0;
-    }
-
-    .alert-heading {
-      align-items: center;
-      color: var(--alert-color-text);
-      display: flex;
-      font-weight: var(--font-weight-semibold);
-      gap: var(--alert-gap);
-    }
-
-    &:has(.icon:first-child):not(:has(.alert-heading)) {
-      flex-direction: row;
-      align-items: flex-start;
-    }
-  }
-
-  /* Variants */
-  .alert-danger    { --alert-color-bg: var(--color-danger-muted);    --alert-color-text: var(--color-danger-strong); }
-  .alert-dark      { --alert-color-bg: var(--color-dark-muted);      --alert-color-text: var(--color-dark-strong); }
-  .alert-info      { --alert-color-bg: var(--color-info-muted);      --alert-color-text: var(--color-info-strong); }
-  .alert-light     { --alert-color-bg: var(--color-light-muted);     --alert-color-text: var(--color-light-strong); }
-  .alert-primary   { --alert-color-bg: var(--color-primary-muted);   --alert-color-text: var(--color-primary-strong); }
-  .alert-secondary { --alert-color-bg: var(--color-secondary-muted); --alert-color-text: var(--color-secondary-strong); }
-  .alert-success   { --alert-color-bg: var(--color-success-muted);   --alert-color-text: var(--color-success-strong); }
-  .alert-warning   { --alert-color-bg: var(--color-warning-muted);   --alert-color-text: var(--color-warning-strong); }
-}

package/css/component/badge.css

@@ -1,63 +0,0 @@
-/* components/badge.css */
-@layer components {
-  .badge {
-    background-color: var(--badge-color-bg);
-    border: var(--badge-border-width) var(--badge-border-style) var(--badge-color-border);
-    border-radius: var(--badge-border-radius);
-    color: var(--badge-color-text);
-    display: inline-flex;
-    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);
-    --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,30 +0,0 @@
-/* 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);
-    display: flex;
-    flex-direction: column;
-    font-size: var(--alert-font-size);
-    gap: var(--alert-gap);
-    padding: var(--alert-padding);
-    padding-inline: 0;
-    text-align: center;
-
-    p {
-      margin: 0 auto;
-    }
-  }
-
-  /* Variants */
-  .banner-danger    { --alert-color-bg: var(--color-danger-muted);    --alert-color-text: var(--color-danger-strong); }
-  .banner-dark      { --alert-color-bg: var(--color-dark-muted);      --alert-color-text: var(--color-dark-strong); }
-  .banner-info      { --alert-color-bg: var(--color-info-muted);      --alert-color-text: var(--color-info-strong); }
-  .banner-light     { --alert-color-bg: var(--color-light-muted);     --alert-color-text: var(--color-light-strong); }
-  .banner-primary   { --alert-color-bg: var(--color-primary-muted);   --alert-color-text: var(--color-primary-strong); }
-  .banner-secondary { --alert-color-bg: var(--color-secondary-muted); --alert-color-text: var(--color-secondary-strong); }
-  .banner-success   { --alert-color-bg: var(--color-success-muted);   --alert-color-text: var(--color-success-strong); }
-  .banner-warning   { --alert-color-bg: var(--color-warning-muted);   --alert-color-text: var(--color-warning-strong); }
-}

package/css/component/btn-search.css

@@ -1,22 +0,0 @@
-/* component/btn-search.css */
-/* Search button — requires .btn base class */
-@layer components {
-  .btn-search {
-    /* 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;
-      content: '';
-      flex-shrink: 0;
-      height: var(--icon-size);
-      mask: var(--icon-search) center / var(--icon-size) no-repeat;
-      width: var(--icon-size);
-    }
-  }
-}

package/css/component/btn-share.css

@@ -1,22 +0,0 @@
-/* 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/nav-title.css

@@ -1,13 +0,0 @@
-/* components/nav-title.css */
-/*
- * .nav-title — navigation title.
- */
-@layer components {
-  .nav-title {
-    font-size: var(--nav-font-size-title);
-    font-weight: var(--nav-font-weight-title);
-    margin: 0;
-    padding-block: var(--nav-padding-y);
-    padding-inline: var(--nav-padding-x);
-  }
-}