@greese/ui 0.0.0-stage → 1.0.0

package/src/components/Image/Image.scss

@@ -0,0 +1,46 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-Image {
+    @include mixins.component-root;
+
+    display: block;
+    max-inline-size: 100%;
+    overflow: hidden;
+    background-position: center;
+    background-size: cover;
+
+    > img {
+      display: block;
+      max-inline-size: 100%;
+      block-size: auto;
+    }
+  }
+
+  // With a ratio, the frame sets the size and the image fills it.
+  .greese-Image--framed > img,
+  .greese-Image--fallback {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .greese-Image--contain > img {
+    object-fit: contain;
+  }
+
+  .greese-Image--fallback {
+    display: grid;
+    place-items: center;
+    color: var(--greese-color-fg-muted);
+    background-color: var(--greese-color-surface);
+  }
+
+  @each $radius in (none, sm, md, lg, pill) {
+    .greese-Image--radius-#{$radius} {
+      border-radius: var(--greese-radius-#{$radius});
+    }
+  }
+
+  @include mixins.responsive-prop('greese-Image', 'ratio', aspect-ratio);
+}

package/src/components/Indicator/Indicator.scss

@@ -0,0 +1,48 @@
+@layer greese.components {
+  .greese-Indicator {
+    position: relative;
+    display: inline-flex;
+    inline-size: max-content;
+  }
+
+  // Centred on the corner or edge: each axis is start (0), middle or end.
+  .greese-Indicator-item {
+    --greese-indicator-x: 100%;
+    --greese-indicator-y: 0%;
+
+    position: absolute;
+    inset-block-start: var(--greese-indicator-y);
+    inset-inline-start: var(--greese-indicator-x);
+    z-index: 1;
+    display: inline-flex;
+    translate: -50% -50%;
+
+    &:dir(rtl) {
+      translate: 50% -50%;
+    }
+  }
+
+  .greese-Indicator-item--top-start,
+  .greese-Indicator-item--start,
+  .greese-Indicator-item--bottom-start {
+    --greese-indicator-x: 0%;
+  }
+
+  .greese-Indicator-item--top,
+  .greese-Indicator-item--center,
+  .greese-Indicator-item--bottom {
+    --greese-indicator-x: 50%;
+  }
+
+  .greese-Indicator-item--start,
+  .greese-Indicator-item--center,
+  .greese-Indicator-item--end {
+    --greese-indicator-y: 50%;
+  }
+
+  .greese-Indicator-item--bottom-start,
+  .greese-Indicator-item--bottom,
+  .greese-Indicator-item--bottom-end {
+    --greese-indicator-y: 100%;
+  }
+}

package/src/components/Input/Input.scss

@@ -0,0 +1,58 @@
+@use 'sass:map';
+@use '../../styles/controls';
+
+@layer greese.components {
+  .greese-Input {
+    @include controls.frame($focus-within: true);
+
+    display: flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+    inline-size: 100%;
+    min-block-size: var(--greese-input-height);
+    padding-inline: var(--greese-input-padding);
+    cursor: text;
+  }
+
+  .greese-Input-control {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    block-size: 100%;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: 0;
+    outline: none;
+
+    &::placeholder {
+      color: var(--greese-color-fg-muted);
+      opacity: 1;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .greese-Input-adornment {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--greese-color-fg-muted);
+
+    > svg {
+      inline-size: 1.25em;
+      block-size: 1.25em;
+    }
+  }
+
+  @each $size, $spec in controls.$sizes {
+    .greese-Input--size-#{$size} {
+      --greese-input-height: #{map.get($spec, height)};
+      --greese-input-padding: #{map.get($spec, padding)};
+
+      @include controls.no-zoom-font(map.get($spec, font));
+    }
+  }
+}

package/src/components/Key/Key.scss

@@ -0,0 +1,48 @@
+@layer greese.components {
+  .greese-Key {
+    display: inline-flex;
+    gap: var(--greese-space-1);
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 1.75em;
+    padding: 0.1em 0.45em;
+    font-family: var(--greese-font-mono);
+    font-size: var(--greese-type-p3-font-size);
+    line-height: var(--greese-line-height-snug);
+    color: var(--greese-color-fg);
+    white-space: nowrap;
+    vertical-align: middle;
+    background-color: var(--greese-color-surface);
+    border: 1px solid var(--greese-color-border-strong);
+    border-block-end-width: 2px;
+    border-radius: var(--greese-corner-inset);
+
+    // A shortcut: the outer <kbd> only groups the keys.
+    &:has(> .greese-Key) {
+      min-inline-size: 0;
+      padding: 0;
+      background: none;
+      border: 0;
+    }
+  }
+
+  .greese-Key--xs {
+    font-size: var(--greese-type-caption-font-size);
+  }
+
+  .greese-Key--sm {
+    font-size: var(--greese-type-p3-font-size);
+  }
+
+  .greese-Key--md {
+    font-size: var(--greese-type-p1-font-size);
+  }
+
+  .greese-Key--lg {
+    font-size: var(--greese-type-h3-font-size);
+  }
+
+  .greese-Key--xl {
+    font-size: var(--greese-type-h1-font-size);
+  }
+}

package/src/components/Link/Link.scss

@@ -0,0 +1,50 @@
+@use '../../styles/mixins';
+@use '../../styles/tones';
+
+@layer greese.components {
+  .greese-Link {
+    color: var(--greese-color-primary);
+    text-decoration-line: underline;
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.2em;
+    border-radius: var(--greese-corner-inset);
+    transition: color var(--greese-duration-fast) var(--greese-easing-standard);
+
+    @include mixins.focus-ring(1px);
+
+    @include mixins.hover {
+      color: var(--greese-color-primary-strong);
+    }
+  }
+
+  @each $tone in tones.$brand {
+    .greese-Link--#{$tone} {
+      color: var(--greese-color-#{$tone});
+
+      @include mixins.hover {
+        color: var(--greese-color-#{$tone}-strong);
+      }
+    }
+  }
+
+  .greese-Link--neutral {
+    color: inherit;
+
+    @include mixins.hover {
+      color: inherit;
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  .greese-Link--underline-hover {
+    text-decoration-line: none;
+
+    @include mixins.hover {
+      text-decoration-line: underline;
+    }
+
+    &:focus-visible {
+      text-decoration-line: underline;
+    }
+  }
+}

package/src/components/List/List.scss

@@ -0,0 +1,62 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-List {
+    @include mixins.component-root;
+
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .greese-List--divided > .greese-ListItem + .greese-ListItem {
+    border-block-start: 1px solid var(--greese-color-border);
+  }
+
+  .greese-List--framed {
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-surface);
+
+    > .greese-ListItem {
+      padding-inline: var(--greese-space-4);
+    }
+  }
+
+  .greese-ListItem {
+    display: flex;
+    gap: var(--greese-space-3);
+    align-items: center;
+    min-inline-size: 0;
+    padding-block: var(--greese-list-padding, var(--greese-space-3));
+  }
+
+  .greese-ListItem-start,
+  .greese-ListItem-end {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--greese-space-2);
+    align-items: center;
+  }
+
+  .greese-ListItem-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-inline-size: 0;
+  }
+
+  .greese-ListItem-title {
+    overflow: hidden;
+    font-weight: var(--greese-font-weight-medium);
+    color: var(--greese-color-fg);
+    text-overflow: ellipsis;
+  }
+
+  .greese-ListItem-description {
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+}

package/src/components/Media/Media.scss

@@ -0,0 +1,7 @@
+@layer greese.components {
+  .greese-Video,
+  .greese-Embed {
+    background-color: var(--greese-color-surface);
+    border-radius: var(--greese-corner-panel);
+  }
+}

package/src/components/Menu/Menu.scss

@@ -0,0 +1,91 @@
+@use '../../styles/floating';
+@use '../../styles/mixins';
+@use '../../styles/tones';
+
+@layer greese.components {
+  .greese-Menu {
+    @include floating.anchored;
+    @include floating.surface;
+    @include floating.enter-exit(':popover-open', 0 -0.25rem, popover);
+
+    min-inline-size: 11rem;
+
+    // The viewport scrolls, not the menu: a theme's shape draws its border on
+    // the menu's own box, which a scrolling box would carry away.
+    overflow: clip;
+
+    &:popover-open {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .greese-Menu-viewport {
+    min-block-size: 0;
+    padding: var(--greese-space-1);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .greese-MenuItem {
+    @include mixins.component-root;
+
+    display: flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+    inline-size: 100%;
+    min-block-size: 2.25rem;
+    padding-inline: var(--greese-space-3);
+    font: inherit;
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+    outline: none;
+
+    // Focus is the highlight: keyboard and pointer both move it.
+    &:focus,
+    &:hover {
+      background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: -2px;
+    }
+
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    @media (pointer: coarse) {
+      min-block-size: 2.75rem;
+    }
+
+    > svg {
+      inline-size: 1.1em;
+      block-size: 1.1em;
+    }
+  }
+
+  @each $tone in tones.$brand {
+    .greese-MenuItem--#{$tone} {
+      color: var(--greese-color-#{$tone});
+    }
+  }
+
+  .greese-MenuItem--negative {
+    color: var(--greese-color-negative);
+  }
+
+  .greese-MenuSeparator {
+    block-size: 1px;
+    margin: var(--greese-space-1) calc(-1 * var(--greese-space-1));
+    background-color: var(--greese-color-border);
+  }
+}

package/src/components/Motion/Motion.scss

@@ -0,0 +1,106 @@
+// The `greese` prop's CSS presets (defined in src/effects.ts): entrances and scroll
+// reveals with no JavaScript. Every rule sits behind
+// `prefers-reduced-motion: no-preference`, so reduced motion means no motion.
+// Configuration arrives as inline custom properties on the element. Effect
+// names are camelCase in the API (`fadeUp`) and kebab-case here (`fade-up`).
+
+@use '../../../dist/maps' as defaults;
+@use '../../styles/effect';
+
+@layer greese.utilities {
+  // Named eases the `greese` prop can use without JavaScript (power2 for the
+  // in/out/inOut shorthands, as in greese.js).
+  :root {
+    --greese-ease-linear: linear;
+    --greese-ease-ease: ease;
+    --greese-ease-ease-in: ease-in;
+    --greese-ease-ease-out: ease-out;
+    --greese-ease-ease-in-out: ease-in-out;
+    --greese-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
+    --greese-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+    --greese-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  }
+
+  // Defaults are var() fallbacks, not declarations here, so values set on an
+  // ancestor (or :root) are inherited and tune every preset beneath it; a
+  // per-instance option (inline) still wins.
+  .greese-Motion:dir(rtl) {
+    --greese-motion-dir: -1;
+  }
+
+  // `'theme'`: whatever entrance the theme assigns (ADR 0025). Themes reassign
+  // which effect plays; the effects themselves keep their own keyframes.
+  .greese-Motion--enter-theme,
+  .greese-Motion--view-theme {
+    --greese-motion-name: var(--greese-motion-theme, greese-fade-up);
+  }
+
+  // Each effect's name classes, and what an overlay's exit changes: read by
+  // the floating enter-exit mixin.
+  @each $name, $plan in defaults.$effects {
+    @include effect.classes($name, $plan);
+  }
+
+  // Stagger: each child's position, for the delay. Children past 24 share
+  // the last slot. Where sibling-index() exists, one rule does it; the
+  // :nth-child fallback sits in @supports so those browsers never even match
+  // it, since structural selectors are tried against every element.
+  @supports (order: sibling-index()) {
+    .greese-Motion--stagger > * {
+      --greese-motion-index: min(sibling-index() - 1, 24);
+    }
+  }
+
+  @supports not (order: sibling-index()) {
+    @for $i from 1 through 24 {
+      .greese-Motion--stagger > :nth-child(#{$i}) {
+        --greese-motion-index: #{$i - 1};
+      }
+    }
+
+    .greese-Motion--stagger > :nth-child(n + 25) {
+      --greese-motion-index: 24;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    // `backwards`: the first frame applies during the delay; afterwards the
+    // element's own styles rule again (presets end at its natural state).
+    .greese-Motion--enter:not(.greese-Motion--stagger),
+    .greese-Motion--enter.greese-Motion--stagger > *,
+    .greese-Motion--view[data-greese-view='in']:not(.greese-Motion--stagger),
+    .greese-Motion--view.greese-Motion--stagger[data-greese-view='in'] > * {
+      --greese-motion-offset: calc(
+        var(--greese-motion-index, 0) * var(--greese-motion-stagger, 0s)
+      );
+
+      // `--greese-motion-scope`: where a parent's scope starts this entrance
+      // (components/Motion/scope.ts), on top of its own delay and stagger.
+      --greese-motion-wait: calc(
+        var(--greese-motion-delay, 0s) + var(--greese-motion-offset)
+      );
+
+      animation: var(--greese-motion-name) var(--greese-motion-duration, 0.5s)
+        var(--greese-motion-ease, var(--greese-ease-out))
+        calc(var(--greese-motion-wait) + var(--greese-motion-scope, 0s)) backwards;
+    }
+
+    // A scope held until it scrolls into view: its entrances wait at their
+    // first frame, then play. Set by scope.ts, never without JS.
+    .greese-Motion--scope[data-greese-scope='pending'] .greese-Motion--enter,
+    .greese-Motion--scope[data-greese-scope='pending'] .greese-Motion--stagger > * {
+      animation-play-state: paused;
+    }
+
+    // Waiting to scroll into view (set by the runtime, never without JS).
+    .greese-Motion--view[data-greese-view='pending']:not(.greese-Motion--stagger),
+    .greese-Motion--view.greese-Motion--stagger[data-greese-view='pending'] > * {
+      opacity: 0;
+    }
+
+    // The keyframes come from src/effects.ts, through the build's maps.
+    @each $name, $plan in defaults.$effects {
+      @include effect.keyframes($name, $plan);
+    }
+  }
+}

package/src/components/NumberField/NumberField.scss

@@ -0,0 +1,44 @@
+@use '../../styles/mixins';
+
+@layer greese.components {
+  .greese-NumberField .greese-Input-control {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .greese-NumberField-steppers {
+    display: inline-flex;
+    gap: 2px;
+    margin-inline-end: calc(-1 * var(--greese-space-2));
+  }
+
+  .greese-NumberField-step {
+    @include mixins.touch-target;
+
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    padding: 0;
+    color: var(--greese-color-fg-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+
+    > svg {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+
+    @include mixins.hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+}

package/src/components/OtpField/OtpField.scss

@@ -0,0 +1,91 @@
+@use 'sass:map';
+@use '../../styles/controls';
+@use '../../styles/mixins';
+
+@layer greese.components {
+  // The input covers the boxes, invisible; the boxes draw its value.
+  .greese-OtpField {
+    @include mixins.component-root;
+
+    position: relative;
+    display: inline-flex;
+    gap: var(--greese-space-2);
+    max-inline-size: 100%;
+  }
+
+  @each $size, $spec in controls.$sizes {
+    .greese-OtpField--size-#{$size} {
+      --greese-otp-size: #{map.get($spec, height)};
+
+      font-size: max(16px, #{map.get($spec, font)});
+    }
+  }
+
+  .greese-OtpField-input {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: 16px;
+    color: transparent;
+    letter-spacing: 1em;
+    caret-color: transparent;
+    cursor: text;
+    background: transparent;
+    border: 0;
+    outline: none;
+    opacity: 0;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .greese-OtpField-slot {
+    display: grid;
+    flex: 0 1 var(--greese-otp-size);
+    place-items: center;
+    min-inline-size: 2rem;
+    block-size: calc(var(--greese-otp-size) * 1.15);
+    font-family: var(--greese-font-mono);
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-fg);
+    pointer-events: none;
+    background-color: var(--greese-color-canvas);
+    border: 1px solid var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-field);
+    transition: border-color var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+
+  .greese-OtpField-slot--active {
+    border-color: var(--greese-color-focus-ring);
+    box-shadow: 0 0 0 1px var(--greese-color-focus-ring);
+
+    // A blinking caret in the empty active box.
+    &:empty::after {
+      inline-size: 1px;
+      block-size: 1.2em;
+      content: '';
+      background-color: currentcolor;
+
+      @include mixins.motion-safe {
+        animation: greese-otp-caret 1s steps(1) infinite;
+      }
+    }
+  }
+
+  .greese-OtpField[data-invalid] .greese-OtpField-slot {
+    border-color: var(--greese-color-negative);
+  }
+
+  .greese-OtpField[data-disabled] .greese-OtpField-slot {
+    opacity: 0.55;
+  }
+
+  @keyframes greese-otp-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+}