baldur 0.1.1

data/app/assets/stylesheets/baldur/application/components/menu.css

@@ -0,0 +1,300 @@
+@layer components {
+  .menu {
+    min-width: 240px;
+    background-color: var(--color-surface-highest);
+    color: var(--color-on-surface);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-outline-variant);
+    padding: var(--space-2);
+    display: none;
+    position: absolute;
+    z-index: 41;
+    right: 0;
+    top: calc(100% + var(--space-2));
+    transform-origin: top right;
+    opacity: 0;
+    transform: scale(0.98) translateY(-4px);
+    transition:
+      opacity var(--motion-duration-short4) var(--motion-easing-standard),
+      transform var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .menu a {
+    display: block;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    color: inherit;
+    text-decoration: none;
+    position: relative;
+    overflow: hidden;
+    font-weight: 500;
+  }
+
+  .menu a:hover {
+    color: var(--color-primary);
+  }
+
+  .menu a::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: var(--color-primary);
+    opacity: 0;
+    transition: opacity var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .menu a:hover::after,
+  .menu a:focus-visible::after {
+    opacity: 0.08;
+  }
+
+  .menu-wrapper {
+    position: relative;
+  }
+
+  .menu-wrapper>summary {
+    list-style: none;
+    cursor: pointer;
+  }
+
+  .menu-wrapper>summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .menu-wrapper[open] .menu {
+    display: block;
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  .menu-wrapper[open] {
+    z-index: 40;
+  }
+
+  .menu-wrapper--sidebar[open] .menu {
+    transform: scale(1) translateY(0);
+  }
+
+  .menu-wrapper--sidebar {
+    z-index: 1000;
+  }
+
+  .menu-wrapper--sidebar[open] {
+    z-index: 1001;
+  }
+
+  .menu-wrapper--sidebar .menu {
+    left: calc(100% + var(--space-2));
+    right: auto;
+    top: auto;
+    bottom: 0;
+    transform-origin: bottom left;
+    transform: scale(0.98) translateY(4px);
+    z-index: 1002;
+  }
+
+  .menu-select {
+    position: relative;
+  }
+
+  .field--select {
+    --field-bg: var(--color-surface-medium);
+  }
+
+  .field--select-auto {
+    width: max-content;
+    min-width: min(var(--menu-select-min-width, 11rem), 100%);
+    max-width: min(var(--menu-select-max-width, 24rem), calc(100vw - var(--space-8)));
+  }
+
+  .menu-select.is-open {
+    z-index: 10000;
+  }
+
+  .menu .menu-select__trigger,
+  .field--select .menu-select__trigger,
+  .menu-select__trigger {
+    width: 100%;
+    text-align: left;
+    height: var(--field-height, 40px);
+    padding: var(--field-padding-y, calc(var(--space-2) + 2px)) var(--space-4);
+    box-sizing: border-box;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--field-border-color, color-mix(in srgb, var(--color-outline) 85%, transparent));
+    background: var(--field-bg, var(--color-surface-medium));
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    font-weight: 400;
+    color: var(--color-on-surface);
+    transition:
+      border-color var(--motion-duration-short4) var(--motion-easing-standard),
+      background-color var(--motion-duration-short4) var(--motion-easing-standard),
+      box-shadow var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .menu .menu-select__trigger:focus-visible,
+  .field--select .menu-select__trigger:focus-visible,
+  .menu-select__trigger:focus-visible,
+  .menu-select.is-open .menu-select__trigger {
+    border-color: var(--field-border-color-focus, var(--color-primary));
+    outline: none;
+    background: var(--field-bg-focus, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)));
+    box-shadow: var(--field-shadow-focus, 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent));
+  }
+
+  .menu-select__trigger.is-disabled,
+  .menu-select__trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.65;
+    background: color-mix(in srgb, var(--color-surface) 75%, transparent);
+  }
+
+  .menu-select__label {
+    pointer-events: none;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .field--select-auto .menu-select__label {
+    overflow: visible;
+    text-overflow: clip;
+  }
+
+  .menu-select__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--color-text-soft);
+    flex-shrink: 0;
+  }
+
+  .menu-select .menu {
+    left: 0;
+    right: auto;
+    top: calc(100% + var(--space-2));
+    bottom: auto;
+    transform-origin: top left;
+    --menu-enter-y: -4px;
+    width: max-content;
+    min-width: 100%;
+    max-width: min(22rem, calc(100vw - var(--space-8)));
+    z-index: 30;
+    display: block;
+    pointer-events: none;
+    opacity: 0;
+    transform: scale(0.98) translateY(var(--menu-enter-y));
+  }
+
+  .menu-select[data-menu-placement="top"] .menu {
+    top: auto;
+    bottom: calc(100% + var(--space-2));
+    transform-origin: bottom left;
+    --menu-enter-y: 4px;
+  }
+
+  .menu--select {
+    max-height: min(320px, 50vh);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+    z-index: 9999;
+  }
+
+  .menu-select.is-open .menu {
+    pointer-events: auto;
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  .menu .menu__option {
+    width: 100%;
+    text-align: left;
+    border: none;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    color: var(--color-on-surface);
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background-color var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .menu .menu__option:hover,
+  .menu .menu__option:focus-visible {
+    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  }
+
+  .menu .menu__option.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu .menu__option.is-disabled:hover,
+  .menu .menu__option.is-disabled:focus-visible {
+    background-color: transparent;
+  }
+
+  .menu .menu__option-label {
+    flex: 1;
+  }
+
+  .menu .menu__option-content {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .menu .menu__option-head {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .menu .menu__option-badge {
+    flex-shrink: 0;
+  }
+
+  .menu .menu__option-support {
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+    white-space: normal;
+  }
+
+  .menu .menu__option-icon {
+    opacity: 0;
+    transition: opacity var(--motion-duration-short4) var(--motion-easing-standard);
+    color: var(--color-primary);
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  .menu .menu__option.is-selected .menu__option-icon {
+    opacity: 1;
+  }
+
+  .menu--compact {
+    min-width: fit-content;
+    width: fit-content;
+    max-width: min(22rem, calc(100vw - var(--space-8)));
+    padding: var(--space-1);
+  }
+
+  .menu--compact .menu__option {
+    min-height: 2rem;
+    padding: var(--space-2) var(--space-3);
+    white-space: nowrap;
+  }
+}

data/app/assets/stylesheets/baldur/application/components/panel-right.css

@@ -0,0 +1 @@
+@import "./panel-secondary.css";

data/app/assets/stylesheets/baldur/application/components/panel-secondary.css

@@ -0,0 +1,71 @@
+@layer components {
+  .panel-secondary-shell {
+    --panel-secondary-width: min(90vw, 24rem);
+    position: fixed;
+    inset: 0;
+    z-index: 1100;
+    pointer-events: none;
+  }
+
+  .panel-secondary-shell > .button.panel-secondary__trigger {
+    position: fixed;
+    inset-inline-end: var(--space-6);
+    inset-block-end: var(--space-6);
+    right: var(--space-6);
+    bottom: var(--space-6);
+    left: auto;
+    top: auto;
+    z-index: 1100;
+    pointer-events: auto;
+  }
+
+  .panel-secondary {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 1100;
+    display: flex;
+    height: 100vh;
+    width: var(--panel-secondary-width);
+    max-width: 90vw;
+    flex-direction: column;
+    border-left: 1px solid var(--color-outline-variant);
+    background: var(--color-surface);
+    box-shadow: var(--elev-3);
+    transform: translateX(100%);
+    transition: transform var(--motion-duration-medium2) var(--motion-easing-standard-decelerate);
+    will-change: transform;
+    pointer-events: auto;
+  }
+
+  .panel-secondary.is-open {
+    transform: translateX(0);
+  }
+
+  .panel-secondary__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    border-bottom: 1px solid var(--color-outline-variant);
+    padding: var(--space-4);
+  }
+
+  .panel-secondary__body {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    overflow-y: auto;
+    padding: var(--space-4);
+  }
+
+  @media (max-width: 1024px) {
+    .panel-secondary-shell > .button.panel-secondary__trigger {
+      inset-inline-end: var(--space-4);
+      inset-block-end: var(--space-4);
+      right: var(--space-4);
+      bottom: var(--space-4);
+    }
+  }
+}

data/app/assets/stylesheets/baldur/application/components/progress.css

@@ -0,0 +1,84 @@
+@layer components {
+  .progress {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-4);
+    border-radius: var(--radius-lg);
+    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 60%, transparent);
+    color: var(--color-on-surface);
+  }
+
+  .progress__meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.85rem;
+    color: var(--color-text-soft);
+  }
+
+  .progress__track {
+    position: relative;
+    width: 100%;
+    height: 8px;
+    border-radius: 9999px;
+    background: color-mix(in srgb, var(--color-surface-variant) 50%, transparent);
+    overflow: hidden;
+  }
+
+  .progress__indicator {
+    position: absolute;
+    inset: 0;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--color-primary);
+    transition: width var(--motion-duration-medium2) var(--motion-easing-standard);
+  }
+
+  .progress__indicator--indeterminate {
+    width: 35% !important;
+    animation: progress-indeterminate 1.3s ease-in-out infinite;
+  }
+
+  .progress__title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: var(--space-1) 0 0;
+  }
+
+  .progress__description {
+    margin: 0;
+    font-size: 0.9rem;
+    color: var(--color-text-soft);
+  }
+
+  .progress--onboarding {
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .progress--onboarding .progress__title,
+  .progress--onboarding .progress__description {
+    display: none;
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress__indicator {
+    transition: none;
+  }
+
+  .progress__indicator--indeterminate {
+    animation: none;
+  }
+}

data/app/assets/stylesheets/baldur/application/components/segmented-buttons.css

@@ -0,0 +1,117 @@
+@layer components {
+  .segmented {
+    display: inline-flex;
+    align-items: stretch;
+    gap: 2px;
+    padding: 4px;
+    border-radius: var(--radius-lg, 16px);
+    border: 1px solid var(--color-outline-variant);
+    background-color: var(--color-surface-low);
+  }
+
+  .segmented__button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2, 0.5rem);
+    padding: 0.55rem 0.9rem;
+    border-radius: var(--radius-md, 12px);
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--color-on-surface);
+    font-weight: 600;
+    line-height: 1.2;
+    cursor: pointer;
+    transition:
+      background-color var(--motion-duration-short4, 200ms) var(--motion-easing-standard, ease),
+      color var(--motion-duration-short4, 200ms) var(--motion-easing-standard, ease),
+      box-shadow var(--motion-duration-short4, 200ms) var(--motion-easing-standard, ease);
+  }
+
+  .segmented__button:hover {
+    background-color: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
+  }
+
+  .segmented__button:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  .segmented__button.is-selected {
+    background-color: var(--color-accent-container);
+    color: var(--segmented-selected-fg, var(--color-on-accent-container));
+    /* box-shadow: var(--elev-1, 0 4px 8px color-mix(in srgb, #000 15%, transparent)); */
+  }
+
+  .bg-accent .segmented {
+    background-color: var(--color-surface-low);
+  }
+
+  .segmented--on-page {
+    background-color: var(--color-surface-medium);
+  }
+
+  .segmented__button.is-disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .segmented__button.is-icon-only {
+    min-width: 2.75rem;
+    justify-content: center;
+    padding-inline: 0.65rem;
+  }
+
+  .segmented__icon {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+
+  .segmented__label {
+    white-space: nowrap;
+  }
+
+  .segmented__content {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+  }
+
+  .segmented__badge {
+    white-space: nowrap;
+    padding: 0.2rem 0.45rem;
+    border-radius: 999px;
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+    font-size: 0.65rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .segmented__button.is-selected .segmented__badge {
+    background-color: color-mix(in srgb, var(--segmented-selected-fg, var(--color-on-accent-container)) 14%, transparent);
+    color: inherit;
+  }
+
+  .segmented--sm {
+    padding: 2px;
+    border-radius: var(--radius-md, 12px);
+    gap: 1px;
+  }
+
+  .segmented--sm .segmented__button {
+    padding: 0.35rem 0.65rem;
+    border-radius: var(--radius-sm, 10px);
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .segmented--sm .segmented__icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .segmented--sm .segmented__badge {
+    font-size: 0.6rem;
+  }
+}

data/app/assets/stylesheets/baldur/application/components/settings-nav.css

@@ -0,0 +1,84 @@
+@layer components {
+  .settings-nav {
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-xl);
+    background: var(--color-surface-highest);
+    padding: var(--space-3);
+  }
+
+  .settings-nav__group + .settings-nav__group,
+  .settings-nav__item + .settings-nav__group,
+  .settings-nav__group + .settings-nav__item,
+  .settings-nav__item + .settings-nav__item {
+    margin-top: var(--space-1);
+  }
+
+  .settings-nav__disclosure {
+    border-radius: var(--radius-lg);
+  }
+
+  .settings-nav__summary,
+  .settings-nav__link {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    border-radius: var(--radius-md);
+    padding: var(--space-2) var(--space-3);
+    color: var(--color-on-surface);
+    text-decoration: none;
+    font-size: 0.95rem;
+    font-weight: 500;
+    transition:
+      background-color var(--motion-duration-short4) var(--motion-easing-standard),
+      color var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .settings-nav__summary {
+    cursor: pointer;
+    border: 0;
+    background: transparent;
+    text-align: left;
+  }
+
+  .settings-nav__summary:hover,
+  .settings-nav__link:hover {
+    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+    color: var(--color-primary);
+  }
+
+  .settings-nav__link[aria-current="page"],
+  .settings-nav__summary[aria-expanded="true"] {
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary);
+  }
+
+  .settings-nav__summary-label {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .settings-nav__summary-icon,
+  [data-accordion-target="icon"] {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    transition: transform var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .settings-nav__children-shell {
+    overflow: hidden;
+  }
+
+  .settings-nav__children {
+    margin-top: var(--space-1);
+    padding-left: var(--space-3);
+    border-left: 1px solid var(--color-outline-variant);
+  }
+
+  .settings-nav__children .settings-nav__link {
+    font-size: 0.9rem;
+    color: var(--color-on-surface-variant);
+  }
+}