@rokkit/themes 1.0.0-next.145 → 1.0.0-next.146

package/src/base/dropdown.css

@@ -0,0 +1,166 @@
+/**
+ * Dropdown - Base Structural Styles
+ *
+ * A trigger button that displays the selected value, opening a panel of options.
+ * No colors, shadows, or visual theming — those belong in theme styles.
+ */
+
+/* =============================================================================
+   Root Container
+   ============================================================================= */
+
+[data-dropdown] {
+  position: relative;
+  display: inline-block;
+}
+
+[data-dropdown][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Trigger Button
+   ============================================================================= */
+
+[data-dropdown-trigger] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 150ms ease;
+}
+
+[data-dropdown-trigger]:disabled {
+  cursor: not-allowed;
+}
+
+[data-dropdown-trigger]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Size variants */
+[data-dropdown][data-size='sm'] [data-dropdown-trigger] {
+  height: 1.5rem;
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-dropdown][data-size='md'] [data-dropdown-trigger],
+[data-dropdown]:not([data-size]) [data-dropdown-trigger] {
+  height: 2rem;
+  padding-inline: 0.625rem;
+  font-size: 0.875rem;
+}
+
+[data-dropdown][data-size='lg'] [data-dropdown-trigger] {
+  height: 2.5rem;
+  padding-inline: 0.75rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Trigger Elements
+   ============================================================================= */
+
+[data-dropdown-trigger] > [data-dropdown-icon] {
+  flex-shrink: 0;
+  font-size: 1em;
+}
+
+[data-dropdown-trigger] > [data-dropdown-label] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: capitalize;
+}
+
+[data-dropdown-trigger] > [data-dropdown-arrow] {
+  flex-shrink: 0;
+  font-size: 0.75em;
+  transition: transform 150ms ease;
+}
+
+[data-dropdown][data-open='true'] [data-dropdown-trigger] > [data-dropdown-arrow] {
+  transform: rotate(180deg);
+}
+
+/* =============================================================================
+   Panel
+   ============================================================================= */
+
+[data-dropdown-panel] {
+  position: absolute;
+  z-index: 50;
+  min-width: 100%;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  margin-top: 0.375rem;
+}
+
+[data-dropdown][data-align='end'] [data-dropdown-panel] {
+  right: 0;
+  left: auto;
+}
+
+[data-dropdown][data-align='start'] [data-dropdown-panel] {
+  left: 0;
+  right: auto;
+}
+
+[data-dropdown][data-direction='up'] [data-dropdown-panel] {
+  bottom: 100%;
+  top: auto;
+  margin-top: 0;
+  margin-bottom: 0.375rem;
+}
+
+/* =============================================================================
+   Options
+   ============================================================================= */
+
+[data-dropdown-option] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-block: 0.375rem;
+  padding-inline: 0.75rem;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: all 100ms ease;
+  white-space: nowrap;
+}
+
+[data-dropdown][data-size='sm'] [data-dropdown-option] {
+  padding-block: 0.25rem;
+  padding-inline: 0.625rem;
+  font-size: 0.75rem;
+}
+
+[data-dropdown-option]:disabled,
+[data-dropdown-option][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[data-dropdown-option-label] {
+  flex: 1;
+}
+
+/* =============================================================================
+   Separator
+   ============================================================================= */
+
+[data-dropdown-separator] {
+  height: 1px;
+  border: none;
+  margin-block: 0.25rem;
+}

package/src/base/index.css

@@ -8,6 +8,7 @@
 @import './button.css';
 @import './item.css';
 @import './menu.css';
+@import './dropdown.css';
 @import './select.css';
 @import './toolbar.css';
 @import './tabs.css';
@@ -39,3 +40,6 @@
 @import './upload-target.css';
 @import './upload-progress.css';
 @import './toc.css';
+@import './status-list.css';
+@import './message.css';
+@import './alert-list.css';

package/src/base/message.css

@@ -0,0 +1,62 @@
+/* Message — base structural styles */
+
+[data-message-root] {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-width: 1px;
+  border-style: solid;
+  cursor: default;
+  user-select: none;
+}
+
+[data-message-icon] {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  margin-top: 0.125rem;
+}
+
+[data-message-text] {
+  flex: 1;
+  min-width: 0;
+}
+
+[data-message-actions] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  margin-top: -0.125rem;
+}
+
+[data-message-dismiss] {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: -0.125rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0;
+  opacity: 0.5;
+  border-radius: 0.25rem;
+}
+
+[data-message-dismiss]:hover {
+  opacity: 1;
+}

package/src/base/status-list.css

@@ -0,0 +1,19 @@
+/* StatusList — base structural styles */
+
+[data-status-list] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+[data-status-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+[data-status-item] p {
+  margin: 0;
+}

package/src/base/toc.css

@@ -38,7 +38,9 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: color 150ms ease, border-color 150ms ease;
+  transition:
+    color 150ms ease,
+    border-color 150ms ease;
 }
 
 /* h3 items indented */

package/src/base/toolbar.css

@@ -20,6 +20,10 @@
   opacity: 0.5;
 }
 
+[data-toolbar][data-toolbar-width='fit'] {
+  width: fit-content;
+}
+
 /* Position variants - horizontal */
 [data-toolbar][data-toolbar-position='top'],
 [data-toolbar][data-toolbar-position='bottom'],

package/src/glass/card.css

@@ -64,3 +64,40 @@
   @apply cursor-not-allowed opacity-50;
   transform: none;
 }
+
+/* =============================================================================
+   Variants
+   ============================================================================= */
+
+/* Primary — tinted primary glass */
+[data-style='glass'] [data-card][data-variant='primary'] {
+  @apply bg-primary-z4/40 border-primary-z5/30 text-on-primary border shadow-lg backdrop-blur-md;
+}
+
+[data-style='glass'] [data-card][data-variant='primary'] [data-card-header],
+[data-style='glass'] [data-card][data-variant='primary'] [data-card-footer] {
+  @apply border-primary-z4/20;
+}
+
+[data-style='glass'] [data-card][data-variant='primary'] [data-card-body] {
+  @apply text-on-primary/80;
+}
+
+/* Secondary — tinted secondary glass */
+[data-style='glass'] [data-card][data-variant='secondary'] {
+  @apply bg-secondary-z4/40 border-secondary-z5/30 text-on-secondary border shadow-lg backdrop-blur-md;
+}
+
+[data-style='glass'] [data-card][data-variant='secondary'] [data-card-header],
+[data-style='glass'] [data-card][data-variant='secondary'] [data-card-footer] {
+  @apply border-secondary-z4/20;
+}
+
+[data-style='glass'] [data-card][data-variant='secondary'] [data-card-body] {
+  @apply text-on-secondary/80;
+}
+
+/* Tertiary — barely-there frosted glass */
+[data-style='glass'] [data-card][data-variant='tertiary'] {
+  @apply bg-surface-z3/30 border-surface-z5/10 text-surface-z7 border backdrop-blur-md;
+}

package/src/glass/dropdown.css

@@ -0,0 +1,50 @@
+/**
+ * Dropdown - Glass Theme Styles
+ *
+ * Glassmorphism with blur and transparency.
+ */
+
+[data-style='glass'] [data-dropdown-trigger] {
+  @apply bg-none bg-surface-z1/70 text-surface-z8 border-surface-z5/20 border backdrop-blur-md;
+}
+
+[data-style='glass'] [data-dropdown-trigger]:hover:not(:disabled) {
+  @apply bg-none bg-surface-z2/80 text-surface-z10 border-surface-z5/30;
+}
+
+[data-style='glass'] [data-dropdown-trigger]:focus-visible {
+  @apply ring-surface-z5/40 ring-1 outline-none;
+}
+
+[data-style='glass'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
+  @apply bg-none bg-primary-z5/30 border-primary-z5/50;
+}
+
+[data-style='glass'] [data-dropdown-trigger] [data-dropdown-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='glass'] [data-dropdown-trigger] [data-dropdown-arrow] {
+  @apply text-surface-z5;
+}
+
+[data-style='glass'] [data-dropdown-panel] {
+  @apply bg-none bg-surface-z2/50 border-surface-z5/20 border shadow-lg backdrop-blur-lg;
+}
+
+[data-style='glass'] [data-dropdown-option] {
+  @apply text-surface-z8;
+}
+
+[data-style='glass'] [data-dropdown-option]:hover:not(:disabled),
+[data-style='glass'] [data-dropdown-option]:focus:not(:disabled) {
+  @apply bg-none bg-surface-z2/15 text-surface-z10 outline-none;
+}
+
+[data-style='glass'] [data-dropdown-option][data-active='true'] {
+  @apply bg-none bg-primary-z5/20 text-surface-z10;
+}
+
+[data-style='glass'] [data-dropdown-separator] {
+  @apply bg-none bg-surface-z5/20;
+}

package/src/glass/index.css

@@ -15,6 +15,7 @@
 @import './tree.css';
 @import './select.css';
 @import './menu.css';
+@import './dropdown.css';
 @import './floating-action.css';
 @import './table.css';
 @import './search-filter.css';
@@ -22,3 +23,6 @@
 @import './timeline.css';
 @import './floating-navigation.css';
 @import './toc.css';
+@import './card.css';
+@import './message.css';
+@import './status-list.css';

package/src/glass/list.css

@@ -28,23 +28,23 @@
 /* Hover and focus (keyboard navigation) */
 [data-style='glass'] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
 [data-style='glass'] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
-  @apply text-surface-z10 bg-surface-z2/15 outline-none;
+  @apply bg-none bg-surface-z2/15 text-surface-z10 outline-none;
 }
 
 /* Active state — muted when list not focused */
 [data-style='glass'] [data-list] [data-list-item][data-active='true'] {
-  @apply bg-surface-z2/15 text-primary-z9;
+  @apply bg-none bg-surface-z2/15 text-primary-z9;
 }
 
 /* Active state — full highlight when list has focus */
 [data-style='glass'] [data-list]:focus-within [data-list-item][data-active='true'] {
-  @apply bg-primary-z5/30 text-primary-z9;
+  @apply bg-none bg-primary-z5/30 text-primary-z9;
 }
 
 /* Active + hover/focus */
 [data-style='glass'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled),
 [data-style='glass'] [data-list] [data-list-item][data-active='true']:focus:not(:disabled) {
-  @apply bg-primary-z5/40;
+  @apply bg-none bg-primary-z5/40;
 }
 
 /* =============================================================================
@@ -73,11 +73,11 @@
 }
 
 [data-style='glass'] [data-list] [data-list-item] [data-item-badge] {
-  @apply text-surface-z6 bg-surface-z2/15;
+  @apply bg-none bg-surface-z2/15 text-surface-z6;
 }
 
 [data-style='glass'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
-  @apply text-primary-z8 bg-primary-z5/25;
+  @apply bg-none bg-primary-z5/25 text-primary-z8;
 }
 
 /* =============================================================================
@@ -90,7 +90,7 @@
 
 [data-style='glass'] [data-list] [data-list-group]:hover:not(:disabled),
 [data-style='glass'] [data-list] [data-list-group]:focus:not(:disabled) {
-  @apply bg-surface-z3/25 text-surface-z8;
+  @apply bg-none bg-surface-z3/25 text-surface-z8;
 }
 
 /* =============================================================================
@@ -98,7 +98,7 @@
    ============================================================================= */
 
 [data-style='glass'] [data-list] [data-list-separator] {
-  @apply bg-surface-z5/20;
+  @apply bg-none bg-surface-z5/20;
 }
 
 /* =============================================================================
@@ -106,15 +106,15 @@
    ============================================================================= */
 
 [data-style='glass'] [data-list] [data-list-item][data-selected='true'] {
-  @apply bg-primary-z5/20 text-primary-z9;
+  @apply bg-none bg-primary-z5/20 text-primary-z9;
 }
 
 [data-style='glass'] [data-list]:focus-within [data-list-item][data-selected='true'] {
-  @apply bg-primary-z5/30;
+  @apply bg-none bg-primary-z5/30;
 }
 
 [data-style='glass'] [data-list] [data-list-item][data-selected='true']:hover:not(:disabled) {
-  @apply bg-primary-z5/40;
+  @apply bg-none bg-primary-z5/40;
 }
 
 [data-style='glass'] [data-list] [data-list-item][data-selected='true'] [data-item-icon] {

package/src/glass/menu.css

@@ -9,11 +9,11 @@
    ============================================================================= */
 
 [data-style='glass'] [data-menu-trigger] {
-  @apply text-surface-z8 bg-surface-z1/70 border-surface-z5/20 border backdrop-blur-md;
+  @apply bg-none bg-surface-z1/70 text-surface-z8 border-surface-z5/20 border backdrop-blur-md;
 }
 
 [data-style='glass'] [data-menu-trigger]:hover:not(:disabled) {
-  @apply text-surface-z10 bg-surface-z2/80 border-surface-z5/30;
+  @apply bg-none bg-surface-z2/80 text-surface-z10 border-surface-z5/30;
 }
 
 [data-style='glass'] [data-menu-trigger]:focus-visible {
@@ -21,7 +21,7 @@
 }
 
 [data-style='glass'] [data-menu][data-open='true'] [data-menu-trigger] {
-  @apply bg-primary-z5/30 border-primary-z5/50;
+  @apply bg-none bg-primary-z5/30 border-primary-z5/50;
 }
 
 /* Trigger elements */
@@ -42,7 +42,7 @@
    ============================================================================= */
 
 [data-style='glass'] [data-menu-dropdown] {
-  @apply bg-surface-z2/50 border-surface-z5/20 border shadow-lg backdrop-blur-lg;
+  @apply bg-none bg-surface-z2/50 border-surface-z5/20 border shadow-lg backdrop-blur-lg;
 }
 
 /* =============================================================================
@@ -55,7 +55,7 @@
 
 [data-style='glass'] [data-menu-item]:hover:not(:disabled),
 [data-style='glass'] [data-menu-item]:focus:not(:disabled) {
-  @apply text-surface-z10 bg-surface-z2/15 outline-none;
+  @apply bg-none bg-surface-z2/15 text-surface-z10 outline-none;
 }
 
 [data-style='glass'] [data-menu-item]:focus-visible {
@@ -88,5 +88,5 @@
    ============================================================================= */
 
 [data-style='glass'] [data-menu-separator] {
-  @apply bg-surface-z5/20;
+  @apply bg-none bg-surface-z5/20;
 }

package/src/glass/message.css

@@ -0,0 +1,36 @@
+/**
+ * Message - Glass Theme Styles
+ */
+
+
+[data-style='glass'] [data-message-root][data-type='error'] {
+  @apply bg-error-z2/50 border-error-z4/40 text-error-z8 backdrop-blur-sm;
+}
+[data-style='glass'] [data-message-root][data-type='error'] [data-message-icon],
+[data-style='glass'] [data-message-root][data-type='error'] [data-message-dismiss] {
+  @apply text-error-z6;
+}
+
+[data-style='glass'] [data-message-root][data-type='warning'] {
+  @apply bg-warning-z2/50 border-warning-z4/40 text-warning-z8 backdrop-blur-sm;
+}
+[data-style='glass'] [data-message-root][data-type='warning'] [data-message-icon],
+[data-style='glass'] [data-message-root][data-type='warning'] [data-message-dismiss] {
+  @apply text-warning-z6;
+}
+
+[data-style='glass'] [data-message-root][data-type='info'] {
+  @apply bg-info-z2/50 border-info-z4/40 text-info-z8 backdrop-blur-sm;
+}
+[data-style='glass'] [data-message-root][data-type='info'] [data-message-icon],
+[data-style='glass'] [data-message-root][data-type='info'] [data-message-dismiss] {
+  @apply text-info-z6;
+}
+
+[data-style='glass'] [data-message-root][data-type='success'] {
+  @apply bg-success-z2/50 border-success-z4/40 text-success-z8 backdrop-blur-sm;
+}
+[data-style='glass'] [data-message-root][data-type='success'] [data-message-icon],
+[data-style='glass'] [data-message-root][data-type='success'] [data-message-dismiss] {
+  @apply text-success-z6;
+}

package/src/glass/status-list.css

@@ -0,0 +1,66 @@
+/**
+ * StatusList - Glass Theme Styles
+ */
+
+/* ── @rokkit/ui StatusList: icon and text colors by status ── */
+
+[data-style='glass'] [data-status-item][data-status='pass'] span {
+  @apply text-success-z6;
+}
+[data-style='glass'] [data-status-item][data-status='fail'] span {
+  @apply text-error-z6;
+}
+[data-style='glass'] [data-status-item][data-status='warn'] span {
+  @apply text-warning-z6;
+}
+[data-style='glass'] [data-status-item][data-status='unknown'] span {
+  @apply text-surface-z4;
+}
+
+[data-style='glass'] [data-status-item][data-status='pass'] {
+  @apply text-success-z7;
+}
+[data-style='glass'] [data-status-item][data-status='fail'] {
+  @apply text-error-z7;
+}
+[data-style='glass'] [data-status-item][data-status='warn'] {
+  @apply text-warning-z7;
+}
+[data-style='glass'] [data-status-item][data-status='unknown'] {
+  @apply text-surface-z5;
+}
+
+/* ── @rokkit/forms StatusList: group headers by severity ── */
+
+[data-style='glass'] [data-status-group][data-severity='error'] [data-status-header] {
+  @apply text-error-z6;
+}
+[data-style='glass'] [data-status-group][data-severity='warning'] [data-status-header] {
+  @apply text-warning-z6;
+}
+[data-style='glass'] [data-status-group][data-severity='info'] [data-status-header] {
+  @apply text-info-z6;
+}
+[data-style='glass'] [data-status-group][data-severity='success'] [data-status-header] {
+  @apply text-success-z6;
+}
+
+/* ── @rokkit/forms StatusList: item colors ── */
+
+[data-style='glass'] [data-status-item][data-status='error'] {
+  @apply text-error-z7;
+}
+[data-style='glass'] [data-status-item][data-status='warning'] {
+  @apply text-warning-z7;
+}
+[data-style='glass'] [data-status-item][data-status='info'] {
+  @apply text-info-z7;
+}
+[data-style='glass'] [data-status-item][data-status='success'] {
+  @apply text-success-z7;
+}
+
+/* Count badge */
+[data-style='glass'] [data-status-count] {
+  @apply bg-surface-z2/60 backdrop-blur-sm text-surface-z7 font-semibold;
+}