@fragments-sdk/ui 0.7.2 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Customizable UI components built on Base UI headless primitives",
   "type": "module",
   "main": "src/index.ts",
@@ -50,7 +50,7 @@
     "react-dom": "^19.0.0",
     "sass": "^1.83.0",
     "typescript": "^5.7.0",
-    "@fragments-sdk/cli": "0.5.1"
+    "@fragments-sdk/cli": "0.5.2"
   },
   "files": [
     "src",

package/src/components/Accordion/Accordion.module.scss

@@ -4,15 +4,19 @@
 .accordion {
   font-family: var(--fui-font-sans, $fui-font-sans);
   width: 100%;
-}
 
-.item {
-  border-bottom: 1px solid var(--fui-border, $fui-border);
+  // Borders target direct children (BaseCollapsible.Root wrappers)
+  // so :first-child/:last-child selectors work correctly
+  > * {
+    border-bottom: 1px solid var(--fui-border, $fui-border);
 
-  &:first-child {
-    border-top: 1px solid var(--fui-border, $fui-border);
+    &:last-child {
+      border-bottom: none;
+    }
   }
+}
 
+.item {
   &[data-disabled] {
     opacity: 0.5;
     pointer-events: none;
@@ -34,7 +38,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--fui-padding-item-md, $fui-padding-item-md) 0;
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) 0;
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
@@ -87,7 +91,7 @@
 }
 
 .contentInner {
-  padding-bottom: var(--fui-padding-item-md, $fui-padding-item-md);
+  padding-bottom: var(--fui-padding-item-xs, $fui-padding-item-xs);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
   line-height: var(--fui-line-height-normal, $fui-line-height-normal);

package/src/components/Collapsible/Collapsible.module.scss

@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs);
   background: transparent;
   border: none;
   border-radius: var(--fui-radius-md, $fui-radius-md);

package/src/components/Combobox/Combobox.module.scss

@@ -176,7 +176,7 @@
     var(--fui-space-1, #{$fui-space-1}) * 2
   ) !important;
   overflow-y: auto !important;
-  padding: var(--fui-space-1, $fui-space-1);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 
   // Animation
@@ -208,7 +208,7 @@
   align-items: center;
   gap: var(--fui-space-2, $fui-space-2);
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   cursor: pointer;
   outline: none;
@@ -254,7 +254,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--fui-space-4, $fui-space-4) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-item-lg, $fui-padding-item-lg) var(--fui-padding-item-md, $fui-padding-item-md);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
 }
@@ -270,7 +270,7 @@
 
 // Group label
 .groupLabel {
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-tertiary, $fui-text-tertiary);

package/src/components/Dialog/Dialog.module.scss

@@ -92,7 +92,7 @@
 
 // Header area
 .header {
-  padding: var(--fui-padding-container-md, $fui-padding-container-md) var(--fui-padding-container-lg, $fui-padding-container-lg);
+  padding: var(--fui-padding-container-sm, $fui-padding-container-sm) var(--fui-padding-container-md, $fui-padding-container-md);
 }
 
 // Title
@@ -114,7 +114,7 @@
 
 // Body content
 .body {
-  padding: 0 var(--fui-padding-container-lg, $fui-padding-container-lg) var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: 0 var(--fui-padding-container-md, $fui-padding-container-md) var(--fui-padding-container-sm, $fui-padding-container-sm);
 }
 
 // Footer for actions
@@ -122,8 +122,8 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-padding-container-sm, $fui-padding-container-sm) var(--fui-padding-container-lg, $fui-padding-container-lg);
+  gap: var(--fui-space-1, $fui-space-1);
+  padding: var(--fui-padding-inline-sm, $fui-padding-inline-sm) var(--fui-padding-container-md, $fui-padding-container-md);
   border-top: 1px solid var(--fui-border, $fui-border);
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
   border-radius: 0 0 var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg);

package/src/components/Listbox/Listbox.module.scss

@@ -8,7 +8,7 @@
   @include surface-elevated;
 
   min-width: 12rem;
-  padding: var(--fui-space-1, 0.25rem);
+  padding: var(--fui-padding-item-xs, 0.25rem);
   box-shadow: var(--fui-shadow-lg);
   max-height: 320px;
   overflow-y: auto;
@@ -26,7 +26,7 @@
   align-items: center;
   gap: var(--fui-space-2, 0.5rem);
   width: 100%;
-  padding: var(--fui-space-2, 0.5rem) var(--fui-space-3, 0.75rem);
+  padding: var(--fui-padding-item-xs, 0.25rem) var(--fui-padding-item-md, 0.75rem);
   border-radius: var(--fui-radius-sm, 0.25rem);
   cursor: pointer;
   outline: none;
@@ -64,7 +64,7 @@
 }
 
 .groupLabel {
-  padding: var(--fui-space-1, 0.25rem) var(--fui-space-3, 0.75rem);
+  padding: var(--fui-padding-item-xs, 0.25rem) var(--fui-padding-item-md, 0.75rem);
   font-size: var(--fui-font-size-xs, 0.75rem);
   font-weight: var(--fui-font-weight-medium, 500);
   color: var(--fui-text-tertiary);
@@ -75,7 +75,7 @@
 // ============================================
 
 .empty {
-  padding: var(--fui-space-3, 0.75rem);
+  padding: var(--fui-padding-item-md, 0.75rem);
   font-size: var(--fui-font-size-sm, 0.875rem);
   color: var(--fui-text-secondary);
   text-align: center;

package/src/components/Select/Select.module.scss

@@ -96,7 +96,7 @@
     var(--fui-space-1, #{$fui-space-1}) * 2
   ) !important;
   overflow-y: auto !important;
-  padding: var(--fui-space-1, $fui-space-1);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 
   // Animation
@@ -128,7 +128,7 @@
   align-items: center;
   gap: var(--fui-space-2, $fui-space-2);
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   cursor: pointer;
   outline: none;
@@ -178,7 +178,7 @@
 
 // Group label
 .groupLabel {
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-tertiary, $fui-text-tertiary);

package/src/components/Table/Table.module.scss

@@ -33,7 +33,7 @@
 .sm {
   .th,
   .td {
-    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
     font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   }
 }
@@ -41,7 +41,7 @@
 .md {
   .th,
   .td {
-    padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
     font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   }
 }
@@ -51,7 +51,6 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
 }
 
 .headerRow {
@@ -112,9 +111,7 @@
 }
 
 // Body
-.tbody {
-  background-color: var(--fui-bg-primary, $fui-bg-primary);
-}
+.tbody {}
 
 .row {
   border-bottom: 1px solid var(--fui-border, $fui-border);
@@ -123,6 +120,10 @@
   &:last-child {
     border-bottom: none;
   }
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
 }
 
 .clickable {

package/src/components/Tabs/Tabs.module.scss

@@ -55,7 +55,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-padding-item-sm, $fui-padding-item-sm) var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-secondary, $fui-text-secondary);
@@ -80,7 +80,7 @@
 .tabUnderline {
   border-radius: 0;
   margin-bottom: -1px;
-  padding-bottom: calc(var(--fui-padding-item-sm, $fui-padding-item-sm) + 1px);
+  padding-bottom: calc(var(--fui-padding-item-xs, $fui-padding-item-xs) + 1px);
 
   &:hover:not([data-disabled]) {
     background-color: transparent;
@@ -91,8 +91,6 @@
 .tabPills {
   border-radius: var(--fui-radius-md, $fui-radius-md);
   transition: all 0.15s ease;
-  padding: var(--fui-space-1-5, 6px) var(--fui-space-3, $fui-space-3);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
 
   &:hover:not([data-disabled]):not([data-active]) {
     background-color: transparent;