@dodlhuat/basix 1.1.1 → 1.2.0

package/css/badge.scss

@@ -0,0 +1,104 @@
+@use "properties";
+@use "parameters" as *;
+
+@mixin badge-variant($color, $bg) {
+  background: $bg;
+  color: $color;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: calc($spacing * 0.3);
+  padding: calc($spacing * 0.15) calc($spacing * 0.5);
+  border-radius: calc($border-radius * 4);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: 1px solid transparent;
+
+  // Default — neutral
+  background: var(--secondary-background);
+  color: var(--secondary-text);
+
+  &-info {
+    @include badge-variant(
+      var(--accent-color),
+      color-mix(in srgb, var(--accent-color) 12%, var(--background))
+    );
+    border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
+  }
+
+  &-success {
+    @include badge-variant(
+      var(--success),
+      color-mix(in srgb, var(--success) 12%, var(--background))
+    );
+    border-color: color-mix(in srgb, var(--success) 20%, transparent);
+  }
+
+  &-warning {
+    @include badge-variant(
+      var(--warning),
+      color-mix(in srgb, var(--warning) 12%, var(--background))
+    );
+    border-color: color-mix(in srgb, var(--warning) 20%, transparent);
+  }
+
+  &-error {
+    @include badge-variant(
+      var(--error),
+      color-mix(in srgb, var(--error) 12%, var(--background))
+    );
+    border-color: color-mix(in srgb, var(--error) 20%, transparent);
+  }
+
+  // Solid filled
+  &-solid {
+    &.badge-info    { background: var(--accent-color); color: #fff; border-color: transparent; }
+    &.badge-success { background: var(--success);      color: #fff; border-color: transparent; }
+    &.badge-warning { background: var(--warning);      color: #fff; border-color: transparent; }
+    &.badge-error   { background: var(--error);        color: #fff; border-color: transparent; }
+  }
+
+  // Outline only
+  &-outline {
+    background: transparent;
+    border-color: var(--divider);
+    color: var(--secondary-text);
+
+    &.badge-info    { border-color: var(--accent-color); color: var(--accent-color); }
+    &.badge-success { border-color: var(--success);      color: var(--success); }
+    &.badge-warning { border-color: var(--warning);      color: var(--warning); }
+    &.badge-error   { border-color: var(--error);        color: var(--error); }
+  }
+
+  // Sizes
+  &-sm {
+    padding: calc($spacing * 0.1) calc($spacing * 0.35);
+    font-size: 0.6875rem;
+  }
+
+  &-lg {
+    padding: calc($spacing * 0.25) calc($spacing * 0.65);
+    font-size: 0.875rem;
+  }
+
+  // Dot indicator — no text
+  &-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    padding: 0;
+    border-radius: 50%;
+    background: var(--divider);
+    border: none;
+
+    &.badge-info    { background: var(--accent-color); }
+    &.badge-success { background: var(--success); }
+    &.badge-warning { background: var(--warning); }
+    &.badge-error   { background: var(--error); }
+  }
+}

package/css/bottom-sheet.scss

@@ -0,0 +1,192 @@
+@use "properties";
+@use "parameters" as *;
+
+.bottom-sheet-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  pointer-events: none;
+
+  &.is-visible {
+    pointer-events: auto;
+
+    .bottom-sheet-backdrop {
+      opacity: 1;
+    }
+
+    .bottom-sheet {
+      transform: translateY(0);
+    }
+  }
+}
+
+.bottom-sheet-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  opacity: 0;
+  transition: opacity 0.32s ease;
+}
+
+.bottom-sheet {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background: var(--background);
+  border: 1px solid var(--divider);
+  border-bottom: none;
+  border-radius: calc($border-radius * 4) calc($border-radius * 4) 0 0;
+  box-shadow:
+    0 -2px 0 rgba(255, 255, 255, 0.06) inset,
+    0 -8px 40px rgba(0, 0, 0, 0.18),
+    0 -2px 12px rgba(0, 0, 0, 0.1),
+    0 -1px 3px rgba(0, 0, 0, 0.08);
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(100%);
+  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
+  will-change: transform;
+  overscroll-behavior: contain;
+
+  // Snap height variants
+  &.snap-half {
+    height: 50vh;
+  }
+
+  &.snap-full {
+    height: calc(100dvh - env(safe-area-inset-top) - $spacing);
+    max-height: none;
+  }
+}
+
+// Drag handle — large tap target wrapping a visual pill
+.bottom-sheet-handle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc($spacing * 0.75) $spacing calc($spacing * 0.5);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    width: 40px;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--divider);
+    transition: background 0.15s ease, width 0.15s ease;
+  }
+
+  &:hover::after,
+  &:active::after {
+    background: var(--secondary-text);
+    width: 48px;
+  }
+}
+
+// Scrollable content area
+.bottom-sheet-body {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 $spacing $spacing;
+  padding-bottom: calc($spacing + env(safe-area-inset-bottom));
+
+  // fade out bottom edge when content overflows
+  mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent 100%);
+
+  &:not(.is-scrollable) {
+    mask-image: none;
+    -webkit-mask-image: none;
+  }
+}
+
+// Header and footer are outside .bottom-sheet-body so they stay fixed
+.bottom-sheet-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: calc($spacing * 0.5);
+  padding: calc($spacing * 0.25) $spacing calc($spacing * 0.75);
+
+  &.has-divider {
+    border-bottom: 1px solid var(--divider);
+    margin-bottom: calc($spacing * 0.5);
+    padding-bottom: calc($spacing * 0.75);
+  }
+
+  .title {
+    flex: 1;
+    font-weight: 600;
+    font-size: 1rem;
+    color: var(--primary-text);
+    line-height: 1.3;
+  }
+
+  .subtitle {
+    flex: 1;
+    font-size: 0.8125rem;
+    color: var(--secondary-text);
+    margin-top: 0.125rem;
+  }
+
+  .close {
+    cursor: pointer;
+    color: var(--secondary-text);
+    transition: color 0.15s ease;
+
+    &:hover {
+      color: var(--primary-text);
+    }
+  }
+}
+
+.bottom-sheet-footer {
+  flex-shrink: 0;
+  border-top: 1px solid var(--divider);
+  padding: $spacing;
+  padding-bottom: calc($spacing + env(safe-area-inset-bottom));
+  display: flex;
+  justify-content: flex-end;
+
+  .buttons {
+    display: flex;
+    gap: calc($spacing / 2);
+  }
+}
+
+@media (min-width: 768px) {
+  .bottom-sheet {
+    left: 50%;
+    right: auto;
+    width: 480px;
+    bottom: $spacing;
+    border: 1px solid var(--divider);
+    border-radius: calc($border-radius * 4);
+    transform: translateX(-50%) translateY(calc(100% + #{$spacing}));
+    max-height: 80vh;
+
+    .bottom-sheet-footer {
+      border-radius: 0 0 calc($border-radius * 4) calc($border-radius * 4);
+    }
+  }
+
+  .bottom-sheet-wrapper.is-visible .bottom-sheet {
+    transform: translateX(-50%) translateY(0);
+  }
+}

package/css/breadcrumb.scss

@@ -0,0 +1,158 @@
+@use "properties";
+@use "parameters" as *;
+
+// ─── Breadcrumb ────────────────────────────────────────────────────────────────
+
+.breadcrumb {
+  ol {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    row-gap: 0.25rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+
+    // Chevron separator via Material Symbols font
+    + li::before {
+      content: "\e409"; // navigate_next
+      font-family: "Material Symbols Outlined 24pt";
+      font-size: 1.125rem;
+      line-height: 1;
+      color: var(--divider);
+      flex-shrink: 0;
+      user-select: none;
+      pointer-events: none;
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: 0.3rem;
+      font-size: 0.8125rem;
+      font-weight: 450;
+      color: var(--secondary-text);
+      text-decoration: none;
+      padding: 0.25rem 0.375rem;
+      border-radius: calc($border-radius / 2);
+      white-space: nowrap;
+      transition: color 0.15s ease, background 0.15s ease;
+
+      .icon {
+        font-size: 1rem;
+      }
+
+      &:hover {
+        color: var(--primary-text);
+        background: var(--secondary-background);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--accent-color);
+        outline-offset: -1px;
+        border-radius: calc($border-radius / 2);
+      }
+    }
+
+    // Current page item (not a link)
+    &[aria-current="page"] > span {
+      display: block;
+      font-size: 0.8125rem;
+      font-weight: 550;
+      color: var(--primary-text);
+      padding: 0.25rem 0.375rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 28ch;
+    }
+  }
+
+  // Collapse modifier: on small screens, hide everything except last ancestor + current
+  &--collapse {
+    @media (max-width: 600px) {
+      li:not(:nth-last-child(-n+2)) {
+        display: none;
+      }
+
+      // Replace separator with ellipsis when items are hidden
+      li:nth-last-child(2):not(:first-child)::before {
+        content: "···";
+        font-family: inherit;
+        font-size: 0.875rem;
+        letter-spacing: 0.04em;
+        color: var(--divider);
+        padding: 0 0.125rem;
+      }
+    }
+  }
+}
+
+// ─── Page Header ───────────────────────────────────────────────────────────────
+
+.page-header {
+  padding-block: calc($spacing * 1.25) $spacing;
+
+  .breadcrumb {
+    margin-bottom: calc($spacing * 0.5);
+  }
+
+  &__title-row {
+    display: flex;
+    align-items: flex-start;
+    gap: $spacing;
+
+    h1, h2, h3, h4,
+    .h1, .h2, .h3, .h4 {
+      margin: 0;
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: calc($spacing * 0.5);
+    flex-shrink: 0;
+    padding-top: 0.3rem; // optical alignment with h1 baseline
+  }
+
+  &__description {
+    margin: calc($spacing * 0.375) 0 0;
+    padding-bottom: 0;
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: var(--secondary-text);
+  }
+
+  // Bordered variant — adds a bottom divider and bottom margin
+  &--bordered {
+    border-bottom: 1px solid var(--divider);
+    padding-bottom: calc($spacing * 1.25);
+    margin-bottom: calc($spacing * 1.5);
+  }
+
+  @media (max-width: 540px) {
+    &__title-row {
+      flex-wrap: wrap;
+    }
+
+    &__actions {
+      width: 100%;
+      padding-top: calc($spacing * 0.25);
+
+      button,
+      .button {
+        flex: 1;
+        justify-content: center;
+      }
+    }
+  }
+}

package/css/context-menu.scss

@@ -0,0 +1,182 @@
+@use "parameters" as *;
+@use "properties";
+
+.context-menu {
+  position: fixed;
+  z-index: 9999;
+  min-width: 200px;
+  padding: calc($spacing * 0.375) 0;
+  background: var(--background);
+  border: 1px solid var(--divider);
+  border-radius: calc($border-radius * 2.5);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.08),
+    0 1px 2px rgba(0, 0, 0, 0.04);
+  list-style: none;
+  margin: 0;
+  opacity: 0;
+  transform: scale(0.94);
+  transform-origin: top left;
+  transition: opacity 0.14s ease, transform 0.14s ease;
+  pointer-events: none;
+
+  &.is-visible {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+  }
+}
+
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: calc($spacing * 0.55);
+  padding: calc($spacing * 0.45) calc($spacing * 0.75);
+  font-size: 0.875rem;
+  color: var(--primary-text);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition: background 0.1s ease, color 0.1s ease;
+  position: relative;
+
+  // Icon slot — always present to keep label column aligned
+  .context-menu-icon {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--secondary-text);
+    transition: color 0.1s ease;
+
+    .icon-svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  .context-menu-label {
+    flex: 1;
+  }
+
+  .context-menu-shortcut {
+    padding-left: calc($spacing * 1.5);
+    font-size: 0.75rem;
+    color: var(--secondary-text);
+    opacity: 0.6;
+    letter-spacing: 0.02em;
+    flex-shrink: 0;
+  }
+
+  .context-menu-chevron {
+    flex-shrink: 0;
+    width: 0.35rem;
+    height: 0.35rem;
+    border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor;
+    transform: rotate(-45deg);
+    opacity: 0.5;
+    margin-left: calc($spacing * 0.25);
+    color: var(--secondary-text);
+  }
+
+  // Hover + keyboard focus — same treatment as dropdown
+  &:hover,
+  &.is-focused {
+    background: var(--secondary-background);
+    color: var(--accent-color);
+
+    .context-menu-icon {
+      color: var(--accent-color);
+    }
+
+    .context-menu-chevron {
+      color: var(--accent-color);
+      opacity: 0.8;
+    }
+  }
+
+  // Submenu-parent active (submenu is open) — keep it highlighted
+  &.is-active {
+    background: var(--secondary-background);
+    color: var(--accent-color);
+
+    .context-menu-icon {
+      color: var(--accent-color);
+    }
+
+    .context-menu-chevron {
+      color: var(--accent-color);
+      opacity: 0.8;
+    }
+  }
+
+  &.is-destructive {
+    color: var(--error);
+
+    .context-menu-icon {
+      color: var(--error);
+    }
+
+    &:hover,
+    &.is-focused {
+      background: color-mix(in srgb, var(--error) 8%, var(--background));
+      color: var(--error);
+
+      .context-menu-icon {
+        color: var(--error);
+      }
+    }
+  }
+
+  &.is-disabled {
+    opacity: 0.38;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  // Submenu
+  &.has-submenu {
+    > .context-menu {
+      position: absolute;
+      top: calc($spacing * -0.375);
+      left: 100%;
+      margin-left: 4px;
+      transform-origin: top left;
+    }
+
+    &.is-active > .context-menu {
+      opacity: 1;
+      transform: scale(1);
+      pointer-events: auto;
+    }
+
+    &.submenu-flip > .context-menu {
+      left: auto;
+      right: 100%;
+      margin-left: 0;
+      margin-right: 4px;
+      transform-origin: top right;
+    }
+  }
+}
+
+.context-menu-separator {
+  height: 1px;
+  background: var(--divider);
+  margin: calc($spacing * 0.375) 0;
+}
+
+.context-menu-group-label {
+  padding: calc($spacing * 0.3) calc($spacing * 0.75);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--secondary-text);
+  opacity: 0.55;
+  user-select: none;
+}