@rokkit/themes 1.0.0-next.127 → 1.0.0-next.129

package/src/base/list.css

@@ -19,6 +19,11 @@
   opacity: 0.5;
 }
 
+[dir='rtl'] [data-list] [data-list-item] {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+
 /* =============================================================================
    List Items (shared for links and buttons)
    ============================================================================= */
@@ -92,38 +97,16 @@ button[data-list-item] {
    Item Elements - uses shared [data-item-*] from item.css
    ============================================================================= */
 
-/* =============================================================================
-   Custom Snippet Wrapper
-   ============================================================================= */
-
-[data-list-item-custom] {
-  display: contents;
-}
-
-[data-list-item-custom] > a,
-[data-list-item-custom] > button {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-
 /* =============================================================================
    Groups
    ============================================================================= */
 
 [data-list-group] {
-  padding-block: 0.25rem;
-}
-
-[data-list-group-label] {
   display: flex;
   align-items: center;
   width: 100%;
   gap: 0.5rem;
+  padding-block: 0.25rem;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
@@ -133,113 +116,46 @@ button[data-list-item] {
 }
 
 /* Non-collapsible group labels are not interactive */
-[data-list]:not([data-collapsible='true']) [data-list-group-label] {
+[data-list]:not([data-collapsible='true']) [data-list-group] {
   cursor: default;
 }
 
-[data-list-group-label]:focus {
+[data-list-group]:focus {
   outline: none;
 }
 
 /* Group label sizes */
-[data-list][data-size='sm'] [data-list-group-label] {
+[data-list][data-size='sm'] [data-list-group] {
   padding: 0.25rem 0.5rem;
 }
-[data-list][data-size='md'] [data-list-group-label],
-[data-list]:not([data-size]) [data-list-group-label] {
+[data-list][data-size='md'] [data-list-group],
+[data-list]:not([data-size]) [data-list-group] {
   padding: 0.375rem 0.75rem;
 }
-[data-list][data-size='lg'] [data-list-group-label] {
+[data-list][data-size='lg'] [data-list-group] {
   padding: 0.5rem 1rem;
 }
 
-[data-list-group-label] > [data-list-group-icon] {
-  flex-shrink: 0;
+/* Group item content — inherits font from [data-list-group], label stays inline */
+[data-list-group] > [data-item-icon] {
   opacity: 0.7;
 }
 
-[data-list-group-label] > [data-list-group-text] {
-  flex: 1;
-  text-align: left;
-}
-
-[data-list-group-label] > [data-list-group-arrow] {
-  flex-shrink: 0;
-  transition: transform 150ms ease;
-}
-
-[data-list-group][data-list-group-collapsed='true'] [data-list-group-arrow] {
-  transform: rotate(-90deg);
-}
-
-/* Group label with nested button */
-[data-list-group-label] > button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    color 150ms ease;
-}
-
-[data-list-group-label] > button [data-icon] {
-  flex-shrink: 0;
-}
-
-[data-list-group-label] > button [data-chevron] {
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  transition: transform 150ms ease;
-}
-
-[data-list-group-label] > button[data-state='open'] [data-chevron] {
-  transform: rotate(180deg);
-}
-
-/* Group label as button directly */
-button[data-list-group-label] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  transition: color 150ms ease;
+[data-list-group] > [data-item-text] {
+  display: contents;
 }
 
-button[data-list-group-label] [data-icon] {
-  flex-shrink: 0;
+[data-list-group] [data-item-label] {
+  font-weight: inherit;
 }
 
-button[data-list-group-label] [data-chevron] {
+/* Expand/collapse chevron — pushed to the right edge */
+[data-list-expand-icon] {
   flex-shrink: 0;
-  font-size: 0.75rem;
+  margin-left: auto;
   transition: transform 150ms ease;
 }
 
-button[data-list-group-label][data-state='open'] [data-chevron] {
-  transform: rotate(180deg);
-}
-
-button[data-list-group-label] [data-stats] {
-  font-weight: 400;
-  text-transform: none;
-}
-
-[data-list-group-items] {
-  display: flex;
-  flex-direction: column;
-}
-
 /* =============================================================================
    Multi-selection
    ============================================================================= */
@@ -249,10 +165,15 @@ button[data-list-group-label] [data-stats] {
 }
 
 /* =============================================================================
-   Divider
+   Separator / Spacer
    ============================================================================= */
 
-[data-list-divider] {
+[data-list-separator] {
   height: 1px;
   margin-block: 0.25rem;
+  border: none;
+}
+
+[data-list-spacer] {
+  height: 0.5rem;
 }

package/src/base/menu.css

@@ -211,112 +211,64 @@
 }
 
 /* =============================================================================
-   Item Elements (icon, content, shortcut)
+   Item Elements - uses shared [data-item-*] from item.css
    ============================================================================= */
 
-[data-menu-item] > [data-menu-item-icon] {
-  flex-shrink: 0;
-}
-
-[data-menu-item] > [data-menu-item-content] {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-
-[data-menu-item] > [data-menu-item-content] > [data-menu-item-label] {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-[data-menu-item] > [data-menu-item-content] > [data-menu-item-description] {
-  font-size: 0.75em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-[data-menu-item] > [data-menu-item-shortcut] {
-  flex-shrink: 0;
-  margin-left: auto;
-  padding: 0.125rem 0.375rem;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  font-size: 0.75em;
-  font-weight: 500;
-  border-radius: 0.25rem;
-}
-
-/* =============================================================================
-   Custom Snippet Wrapper
-   ============================================================================= */
-
-[data-menu-item-custom] {
-  display: contents;
-}
-
-/* Style direct children of custom wrapper */
-[data-menu-item-custom] > button,
-[data-menu-item-custom] > a {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  text-align: left;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-
-[data-menu-item-custom][data-disabled='true'] > button,
-[data-menu-item-custom][data-disabled='true'] > a {
-  pointer-events: none;
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 /* =============================================================================
    Groups
    ============================================================================= */
 
 [data-menu-group] {
-  padding-block: 0.25rem;
-}
-
-[data-menu-group-label] {
   display: flex;
   align-items: center;
+  width: 100%;
   gap: 0.5rem;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: color 150ms ease;
 }
 
-/* Group label sizes */
-[data-menu][data-size='sm'] [data-menu-group-label] {
+/* Group sizes */
+[data-menu][data-size='sm'] [data-menu-group] {
   padding: 0.25rem 0.5rem;
 }
-[data-menu][data-size='md'] [data-menu-group-label],
-[data-menu]:not([data-size]) [data-menu-group-label] {
+[data-menu][data-size='md'] [data-menu-group],
+[data-menu]:not([data-size]) [data-menu-group] {
   padding: 0.375rem 0.75rem;
 }
-[data-menu][data-size='lg'] [data-menu-group-label] {
+[data-menu][data-size='lg'] [data-menu-group] {
   padding: 0.5rem 1rem;
 }
 
-[data-menu-group-label] > [data-menu-group-icon] {
+[data-menu-group]:focus {
+  outline: none;
+}
+
+[data-menu-group] > [data-menu-group-icon] {
   flex-shrink: 0;
   opacity: 0.7;
 }
 
+[data-menu-group] > [data-menu-group-text] {
+  flex: 1;
+  text-align: left;
+}
+
+[data-menu-expand-icon] {
+  flex-shrink: 0;
+  margin-left: auto;
+  transition: transform 150ms ease;
+}
+
 /* =============================================================================
-   Divider
+   Separator
    ============================================================================= */
 
-[data-menu-divider] {
+[data-menu-separator] {
   height: 1px;
   margin-block: 0.25rem;
+  border: none;
 }

package/src/base/toggle.css

@@ -22,6 +22,10 @@
   opacity: 0.5;
 }
 
+[dir='rtl'] [data-toggle] {
+  flex-direction: row-reverse;
+}
+
 /* =============================================================================
    Toggle Options
    ============================================================================= */

package/src/base/tree.css

@@ -84,13 +84,52 @@
 }
 
 /* =============================================================================
-   Tree Indent (when showLines=false)
+   Line Style Variants
+   Connectors have no borders by default. data-line-style activates them.
+   'none' keeps connectors in DOM for spacing but lines stay invisible.
    ============================================================================= */
 
-[data-tree-indent] {
-  flex-shrink: 0;
-  align-self: stretch;
-}
+/* Shared: activate 1px border for all visible line styles (solid/dashed/dotted).
+   Uses longhand width+style so theme border-color is not overridden. */
+[data-tree]:not([data-line-style='none']) [data-connector-v] {
+  border-right-width: 1px;
+}
+[data-tree]:not([data-line-style='none']) [data-connector-h] {
+  border-bottom-width: 1px;
+}
+[data-tree]:not([data-line-style='none']) [data-connector-corner] {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+[data-tree]:not([data-line-style='none']) [data-connector-rtl] [data-connector-v] {
+  border-right-width: 0;
+  border-left-width: 1px;
+}
+[data-tree]:not([data-line-style='none']) [data-connector-rtl] [data-connector-corner] {
+  border-right-width: 0;
+  border-left-width: 1px;
+}
+
+/* Solid (default visible style) */
+[data-tree][data-line-style='solid'] [data-connector-v] { border-right-style: solid; }
+[data-tree][data-line-style='solid'] [data-connector-h] { border-bottom-style: solid; }
+[data-tree][data-line-style='solid'] [data-connector-corner] { border-bottom-style: solid; border-right-style: solid; }
+[data-tree][data-line-style='solid'] [data-connector-rtl] [data-connector-v] { border-left-style: solid; }
+[data-tree][data-line-style='solid'] [data-connector-rtl] [data-connector-corner] { border-left-style: solid; }
+
+/* Dashed */
+[data-tree][data-line-style='dashed'] [data-connector-v] { border-right-style: dashed; }
+[data-tree][data-line-style='dashed'] [data-connector-h] { border-bottom-style: dashed; }
+[data-tree][data-line-style='dashed'] [data-connector-corner] { border-bottom-style: dashed; border-right-style: dashed; }
+[data-tree][data-line-style='dashed'] [data-connector-rtl] [data-connector-v] { border-left-style: dashed; }
+[data-tree][data-line-style='dashed'] [data-connector-rtl] [data-connector-corner] { border-left-style: dashed; }
+
+/* Dotted */
+[data-tree][data-line-style='dotted'] [data-connector-v] { border-right-style: dotted; }
+[data-tree][data-line-style='dotted'] [data-connector-h] { border-bottom-style: dotted; }
+[data-tree][data-line-style='dotted'] [data-connector-corner] { border-bottom-style: dotted; border-right-style: dotted; }
+[data-tree][data-line-style='dotted'] [data-connector-rtl] [data-connector-v] { border-left-style: dotted; }
+[data-tree][data-line-style='dotted'] [data-connector-rtl] [data-connector-corner] { border-left-style: dotted; }
 
 /* =============================================================================
    Tree Item Content

package/src/base/upload-progress.css

@@ -0,0 +1,155 @@
+/**
+ * UploadProgress - Base Structural Styles
+ *
+ * Layout: header flex, file row layout, progress bar track, action positioning.
+ * No colors or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-upload-progress] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-upload-header] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+[data-upload-clear] {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+  border: 1px solid currentColor;
+  background: transparent;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+/* =============================================================================
+   File Status
+   ============================================================================= */
+
+[data-upload-file-status] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  transition: background-color 150ms ease;
+}
+
+/* =============================================================================
+   File Elements
+   ============================================================================= */
+
+[data-upload-file-icon] {
+  flex-shrink: 0;
+  font-size: 1.25rem;
+}
+
+[data-upload-file-name] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-upload-file-size] {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+/* =============================================================================
+   Progress Bar
+   ============================================================================= */
+
+[data-upload-bar] {
+  position: relative;
+  width: 6rem;
+  height: 0.375rem;
+  border-radius: 9999px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+[data-upload-fill] {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+
+/* =============================================================================
+   Status Badge
+   ============================================================================= */
+
+[data-upload-status] {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+/* =============================================================================
+   Action Buttons
+   ============================================================================= */
+
+[data-upload-actions] {
+  display: flex;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+[data-upload-actions] button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  background: transparent;
+  font-size: 0.875rem;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+/* =============================================================================
+   Grid View Tiles
+   ============================================================================= */
+
+[data-grid] [data-upload-file-status] {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 1rem;
+  gap: 0.5rem;
+}
+
+[data-grid] [data-upload-file-status] [data-upload-file-icon] {
+  font-size: 2rem;
+}
+
+[data-grid] [data-upload-file-status] [data-upload-bar] {
+  width: 100%;
+}

package/src/base/upload-target.css

@@ -0,0 +1,67 @@
+/**
+ * UploadTarget - Base Structural Styles
+ *
+ * Layout: flex centering, dashed border, sizing, transitions.
+ * No colors or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Drop Zone Container
+   ============================================================================= */
+
+[data-upload-target] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  min-height: 10rem;
+  padding: 2rem;
+  border: 2px dashed currentColor;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
+  user-select: none;
+}
+
+[data-upload-target]:focus {
+  outline: none;
+}
+
+[data-upload-target][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Upload Icon
+   ============================================================================= */
+
+[data-upload-target] [data-upload-icon] {
+  font-size: 2rem;
+}
+
+/* =============================================================================
+   Browse Button
+   ============================================================================= */
+
+[data-upload-target] [data-upload-button] {
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid currentColor;
+  background: transparent;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+[data-upload-target] [data-upload-button]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

package/src/glass/card.css

@@ -0,0 +1,63 @@
+/**
+ * Card - Glass Theme Styles
+ *
+ * Glassmorphism styling with blur and transparency.
+ */
+
+/* =============================================================================
+   Base Card Styles
+   ============================================================================= */
+
+[data-style='glass'] [data-card] {
+	@apply backdrop-blur-md border shadow-lg bg-surface-z2/60 border-surface-z5/20 text-surface-z9;
+}
+
+/* Interactive cards (buttons) */
+[data-style='glass'] [data-card][data-card-interactive] {
+	cursor: pointer;
+	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+[data-style='glass'] [data-card][data-card-interactive]:hover {
+	@apply shadow-xl bg-surface-z2/80;
+	transform: translateY(-2px);
+}
+
+[data-style='glass'] [data-card][data-card-interactive]:active {
+	@apply shadow-lg;
+	transform: translateY(0);
+}
+
+/* =============================================================================
+   Card Sections
+   ============================================================================= */
+
+[data-style='glass'] [data-card-header] {
+	@apply border-surface-z5/20 border-b;
+}
+
+[data-style='glass'] [data-card-body] {
+	@apply text-surface-z8;
+}
+
+[data-style='glass'] [data-card-footer] {
+	@apply border-surface-z5/20 border-t text-surface-z7;
+}
+
+/* =============================================================================
+   Focus States
+   ============================================================================= */
+
+[data-style='glass'] [data-card][data-card-interactive]:focus-visible {
+	@apply outline-none ring-2 ring-surface-z5/40;
+}
+
+/* =============================================================================
+   Disabled State
+   ============================================================================= */
+
+[data-style='glass'] [data-card][data-card-interactive][data-disabled],
+[data-style='glass'] [data-card][data-card-interactive]:disabled {
+	@apply opacity-50 cursor-not-allowed;
+	transform: none;
+}