atomicuilibrary 0.0.1

package/dist/collection/components/toolbar/toolbar.css

@@ -0,0 +1,1186 @@
+@charset "UTF-8";
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+/* =============================================================================
+ui-toolbar — Enterprise-grade Toolbar Component
+============================================================================= */
+/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
+:host {
+  /* Layout */
+  --toolbar-height: 48px;
+  --toolbar-padding: 8px 12px;
+  --toolbar-gap: 4px;
+  /* Colors */
+  --toolbar-bg: var(--bg-primary, #ffffff);
+  --toolbar-border-color: var(--border-default, #e5e7eb);
+  --toolbar-text: var(--text-primary, #111827);
+  --toolbar-muted: var(--text-secondary, #6b7280);
+  --toolbar-separator-color: var(--border-default, #e5e7eb);
+  /* Item */
+  --toolbar-item-bg: transparent;
+  --toolbar-item-bg-hover: var(--bg-secondary, #f3f4f6);
+  --toolbar-item-bg-active: var(--color-primary-light, #eff6ff);
+  --toolbar-item-color: var(--text-primary, #374151);
+  --toolbar-item-color-active: var(--color-primary, #2563eb);
+  --toolbar-item-radius: 6px;
+  --toolbar-item-height-sm: 28px;
+  --toolbar-item-height-md: 34px;
+  --toolbar-item-height-lg: 40px;
+  --toolbar-item-height-xl: 48px;
+  --toolbar-item-padding-sm: 0 8px;
+  --toolbar-item-padding-md: 0 12px;
+  --toolbar-item-padding-lg: 0 16px;
+  /* Switch */
+  --toolbar-switch-width: 34px;
+  --toolbar-switch-height: 18px;
+  --toolbar-switch-on: var(--color-primary, #2563eb);
+  --toolbar-switch-off: var(--border-strong, #d1d5db);
+  --toolbar-switch-thumb: #ffffff;
+  /* Badge */
+  --toolbar-badge-bg: var(--color-danger, #ef4444);
+  --toolbar-badge-color: #ffffff;
+  --toolbar-badge-size: 16px;
+  /* Overflow Menu (Dialog-like) */
+  --toolbar-overflow-menu-bg: #ffffff;
+  --toolbar-overflow-menu-border: rgba(0, 0, 0, 0.08);
+  --toolbar-overflow-menu-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1);
+  --toolbar-overflow-menu-radius: 16px;
+  --toolbar-overflow-item-height: 40px;
+  /* Animation */
+  --toolbar-transition: 0.15s ease;
+  --toolbar-shadow-1: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
+  --toolbar-shadow-2: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .05);
+  --toolbar-shadow-3: 0 8px 24px rgba(0, 0, 0, .10), 0 4px 8px rgba(0, 0, 0, .06);
+  --toolbar-shadow-4: 0 16px 40px rgba(0, 0, 0, .12), 0 6px 12px rgba(0, 0, 0, .07);
+  display: block;
+  box-sizing: border-box;
+  position: relative;
+  max-width: 100%;
+}
+
+/* ─── Host base ─────────────────────────────────────────────────────────────── */
+:host {
+  --_item-h: var(--toolbar-item-height-md);
+  --_item-p: var(--toolbar-item-padding-md);
+}
+
+:host(.size-sm) {
+  --_item-h: var(--toolbar-item-height-sm);
+  --_item-p: var(--toolbar-item-padding-sm);
+}
+
+:host(.size-md) {
+  --_item-h: var(--toolbar-item-height-md);
+  --_item-p: var(--toolbar-item-padding-md);
+}
+
+:host(.size-lg) {
+  --_item-h: var(--toolbar-item-height-lg);
+  --_item-p: var(--toolbar-item-padding-lg);
+}
+
+:host(.size-xl) {
+  --_item-h: var(--toolbar-item-height-xl);
+  --_item-p: var(--toolbar-item-padding-lg);
+}
+
+/* =============================================================================
+   Toolbar Body
+   ============================================================================= */
+.toolbar-body {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  min-height: var(--toolbar-height);
+  background: var(--toolbar-bg);
+  color: var(--toolbar-text);
+  font-family: var(--font-family);
+  font-size: 13px;
+  transition: background var(--toolbar-transition), color var(--toolbar-transition);
+  position: relative;
+}
+
+:host(.orientation-vertical) .toolbar-body {
+  flex-direction: column;
+  align-items: stretch;
+  width: var(--toolbar-height);
+  min-height: unset;
+  height: 100%;
+}
+
+/* ─── Alignment ─────────────────────────────────────────────────────────────── */
+:host(.align-start) .toolbar-body {
+  justify-content: flex-start;
+}
+
+:host(.align-center) .toolbar-body {
+  justify-content: center;
+}
+
+:host(.align-end) .toolbar-body {
+  justify-content: flex-end;
+}
+
+:host(.align-space-between) .toolbar-body {
+  justify-content: space-between;
+}
+
+:host(.align-space-around) .toolbar-body {
+  justify-content: space-around;
+}
+
+:host(.align-space-evenly) .toolbar-body {
+  justify-content: space-evenly;
+}
+
+/* ─── Overflow strategies ───────────────────────────────────────────────────── */
+:host .toolbar-body {
+  /* Items clip within the bar; the absolutely-positioned overflow button stays visible */
+  overflow: hidden;
+}
+
+:host(.overflow-scroll) .toolbar-body {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  /* Vertical orientation support */
+}
+:host(.orientation-vertical) :host(.overflow-scroll) .toolbar-body {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+:host(.overflow-scroll) .toolbar-body {
+  /* Thin scrollbar that stays within the bar ('not over the bar') */
+  scrollbar-width: thin;
+  scrollbar-color: var(--toolbar-muted) transparent;
+}
+:host(.overflow-scroll) .toolbar-body::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  background: transparent;
+}
+:host(.overflow-scroll) .toolbar-body::-webkit-scrollbar-thumb {
+  background: var(--toolbar-muted);
+  border-radius: 4px;
+  border: 1px solid transparent;
+  background-clip: content-box;
+  opacity: 0.5;
+}
+:host(.overflow-scroll) .toolbar-body {
+  /* Show scrollbar only on hover or interaction to keep it clean */
+}
+:host(.overflow-scroll) .toolbar-body:not(:hover) {
+  scrollbar-color: transparent transparent;
+}
+:host(.overflow-scroll) .toolbar-body:not(:hover)::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+:host(.overflow-visible) .toolbar-body {
+  overflow: visible;
+}
+
+:host(.overflow-wrap) .toolbar-body {
+  flex-wrap: wrap;
+  height: auto;
+  min-height: var(--toolbar-height);
+}
+
+:host(.overflow-dropdown) .toolbar-body {
+  overflow: hidden;
+}
+
+/* Reveal the panel when an overlay / dropdown inside the toolbar is open */
+:host(.overflow-dropdown.has-open-overlay) .toolbar-body,
+:host(.overflow-dropdown.is-overflow-open) .toolbar-body,
+:host(.overflow-dropdown.has-open-dropdown) .toolbar-body,
+:host(.has-open-overlay) .toolbar-body {
+  overflow: visible;
+}
+
+/* ─── Elevation ─────────────────────────────────────────────────────────────── */
+:host(.elevation-0) .toolbar-body {
+  box-shadow: none;
+}
+
+:host(.elevation-1) .toolbar-body {
+  box-shadow: var(--toolbar-shadow-1);
+}
+
+:host(.elevation-2) .toolbar-body {
+  box-shadow: var(--toolbar-shadow-2);
+}
+
+:host(.elevation-3) .toolbar-body {
+  box-shadow: var(--toolbar-shadow-3);
+}
+
+:host(.elevation-4) .toolbar-body {
+  box-shadow: var(--toolbar-shadow-4);
+}
+
+/* ─── Borders ───────────────────────────────────────────────────────────────── */
+:host(.is-bordered) .toolbar-body {
+  border: 1px solid var(--toolbar-border-color);
+}
+
+:host(.is-rounded) .toolbar-body {
+  border-radius: 12px;
+}
+
+/* ─── Position ──────────────────────────────────────────────────────────────── */
+:host(.position-sticky) {
+  position: sticky;
+  z-index: var(--z-sticky, 10);
+}
+
+:host(.position-fixed) {
+  position: fixed;
+  z-index: var(--z-toolbar, 20);
+  width: 100%;
+}
+
+/* =============================================================================
+   Variants
+   ============================================================================= */
+/* default — already styled above */
+:host(.variant-primary) .toolbar-body {
+  background: var(--color-primary, #2563eb);
+  color: #ffffff;
+  --toolbar-item-color: rgba(255, 255, 255, 0.92);
+  --toolbar-item-bg-hover: rgba(255, 255, 255, 0.12);
+  --toolbar-item-bg-active: rgba(255, 255, 255, 0.2);
+  --toolbar-item-color-active: #ffffff;
+  --toolbar-separator-color: rgba(255, 255, 255, 0.2);
+}
+
+:host(.variant-secondary) .toolbar-body {
+  background: var(--bg-secondary, #f8fafc);
+  --toolbar-item-bg-hover: var(--bg-primary, #ffffff);
+}
+
+:host(.variant-minimal) .toolbar-body {
+  background: transparent;
+  box-shadow: none;
+  border-bottom: 1px solid var(--toolbar-border-color);
+}
+
+:host(.variant-glass) .toolbar-body {
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
+  --toolbar-item-color: var(--text-primary, #1e293b);
+  --toolbar-item-bg-hover: rgba(255, 255, 255, 0.2);
+  --toolbar-separator-color: rgba(255, 255, 255, 0.2);
+}
+
+:host(.variant-elevated) .toolbar-body {
+  box-shadow: var(--toolbar-shadow-3);
+  border-bottom: none;
+}
+
+:host(.variant-outlined) .toolbar-body {
+  background: transparent;
+  border: 1px solid var(--toolbar-border-color);
+  box-shadow: none;
+}
+
+:host(.variant-dark) .toolbar-body {
+  background: var(--bg-dark, #1e293b);
+  color: #f1f5f9;
+  --toolbar-item-color: rgba(241, 245, 249, 0.9);
+  --toolbar-item-bg-hover: rgba(255, 255, 255, 0.08);
+  --toolbar-item-bg-active: rgba(99, 102, 241, 0.25);
+  --toolbar-item-color-active: #818cf8;
+  --toolbar-separator-color: rgba(255, 255, 255, 0.1);
+  --toolbar-overflow-menu-bg: #1e293b;
+  --toolbar-overflow-menu-border: rgba(255, 255, 255, 0.1);
+}
+
+:host(.variant-inline) {
+  display: inline-block;
+  width: auto;
+}
+
+:host(.variant-inline) .toolbar-body {
+  width: auto;
+  min-height: auto;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  border-radius: 0;
+  padding: 0 !important;
+  overflow: visible;
+}
+
+/* =============================================================================
+   Zones (for schema-driven layout)
+   ============================================================================= */
+.toolbar-zones {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  gap: inherit;
+}
+
+.toolbar-zone {
+  display: flex;
+  align-items: center;
+  gap: inherit;
+  flex-shrink: 0;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.toolbar-zone--left {
+  margin-right: auto;
+}
+
+.toolbar-zone--right {
+  margin-left: auto;
+}
+
+.toolbar-zone--center {
+  flex: 1;
+  justify-content: center;
+}
+
+:host(.has-zone-dividers) .toolbar-zones .toolbar-zone + .toolbar-zone {
+  border-left: 1px solid var(--toolbar-separator-color);
+  padding-left: 12px;
+  margin-left: 12px;
+}
+
+/* =============================================================================
+   Toolbar Items
+   ============================================================================= */
+.toolbar-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: var(--_item-h);
+  padding: var(--_item-p);
+  border-radius: var(--toolbar-item-radius);
+  color: var(--toolbar-item-color);
+  background: var(--toolbar-item-bg);
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  font-size: inherit;
+  font-weight: 500;
+  transition: background var(--toolbar-transition), color var(--toolbar-transition), box-shadow var(--toolbar-transition), opacity var(--toolbar-transition), transform 0.1s ease;
+  outline: none;
+  text-decoration: none;
+  flex-shrink: 0;
+  position: relative;
+  max-width: 100%;
+  min-width: 0;
+}
+
+/* Neutralize wrapper for component-based items to prevent double-styling */
+.toolbar-item--button,
+.toolbar-item--input,
+.toolbar-item--search,
+.toolbar-item--toggle,
+.toolbar-item--toggle-group {
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  height: auto !important;
+  cursor: default !important;
+}
+
+.toolbar-item--dropdown {
+  overflow: visible;
+  /* Strip wrapper padding — dropdown trigger manages its own */
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  height: auto !important;
+  cursor: default !important;
+  /* Constrain the trigger to fit the toolbar item height */
+}
+.toolbar-item--dropdown .dropdown-trigger,
+.toolbar-item--dropdown .dropdown-container .dropdown-trigger {
+  height: var(--_item-h) !important;
+  min-height: var(--_item-h) !important;
+  max-height: var(--_item-h) !important;
+  padding: 0 10px !important;
+  font-size: inherit !important;
+  box-sizing: border-box;
+}
+.toolbar-item--dropdown {
+  /* Chip-mode triggers (multi-select) can grow beyond the fixed height */
+}
+.toolbar-item--dropdown .dropdown-has-chips .dropdown-trigger {
+  height: auto !important;
+  min-height: var(--_item-h) !important;
+  max-height: none !important;
+}
+
+.toolbar-item:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-primary, #2563eb);
+  outline: none;
+}
+
+/* Hover */
+.toolbar-item--button:hover:not(.is-disabled),
+.toolbar-item--avatar.is-clickable:hover {
+  background: var(--toolbar-item-bg-hover);
+}
+
+/* Active states */
+.toolbar-item--button.is-active {
+  background: var(--toolbar-item-bg-active);
+  color: var(--toolbar-item-color-active);
+}
+
+.toolbar-item--button:active:not(.is-disabled) {
+  transform: scale(0.96);
+}
+
+/* Icon-only buttons */
+.toolbar-item.is-icon-only {
+  padding: 0;
+  width: var(--_item-h);
+}
+
+/* Disabled */
+.toolbar-item.is-disabled,
+.toolbar-item[aria-disabled=true] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Loading */
+.toolbar-item.is-loading {
+  cursor: wait;
+  pointer-events: none;
+}
+
+/* ─── Button variants ───────────────────────────────────────────────────────── */
+.toolbar-item--primary {
+  background: var(--color-primary, #2563eb);
+  color: #fff;
+}
+
+.toolbar-item--primary:hover {
+  background: var(--color-primary-hover, #1d4ed8);
+}
+
+.toolbar-item--secondary {
+  background: var(--bg-secondary, #f1f5f9);
+  color: var(--text-primary, #374151);
+}
+
+.toolbar-item--secondary:hover {
+  background: var(--bg-tertiary, #e2e8f0);
+}
+
+.toolbar-item--danger {
+  background: var(--color-danger, #ef4444);
+  color: #fff;
+}
+
+.toolbar-item--danger:hover {
+  background: #dc2626;
+}
+
+.toolbar-item--success {
+  background: var(--color-success, #10b981);
+  color: #fff;
+}
+
+.toolbar-item--warning {
+  background: var(--color-warning, #f59e0b);
+  color: #fff;
+}
+
+.toolbar-item--ghost,
+.toolbar-item--outline {
+  background: transparent;
+  color: var(--toolbar-item-color);
+}
+
+.toolbar-item--outline {
+  border: 1px solid var(--toolbar-border-color);
+}
+
+.toolbar-item__label {
+  line-height: 1;
+}
+
+/* =============================================================================
+   Separator
+   ============================================================================= */
+.toolbar-separator {
+  width: 1px;
+  align-self: stretch;
+  margin: 4px 2px;
+  background: var(--toolbar-separator-color);
+  flex-shrink: 0;
+}
+
+.toolbar-separator--horizontal {
+  width: 100%;
+  height: 1px;
+  margin: 2px 4px;
+}
+
+/* =============================================================================
+   Spacer
+   ============================================================================= */
+.toolbar-spacer {
+  display: block;
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   Text
+   ============================================================================= */
+.toolbar-text {
+  cursor: default;
+  font-size: 13px;
+  color: var(--toolbar-text);
+  padding: 0 6px;
+  height: auto;
+}
+
+.toolbar-text--bold {
+  font-weight: 700;
+}
+
+.toolbar-text--muted {
+  color: var(--toolbar-muted);
+}
+
+/* =============================================================================
+   Status Badge (item type="badge")
+   ============================================================================= */
+.toolbar-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  height: auto;
+}
+
+.toolbar-status-badge--primary {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.toolbar-status-badge--success {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.toolbar-status-badge--danger {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.toolbar-status-badge--warning {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.toolbar-status-badge--info {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
+.toolbar-status-badge.is-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  padding: 0;
+}
+
+/* =============================================================================
+   Notification Badge (on button / avatar)
+   ============================================================================= */
+.toolbar-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: var(--toolbar-badge-size);
+  height: var(--toolbar-badge-size);
+  border-radius: 999px;
+  padding: 0 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  background: var(--toolbar-badge-bg);
+  color: var(--toolbar-badge-color);
+  box-shadow: 0 0 0 2px var(--toolbar-bg);
+  pointer-events: none;
+}
+
+.toolbar-badge--success {
+  background: var(--color-success, #10b981);
+}
+
+.toolbar-badge--warning {
+  background: var(--color-warning, #f59e0b);
+}
+
+.toolbar-badge--info {
+  background: var(--color-info, #2563eb);
+}
+
+/* =============================================================================
+   Input / Search
+   ============================================================================= */
+.toolbar-item--input,
+.toolbar-item--search {
+  padding: 0;
+  background: transparent;
+  cursor: default;
+}
+
+.toolbar-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--_item-h);
+  padding: 0 10px;
+  border: 1px solid var(--toolbar-border-color);
+  border-radius: var(--toolbar-item-radius);
+  background: var(--bg-primary, #fff);
+  transition: border-color var(--toolbar-transition), box-shadow var(--toolbar-transition);
+  min-width: 160px;
+  max-width: 260px;
+}
+
+.toolbar-input-wrap--search {
+  min-width: 180px;
+}
+
+.toolbar-input-wrap:focus-within {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
+}
+
+.toolbar-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--toolbar-text);
+  font-size: 13px;
+  font-family: inherit;
+  min-width: 0;
+}
+
+.toolbar-input::placeholder {
+  color: var(--toolbar-muted);
+}
+
+.toolbar-input-icon {
+  color: var(--toolbar-muted);
+  flex-shrink: 0;
+}
+
+.toolbar-input-clear {
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--toolbar-muted);
+  border-radius: 4px;
+  transition: color var(--toolbar-transition), background var(--toolbar-transition);
+  flex-shrink: 0;
+}
+
+.toolbar-input-clear:hover {
+  color: var(--toolbar-text);
+  background: var(--toolbar-item-bg-hover);
+}
+
+/* =============================================================================
+   Toggle / Switch
+   ============================================================================= */
+.toolbar-item--toggle {
+  gap: 8px;
+  cursor: default;
+  padding: 0 8px;
+  background: transparent;
+}
+
+.toolbar-toggle-label {
+  font-size: 13px;
+  color: var(--toolbar-item-color);
+  white-space: nowrap;
+}
+
+.toolbar-switch {
+  position: relative;
+  width: var(--toolbar-switch-width);
+  height: var(--toolbar-switch-height);
+  border-radius: 999px;
+  background: var(--toolbar-switch-off);
+  border: none;
+  cursor: pointer;
+  transition: background var(--toolbar-transition);
+  outline: none;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.toolbar-switch:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-primary, #2563eb);
+}
+
+.toolbar-switch.is-on {
+  background: var(--toolbar-switch-on);
+}
+
+.toolbar-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(var(--toolbar-switch-height) - 4px);
+  height: calc(var(--toolbar-switch-height) - 4px);
+  border-radius: 50%;
+  background: var(--toolbar-switch-thumb);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  transition: transform var(--toolbar-transition);
+}
+
+.toolbar-switch.is-on .toolbar-switch__thumb {
+  transform: translateX(calc(var(--toolbar-switch-width) - var(--toolbar-switch-height)));
+}
+
+/* =============================================================================
+   Avatar Item
+   ============================================================================= */
+.toolbar-item--avatar {
+  padding: 0 4px;
+  position: relative;
+  background: transparent;
+}
+
+.toolbar-item--avatar.is-clickable {
+  cursor: pointer;
+  padding: 4px;
+}
+
+.toolbar-item--avatar.is-clickable:hover {
+  background: var(--toolbar-item-bg-hover);
+}
+
+/* =============================================================================
+   Group
+   ============================================================================= */
+.toolbar-group {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  flex-shrink: 0;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.toolbar-group--divider {
+  border-left: 1px solid var(--toolbar-separator-color);
+  padding-left: 8px;
+  margin-left: 4px;
+}
+
+.toolbar-group__label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--toolbar-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0 4px;
+}
+
+.toolbar-group.is-collapsed > *:not(.toolbar-group__label) {
+  display: none;
+}
+
+/* =============================================================================
+   Dropdown item container
+   ============================================================================= */
+/* =============================================================================
+   Loading Spinner
+   ============================================================================= */
+.toolbar-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: toolbar-spin 0.7s linear infinite;
+}
+
+@keyframes toolbar-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* =============================================================================
+   Overflow Menu
+   ============================================================================= */
+.toolbar-overflow {
+  /* Always pinned to the right edge — never pushed off-screen by flex items */
+  position: absolute;
+  right: var(--toolbar-overflow-right, 0px);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  z-index: var(--z-dropdown, 100);
+  background: var(--toolbar-bg);
+  /* Slight gradient fade so items don't bleed through behind the button */
+}
+.toolbar-overflow::before {
+  content: "";
+  position: absolute;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 24px;
+  background: linear-gradient(to right, transparent, var(--toolbar-bg));
+  pointer-events: none;
+}
+.toolbar-overflow.is-open .toolbar-overflow__menu {
+  display: block !important;
+  opacity: 1 !important;
+  transform: scale(1) translateY(0) !important;
+  visibility: visible !important;
+}
+
+.toolbar-overflow__btn {
+  position: relative;
+}
+
+.toolbar-overflow__badge {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  min-width: 14px;
+  height: 14px;
+  background: var(--color-primary, #2563eb);
+  color: #fff;
+  border-radius: 999px;
+  font-size: 9px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 2px;
+  pointer-events: none;
+  box-shadow: 0 0 0 2px var(--toolbar-bg);
+}
+
+.toolbar-overflow__menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: var(--z-dropdown, 100);
+  list-style: none;
+  margin: 0;
+  padding: 6px;
+  min-width: 180px;
+  background: var(--toolbar-overflow-menu-bg);
+  border: 1px solid var(--toolbar-overflow-menu-border);
+  border-radius: var(--toolbar-overflow-menu-radius);
+  box-shadow: var(--toolbar-overflow-menu-shadow);
+  animation: toolbar-overflow-in 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+:host(.orientation-vertical) .toolbar-overflow__menu {
+  top: 0;
+  left: calc(100% + 6px);
+  right: auto;
+}
+
+@keyframes toolbar-overflow-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+/* Overflow items */
+.overflow-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--toolbar-overflow-item-height);
+  padding: 0 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--toolbar-item-color);
+  font-size: 13px;
+  font-weight: 500;
+  transition: background var(--toolbar-transition), color var(--toolbar-transition);
+  outline: none;
+  user-select: none;
+  list-style: none;
+}
+
+.overflow-item:hover,
+.overflow-item:focus-visible {
+  background: var(--toolbar-item-bg-hover);
+  color: var(--toolbar-item-color-active);
+}
+
+.overflow-item.is-active {
+  color: var(--toolbar-item-color-active);
+}
+
+.overflow-item.is-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.overflow-item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.overflow-item-check {
+  color: var(--toolbar-item-color-active);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.overflow-item--toggle {
+  justify-content: space-between;
+}
+
+.overflow-toggle {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--toolbar-item-bg-hover);
+  color: var(--toolbar-muted);
+}
+
+.overflow-toggle.is-on {
+  background: var(--toolbar-item-bg-active);
+  color: var(--toolbar-item-color-active);
+}
+
+.overflow-item--avatar {
+  gap: 10px;
+}
+
+/* =============================================================================
+   Mobile
+   ============================================================================= */
+.toolbar-mobile-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--toolbar-text);
+  border-radius: 6px;
+  transition: background var(--toolbar-transition);
+  padding: 0;
+}
+
+.toolbar-mobile-toggle:hover {
+  background: var(--toolbar-item-bg-hover);
+}
+
+:host(.is-mobile) .toolbar-mobile-toggle {
+  display: flex;
+}
+
+:host(.is-mobile) .toolbar-body,
+:host(.variant-inline) .toolbar-body {
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+:host(.is-mobile.is-collapsed) .toolbar-body {
+  display: none;
+}
+
+:host(.is-mobile) .toolbar-zones,
+:host(.variant-inline) .toolbar-zones,
+:host(.overflow-wrap) .toolbar-zones {
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+:host(.is-mobile) .toolbar-zone,
+:host(.variant-inline) .toolbar-zone,
+:host(.overflow-wrap) .toolbar-zone {
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+:host(.is-mobile) .toolbar-zone--left,
+:host(.is-mobile) .toolbar-zone--center,
+:host(.is-mobile) .toolbar-zone--right {
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+  justify-content: flex-start;
+}
+
+:host(.is-mobile) .toolbar-item--input,
+:host(.variant-inline) .toolbar-item--input,
+:host(.is-mobile) .toolbar-item--search,
+:host(.variant-inline) .toolbar-item--search {
+  flex: 1 1 180px;
+}
+
+/* =============================================================================
+   Vertical orientation adjustments
+   ============================================================================= */
+:host(.orientation-vertical) .toolbar-item {
+  width: 100%;
+  justify-content: flex-start;
+  padding: 0 14px;
+  height: var(--_item-h);
+}
+
+:host(.orientation-vertical) .toolbar-item.is-icon-only {
+  justify-content: center;
+  padding: 0;
+}
+
+:host(.orientation-vertical) .toolbar-separator {
+  width: 80%;
+  height: 1px;
+  margin: 4px auto;
+  align-self: center;
+}
+
+:host(.orientation-vertical) .toolbar-overflow {
+  /* For vertical bars: pin to the bottom edge */
+  position: absolute;
+  bottom: 0;
+  right: auto;
+  left: 0;
+  top: auto;
+  transform: none;
+  width: 100%;
+  justify-content: center;
+}
+
+/* =============================================================================
+   Draggable Items
+   ============================================================================= */
+.toolbar-item[draggable=true] {
+  cursor: grab;
+}
+
+.toolbar-item[draggable=true]:active {
+  cursor: grabbing;
+  opacity: 0.6;
+}
+
+/* =============================================================================
+   Disabled whole toolbar
+   ============================================================================= */
+:host(.is-disabled) .toolbar-body {
+  opacity: 0.6;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:host(.is-loading) .toolbar-body::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background: linear-gradient(90deg, transparent 0%, var(--color-primary, #2563eb) 40%, transparent 100%);
+  animation: toolbar-loading 1.4s ease infinite;
+}
+
+@keyframes toolbar-loading {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+/* =============================================================================
+   Custom slotted items
+   ============================================================================= */
+::slotted(*) {
+  flex-shrink: 0;
+  max-width: 100%;
+  min-width: 0;
+}
+
+:host(.is-mobile) ::slotted(*),
+:host(.variant-inline) ::slotted(*) {
+  flex-shrink: 1;
+}
+
+.toolbar-item--custom {
+  padding: 0;
+  background: transparent;
+  height: auto;
+  cursor: default;
+  max-width: 100%;
+}