@rokkit/themes 1.0.0-next.99 → 1.0.1

package/src/base/search-filter.css

@@ -0,0 +1,132 @@
+/**
+ * SearchFilter - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-search-filter] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+/* =============================================================================
+   Input Wrapper
+   ============================================================================= */
+
+[data-search-input-wrapper] {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+[data-search-input] {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  outline: none;
+  font-size: inherit;
+  background: transparent;
+}
+
+/* Remove native search decoration */
+[data-search-input]::-webkit-search-decoration,
+[data-search-input]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+[data-search-clear] {
+  position: absolute;
+  right: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 1.125rem;
+  line-height: 1;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+}
+
+/* =============================================================================
+   Tags
+   ============================================================================= */
+
+[data-search-tags] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+[data-search-tag] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+[data-search-tag-text] {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-search-tag-remove] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1;
+  padding: 0;
+  border-radius: 0.125rem;
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+[data-search-filter][data-size='sm'] [data-search-input] {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-search-filter][data-size='md'] [data-search-input],
+[data-search-filter]:not([data-size]) [data-search-input] {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+[data-search-filter][data-size='lg'] [data-search-input] {
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+}
+
+[data-search-filter][data-size='sm'] [data-search-tag] {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.625rem;
+}
+
+[data-search-filter][data-size='md'] [data-search-tag],
+[data-search-filter]:not([data-size]) [data-search-tag] {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-search-filter][data-size='lg'] [data-search-tag] {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}

package/src/base/select.css

@@ -0,0 +1,413 @@
+/**
+ * Select - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Select Container
+   ============================================================================= */
+
+[data-select] {
+  position: relative;
+  display: inline-block;
+}
+
+[data-select][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Trigger Button
+   ============================================================================= */
+
+[data-select-trigger] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 180px;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 150ms ease;
+}
+
+[data-select-trigger]:disabled {
+  cursor: not-allowed;
+}
+
+[data-select-trigger]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Size variants */
+[data-select][data-size='sm'] [data-select-trigger] {
+  height: 1.75rem;
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-select][data-size='md'] [data-select-trigger],
+[data-select]:not([data-size]) [data-select-trigger] {
+  height: 2.25rem;
+  padding-inline: 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-select][data-size='lg'] [data-select-trigger] {
+  height: 2.75rem;
+  padding-inline: 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Trigger Value Display
+   ============================================================================= */
+
+[data-select-value] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+[data-select-value-icon] {
+  flex-shrink: 0;
+}
+
+[data-select-value-text] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-select-value-custom] {
+  display: contents;
+}
+
+[data-select-value-custom] > button,
+[data-select-value-custom] > a {
+  display: contents;
+}
+
+[data-select-placeholder] {
+  opacity: 0.6;
+}
+
+[data-select-arrow] {
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+
+[data-select][data-open='true'] [data-select-arrow] {
+  transform: rotate(180deg);
+}
+
+/* Arrow sizes */
+[data-select][data-size='sm'] [data-select-arrow] {
+  font-size: 0.875rem;
+}
+[data-select][data-size='md'] [data-select-arrow],
+[data-select]:not([data-size]) [data-select-arrow] {
+  font-size: 1rem;
+}
+[data-select][data-size='lg'] [data-select-arrow] {
+  font-size: 1.125rem;
+}
+
+/* =============================================================================
+   MultiSelect Tags
+   ============================================================================= */
+
+[data-select-tags] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+[data-select-tag] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.75em;
+  line-height: 1.25;
+}
+
+[data-select-tag-text] {
+  white-space: nowrap;
+}
+
+[data-select-tag-remove] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 0.125rem;
+  font-size: 0.75em;
+  opacity: 0.7;
+  transition: opacity 150ms ease;
+}
+
+[data-select-tag-remove]:hover {
+  opacity: 1;
+}
+
+[data-select-count] {
+  font-weight: 500;
+}
+
+/* =============================================================================
+   Dropdown Panel
+   ============================================================================= */
+
+[data-select-dropdown] {
+  position: absolute;
+  z-index: 50;
+  min-width: 100%;
+  max-height: var(--select-dropdown-max-height, 200px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border-radius: 0.5rem;
+}
+
+/* Direction: down (default) */
+[data-select][data-direction='down'] [data-select-dropdown],
+[data-select]:not([data-direction]) [data-select-dropdown] {
+  top: calc(100% + 4px);
+  animation: select-dropdown-down 150ms ease;
+}
+
+/* Direction: up */
+[data-select][data-direction='up'] [data-select-dropdown] {
+  bottom: calc(100% + 4px);
+  animation: select-dropdown-up 150ms ease;
+}
+
+/* Alignment */
+[data-select][data-align='left'] [data-select-dropdown],
+[data-select]:not([data-align]) [data-select-dropdown] {
+  left: 0;
+}
+
+[data-select][data-align='right'] [data-select-dropdown] {
+  right: 0;
+}
+
+@keyframes select-dropdown-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes select-dropdown-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* =============================================================================
+   Select Options
+   ============================================================================= */
+
+[data-select-option] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: background-color 150ms ease;
+}
+
+[data-select-option][data-disabled='true'],
+[data-select-option]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-select-option]:focus,
+[data-select-option]:focus-visible {
+  outline: none;
+}
+
+/* Size variants for options */
+[data-select][data-size='sm'] [data-select-option] {
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-select][data-size='md'] [data-select-option],
+[data-select]:not([data-size]) [data-select-option] {
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-select][data-size='lg'] [data-select-option] {
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+/* Check mark for single select */
+[data-select-check] {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* Checkbox for multi select */
+[data-select-checkbox] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid currentColor;
+  font-size: 0.75rem;
+}
+
+/* =============================================================================
+   Custom Snippet Wrapper
+   ============================================================================= */
+
+[data-select-option-custom] {
+  display: contents;
+}
+
+[data-select-option-custom] > button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+/* Size variants for custom snippet buttons */
+[data-select][data-size='sm'] [data-select-option-custom] > button {
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-select][data-size='md'] [data-select-option-custom] > button,
+[data-select]:not([data-size]) [data-select-option-custom] > button {
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-select][data-size='lg'] [data-select-option-custom] > button {
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Groups
+   ============================================================================= */
+
+[data-select-group] {
+  padding-block: 0.25rem;
+}
+
+[data-select-group-label] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Group label sizes */
+[data-select][data-size='sm'] [data-select-group-label] {
+  padding: 0.25rem 0.5rem;
+}
+[data-select][data-size='md'] [data-select-group-label],
+[data-select]:not([data-size]) [data-select-group-label] {
+  padding: 0.375rem 0.75rem;
+}
+[data-select][data-size='lg'] [data-select-group-label] {
+  padding: 0.5rem 1rem;
+}
+
+[data-select-group-label] > [data-select-group-icon] {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+/* =============================================================================
+   Divider
+   ============================================================================= */
+
+[data-select-divider] {
+  height: 1px;
+  margin-block: 0.25rem;
+}
+
+/* =============================================================================
+   Filter Input (filterable mode)
+   ============================================================================= */
+
+[data-select-filter] {
+  padding: 0.375rem;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+[data-select-filter-input] {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  padding: 0.375rem 0.5rem;
+  font-size: inherit;
+  outline: none;
+  background: transparent;
+}
+
+/* =============================================================================
+   Empty State (no filter results)
+   ============================================================================= */
+
+[data-select-empty] {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  text-align: center;
+  opacity: 0.6;
+}

package/src/base/shine.css

@@ -0,0 +1,14 @@
+/* Shine — base structural styles */
+
+[data-shine-filter] {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  width: 0;
+  height: 0;
+  overflow: visible;
+}
+
+[data-shine] {
+  display: inline-block;
+}

package/src/base/stack.css

@@ -0,0 +1,76 @@
+/* Stack — base structural styles */
+
+[data-stack] {
+  display: flex;
+}
+
+[data-stack][data-direction='vertical'] {
+  flex-direction: column;
+}
+
+[data-stack][data-direction='horizontal'] {
+  flex-direction: row;
+}
+
+/* Gap sizes */
+[data-stack][data-gap='none'] {
+  gap: 0;
+}
+
+[data-stack][data-gap='xs'] {
+  gap: 0.25rem;
+}
+
+[data-stack][data-gap='sm'] {
+  gap: 0.5rem;
+}
+
+[data-stack][data-gap='md'] {
+  gap: 1rem;
+}
+
+[data-stack][data-gap='lg'] {
+  gap: 1.5rem;
+}
+
+[data-stack][data-gap='xl'] {
+  gap: 2rem;
+}
+
+/* Alignment */
+[data-stack][data-align='start'] {
+  align-items: flex-start;
+}
+
+[data-stack][data-align='center'] {
+  align-items: center;
+}
+
+[data-stack][data-align='end'] {
+  align-items: flex-end;
+}
+
+[data-stack][data-align='stretch'] {
+  align-items: stretch;
+}
+
+/* Justification */
+[data-stack][data-justify='start'] {
+  justify-content: flex-start;
+}
+
+[data-stack][data-justify='center'] {
+  justify-content: center;
+}
+
+[data-stack][data-justify='end'] {
+  justify-content: flex-end;
+}
+
+[data-stack][data-justify='between'] {
+  justify-content: space-between;
+}
+
+[data-stack][data-justify='around'] {
+  justify-content: space-around;
+}

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/step-indicator.css

@@ -0,0 +1,74 @@
+/* StepIndicator — base structural styles */
+
+[data-step-indicator] {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  align-items: flex-start;
+}
+
+[data-step-item] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+/* Connector line between steps */
+[data-step-item]:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 1.25rem; /* vertically centered with the 2.5rem number circle */
+  left: 50%;
+  width: 100%;
+  height: 2px;
+}
+
+/* Reset button element when used as step-number (complete steps) */
+button[data-step-number] {
+  appearance: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+[data-step-number] {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  border-width: 2px;
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+  position: relative;
+  z-index: 1;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+[data-step-label] {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  text-align: center;
+  max-width: 6rem;
+  line-height: 1.3;
+  transition: color 0.2s ease;
+}
+
+/* Interaction affordances */
+[data-step-item][data-step-state='complete'] {
+  cursor: pointer;
+}
+
+[data-step-item][data-step-state='current'],
+[data-step-item][data-step-state='upcoming'] {
+  cursor: default;
+}