@greese/ui 0.0.0-stage → 1.1.0

package/src/components/SegmentedControl/SegmentedControl.scss

@@ -0,0 +1,107 @@
+@use 'sass:map';
+@use '../../styles/mixins';
+@use '../../styles/controls';
+
+@layer greese.components {
+  .greese-SegmentedControl {
+    @include mixins.component-root;
+
+    display: inline-block;
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+
+    > legend {
+      padding: 0;
+      margin-block-end: var(--greese-space-2);
+    }
+  }
+
+  .greese-SegmentedControl--full {
+    display: block;
+  }
+
+  .greese-SegmentedControl-track {
+    display: flex;
+    gap: 2px;
+    padding: 3px;
+    background-color: var(--greese-color-surface);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-control);
+  }
+
+  // Sizes
+  @each $size, $spec in controls.$sizes {
+    .greese-SegmentedControl--size-#{$size} {
+      --greese-button-height: #{map.get($spec, height)};
+      --greese-button-padding: #{map.get($spec, padding)};
+
+      font-size: map.get($spec, font);
+    }
+  }
+
+  .greese-Segment {
+    position: relative;
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--greese-segment-height);
+    padding-inline: var(--greese-space-3);
+    font-weight: var(--greese-font-weight-medium);
+    color: var(--greese-color-fg-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    border-radius: calc(var(--greese-corner-control) - 3px);
+    transition:
+      background-color var(--greese-duration-fast) var(--greese-easing-standard),
+      color var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+    }
+
+    // The chosen segment's fill and edge are hooks a theme reassigns (a color
+    // variant outlines it).
+    &:has(:checked) {
+      color: var(--greese-color-fg);
+      background-color: var(
+        --greese-segment-current-bg,
+        var(--greese-color-surface-overlay)
+      );
+      box-shadow: var(--greese-segment-current-edge, var(--greese-shadow-sm));
+    }
+
+    &:has(:focus-visible) {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 1px;
+    }
+
+    &:has(:disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    @media (pointer: coarse) {
+      min-block-size: 2.75rem;
+    }
+  }
+
+  // The real radio covers the segment: it takes clicks, taps and focus.
+  // Icons and text centered as boxes: an inline icon sits on the text's
+  // middle, below the segment's.
+  .greese-Segment-label {
+    display: inline-flex;
+    gap: var(--greese-space-1);
+    align-items: center;
+  }
+
+  .greese-Segment-input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    cursor: inherit;
+    opacity: 0;
+  }
+}

package/src/components/Select/Select.scss

@@ -0,0 +1,59 @@
+@use 'sass:map';
+@use '../../styles/controls';
+
+@layer greese.components {
+  .greese-Select {
+    @include controls.frame($focus-within: true);
+
+    position: relative;
+    display: flex;
+    inline-size: 100%;
+    min-block-size: var(--greese-select-height);
+  }
+
+  .greese-Select-control {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    padding-inline: var(--greese-select-padding)
+      calc(var(--greese-select-padding) + 1.5em);
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+    appearance: none;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    // The placeholder option, while selected.
+    &:has(option[value='']:checked) {
+      color: var(--greese-color-fg-muted);
+    }
+  }
+
+  .greese-Select-chevron {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: var(--greese-select-padding);
+    inline-size: 0.5em;
+    block-size: 0.5em;
+    margin-block: auto;
+    pointer-events: none;
+    border-block-end: 2px solid var(--greese-color-fg-muted);
+    border-inline-end: 2px solid var(--greese-color-fg-muted);
+    rotate: 45deg;
+    translate: 0 -0.15em;
+  }
+
+  @each $size, $spec in controls.$sizes {
+    .greese-Select--size-#{$size} {
+      --greese-select-height: #{map.get($spec, height)};
+      --greese-select-padding: #{map.get($spec, padding)};
+
+      @include controls.no-zoom-font(map.get($spec, font));
+    }
+  }
+}

package/src/components/Sidebar/Sidebar.scss

@@ -0,0 +1,88 @@
+@use '../../styles/floating';
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-SidebarLayout {
+    min-block-size: 100dvh;
+  }
+
+  // Off-canvas (below the breakpoint): a sheet from the inline start.
+  .greese-Sidebar {
+    @include mixins.component-root;
+    @include floating.enter-exit(
+      ':popover-open',
+      calc(-100% * var(--greese-sidebar-dir)) 0,
+      drawer
+    );
+
+    --greese-sidebar-dir: 1;
+
+    inset: 0 auto 0 0;
+    flex-direction: column;
+    gap: var(--greese-space-1);
+    inline-size: min(var(--greese-sidebar-width, 16rem), 100vw - 3rem);
+    block-size: 100dvh;
+    padding: max(var(--greese-space-4), env(safe-area-inset-top)) var(--greese-space-3)
+      max(var(--greese-space-4), env(safe-area-inset-bottom));
+    margin: 0;
+    overflow-y: auto;
+    color: var(--greese-color-fg);
+    background-color: var(--greese-color-surface);
+    border: 0;
+    border-inline-end: 1px solid var(--greese-color-border);
+    box-shadow: var(--greese-shadow-lg);
+
+    &:dir(rtl) {
+      --greese-sidebar-dir: -1;
+
+      inset: 0 0 0 auto;
+    }
+
+    &:popover-open {
+      display: flex;
+    }
+
+    &::backdrop {
+      background-color: var(--greese-color-scrim);
+    }
+  }
+
+  @each $bp in (sm, md, lg, xl) {
+    @include mixins.up($bp) {
+      .greese-SidebarLayout--#{$bp} {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        align-items: start;
+
+        // Persistent: an ordinary sticky column. Author `display` overrides
+        // the UA's `[popover]:not(:popover-open) { display: none }`. It's
+        // never open as a popover, so every property a theme's drawer exit
+        // sets (a scale, a turn, a wipe's mask) is put back to rest.
+        > .greese-Sidebar {
+          position: sticky;
+          inset-block-start: var(--greese-sidebar-top, 0);
+          display: flex;
+          block-size: calc(100dvh - var(--greese-sidebar-top, 0px));
+          box-shadow: none;
+          opacity: 1;
+          translate: none;
+          scale: none;
+
+          // `initial`, not `none`: lightningcss (Vite's CSS minifier) folds
+          // `translate: none; scale: none; transform: none` into `transform`
+          // alone, and the off-canvas `translate` comes back.
+          transform: initial;
+          mask-image: none;
+
+          &[data-collapsed] {
+            --greese-sidebar-width: 4.5rem;
+          }
+        }
+      }
+
+      .greese-SidebarTrigger--#{$bp} {
+        display: none;
+      }
+    }
+  }
+}

package/src/components/Skeleton/Skeleton.scss

@@ -0,0 +1,60 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Skeleton {
+    display: block;
+    inline-size: var(--greese-skeleton-width, 100%);
+    block-size: var(--greese-skeleton-height, 1rem);
+    background-color: var(--greese-color-surface);
+    background-image: linear-gradient(
+      90deg,
+      transparent,
+      color-mix(in oklab, var(--greese-color-fg) 6%, transparent),
+      transparent
+    );
+    background-repeat: no-repeat;
+    background-size: 50% 100%;
+    border-radius: var(--greese-corner-inset);
+
+    @include mixins.motion-safe {
+      animation: greese-skeleton-shimmer 1.4s ease-in-out infinite;
+    }
+  }
+
+  .greese-Skeleton--text {
+    block-size: var(--greese-skeleton-height, 1lh);
+    background-clip: content-box;
+    padding-block: 0.2lh;
+  }
+
+  .greese-Skeleton--rect {
+    block-size: var(--greese-skeleton-height, 8rem);
+    border-radius: var(--greese-corner-panel);
+  }
+
+  .greese-Skeleton--circle {
+    inline-size: var(--greese-skeleton-width, 2.5rem);
+    block-size: var(--greese-skeleton-height, var(--greese-skeleton-width, 2.5rem));
+    border-radius: var(--greese-corner-round);
+  }
+
+  .greese-Skeleton-lines {
+    display: flex;
+    flex-direction: column;
+    inline-size: var(--greese-skeleton-width, 100%);
+
+    > :last-child:not(:only-child) {
+      inline-size: 60%;
+    }
+  }
+
+  @keyframes greese-skeleton-shimmer {
+    from {
+      background-position: -100% 0;
+    }
+
+    to {
+      background-position: 200% 0;
+    }
+  }
+}

package/src/components/Slider/Slider.scss

@@ -0,0 +1,96 @@
+@use '../../styles/mixins';
+
+// Vendor pseudo-elements are the only way to style range parts.
+/* stylelint-disable selector-no-vendor-prefix */
+
+@mixin track {
+  block-size: 0.375rem;
+  background: linear-gradient(
+    to var(--greese-slider-towards),
+    var(--greese-color-primary) var(--greese-slider-fill),
+    var(--greese-color-track) var(--greese-slider-fill)
+  );
+  border-radius: var(--greese-corner-pill);
+}
+
+@mixin thumb {
+  box-sizing: border-box;
+  inline-size: var(--greese-slider-thumb);
+  block-size: var(--greese-slider-thumb);
+  background-color: var(--greese-color-canvas);
+  border: 2px solid var(--greese-color-primary);
+  border-radius: var(--greese-corner-round);
+  box-shadow: var(--greese-shadow-sm);
+}
+
+@layer greese.components {
+  .greese-Slider {
+    --greese-slider-thumb: 1.25rem;
+    --greese-slider-towards: right;
+
+    @include mixins.component-root;
+
+    display: block;
+    inline-size: 100%;
+    block-size: var(--greese-slider-thumb);
+    margin: 0;
+    cursor: pointer;
+    background: none;
+    appearance: none;
+
+    &:dir(rtl) {
+      --greese-slider-towards: left;
+    }
+
+    // A thumb big enough for fingers.
+    @media (pointer: coarse) {
+      --greese-slider-thumb: 1.75rem;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &::-webkit-slider-runnable-track {
+      @include track;
+    }
+
+    &::-moz-range-track {
+      @include track;
+    }
+
+    &::-webkit-slider-thumb {
+      @include thumb;
+
+      margin-block-start: calc((0.375rem - var(--greese-slider-thumb)) / 2);
+      appearance: none;
+    }
+
+    &::-moz-range-thumb {
+      @include thumb;
+    }
+
+    &:focus-visible::-webkit-slider-thumb {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &:focus-visible::-moz-range-thumb {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &[aria-invalid='true']::-webkit-slider-thumb {
+      border-color: var(--greese-color-negative);
+    }
+
+    &[aria-invalid='true']::-moz-range-thumb {
+      border-color: var(--greese-color-negative);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+  }
+}

package/src/components/Spacer/Spacer.scss

@@ -0,0 +1,15 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Spacer {
+    flex: 1 1 auto;
+    align-self: stretch;
+  }
+
+  .greese-Spacer--fixed {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  @include mixins.responsive-prop('greese-Spacer', 'size', flex-basis);
+}

package/src/components/SpeedDial/SpeedDial.scss

@@ -0,0 +1,109 @@
+@use '../../styles/floating';
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-SpeedDial {
+    @include mixins.component-root;
+
+    display: inline-flex;
+  }
+
+  .greese-SpeedDial--fixed {
+    position: fixed;
+    inset-block-end: calc(var(--greese-space-5) + env(safe-area-inset-bottom));
+    inset-inline-end: var(--greese-space-5);
+    z-index: var(--greese-z-index-sticky);
+  }
+
+  // A solid primary IconButton, larger and round, lifted off the page.
+  .greese-SpeedDial-trigger.greese-Button {
+    --greese-button-height: 3.5rem;
+
+    border-radius: var(--greese-corner-round);
+    box-shadow: var(--greese-shadow-lg);
+  }
+
+  .greese-SpeedDial-icon {
+    display: inline-flex;
+    transition: rotate var(--greese-duration-normal) var(--greese-easing-standard);
+
+    > svg {
+      inline-size: 1.5rem;
+      block-size: 1.5rem;
+    }
+  }
+
+  .greese-SpeedDial-trigger[aria-expanded='true'] .greese-SpeedDial-icon {
+    rotate: 45deg;
+  }
+
+  // The actions: a column above the button, aligned to its inline end.
+  .greese-SpeedDial-actions {
+    @include floating.anchored;
+    @include floating.enter-exit(':popover-open', 0 0.5rem, popover);
+
+    flex-direction: column;
+    gap: var(--greese-space-2);
+    align-items: flex-end;
+    overflow: visible;
+    background: none;
+    border: 0;
+
+    &:popover-open {
+      display: flex;
+    }
+  }
+
+  .greese-SpeedDialAction {
+    display: inline-flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+    padding: 0;
+    font: inherit;
+    color: var(--greese-color-fg);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-pill);
+
+    @include mixins.focus-ring;
+  }
+
+  .greese-SpeedDialAction-label {
+    padding: 0.25rem 0.625rem;
+    font-size: var(--greese-type-p3-font-size);
+    font-weight: var(--greese-font-weight-medium);
+    white-space: nowrap;
+    background-color: var(--greese-color-surface-overlay);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-panel);
+    box-shadow: var(--greese-shadow-sm);
+  }
+
+  // An outline IconButton's look on the page's overlay surface.
+  .greese-SpeedDialAction-icon.greese-Button {
+    --greese-button-height: 2.75rem;
+    --greese-button-fg: var(--greese-color-fg);
+    --greese-button-bg: var(--greese-color-surface-overlay);
+    --greese-button-bg-hover: var(--greese-color-surface);
+    --greese-button-border: var(--greese-color-border);
+
+    margin-inline-end: 0.375rem;
+    border-radius: var(--greese-corner-round);
+    box-shadow: var(--greese-shadow-md);
+
+    > svg {
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+    }
+  }
+
+  // The whole action is the button: hovering its label lights the icon too.
+  .greese-SpeedDialAction {
+    @include mixins.hover {
+      .greese-SpeedDialAction-icon {
+        background-color: var(--greese-button-bg-hover);
+      }
+    }
+  }
+}

package/src/components/Spinner/Spinner.scss

@@ -0,0 +1,43 @@
+$sizes: (
+  xs: 0.75rem,
+  sm: 1rem,
+  md: 1.5rem,
+  lg: 2.25rem,
+  xl: 3.5rem,
+);
+
+@layer greese.components {
+  .greese-Spinner {
+    display: inline-block;
+    flex-shrink: 0;
+    inline-size: var(--greese-spinner-size);
+    block-size: var(--greese-spinner-size);
+    vertical-align: middle;
+    border: 2px solid color-mix(in oklab, currentcolor 20%, transparent);
+    border-block-start-color: currentcolor;
+    border-radius: 50%;
+    animation: greese-spinner-spin 0.75s linear infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: greese-spinner-pulse 1.5s ease-in-out infinite;
+    }
+  }
+
+  @each $size, $value in $sizes {
+    .greese-Spinner--#{$size} {
+      --greese-spinner-size: #{$value};
+    }
+  }
+
+  @keyframes greese-spinner-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+
+  @keyframes greese-spinner-pulse {
+    50% {
+      opacity: 0.4;
+    }
+  }
+}

package/src/components/Stack/Stack.scss

@@ -0,0 +1,57 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Stack {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+
+  @include mixins.responsive-prop(
+    'greese-Stack',
+    'direction',
+    flex-direction,
+    (
+      row: row,
+      column: column,
+      row-reverse: row-reverse,
+      column-reverse: column-reverse,
+    )
+  );
+  @include mixins.responsive-prop('greese-Stack', 'gap', gap, mixins.space-tokens());
+  @include mixins.responsive-prop(
+    'greese-Stack',
+    'align',
+    align-items,
+    (
+      start: flex-start,
+      center: center,
+      end: flex-end,
+      stretch: stretch,
+      baseline: baseline,
+    )
+  );
+  @include mixins.responsive-prop(
+    'greese-Stack',
+    'justify',
+    justify-content,
+    (
+      start: flex-start,
+      center: center,
+      end: flex-end,
+      between: space-between,
+      around: space-around,
+      evenly: space-evenly,
+    )
+  );
+  @include mixins.responsive-prop(
+    'greese-Stack',
+    'wrap',
+    flex-wrap,
+    (
+      wrap: wrap,
+      nowrap: nowrap,
+      wrap-reverse: wrap-reverse,
+    )
+  );
+}