@greese/ui 0.0.0-stage → 1.0.0

package/dist/css/Header.css

@@ -0,0 +1,89 @@
+@import './core.css';
+@layer greese.components {
+  :root:has([class~=greese-Header--sticky]) {
+    --greese-header-inset: calc(env(safe-area-inset-top) + 1px);
+    scroll-padding-block-start: calc(var(--greese-header-height, 3.5rem) + var(--greese-header-inset));
+  }
+  :root:has([class~=greese-Header--sticky][class~=greese-Header--floating]) {
+    --greese-header-inset: calc(env(safe-area-inset-top) + 2 * var(--greese-space-3));
+  }
+  .greese-Header {
+    box-sizing: border-box;
+    padding-block-start: env(safe-area-inset-top);
+    color: var(--greese-color-fg);
+    background-color: var(--greese-color-surface-overlay);
+    border-block-end: 1px solid var(--greese-color-border);
+  }
+  .greese-Header--sticky {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--greese-z-index-sticky);
+  }
+  @supports (animation-timeline: scroll()) {
+    .greese-Header--sticky {
+      animation: greese-header-elevate linear both;
+      animation-range: 0 3rem;
+      animation-timeline: scroll(nearest block);
+    }
+  }
+  .greese-Header-inner {
+    display: flex;
+    gap: var(--greese-space-3) var(--greese-space-4);
+    align-items: center;
+    min-block-size: var(--greese-header-height, 3.5rem);
+    margin-inline: auto;
+    padding-inline: max(var(--greese-space-4), env(safe-area-inset-left)) max(var(--greese-space-4), env(safe-area-inset-right));
+  }
+  .greese-Header--size-sm > .greese-Header-inner {
+    max-inline-size: 600px;
+  }
+  .greese-Header--size-md > .greese-Header-inner {
+    max-inline-size: 900px;
+  }
+  .greese-Header--size-lg > .greese-Header-inner {
+    max-inline-size: 1200px;
+  }
+  .greese-Header--size-xl > .greese-Header-inner {
+    max-inline-size: 1536px;
+  }
+  .greese-Header-brand {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+  .greese-Header-nav {
+    display: flex;
+    flex: 1 1 auto;
+    gap: var(--greese-space-2);
+    align-items: center;
+    min-inline-size: 0;
+  }
+  .greese-Header-actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--greese-space-2);
+    align-items: center;
+  }
+  .greese-Header--floating {
+    padding: calc(env(safe-area-inset-top) + var(--greese-space-3)) var(--greese-space-3) 0;
+    pointer-events: none;
+    background: none;
+    border-block-end: 0;
+    animation: none;
+  }
+  .greese-Header--floating > .greese-Header-inner {
+    pointer-events: auto;
+    background-color: var(--greese-color-surface-overlay);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-surface);
+    box-shadow: var(--greese-shadow-md);
+  }
+  @keyframes greese-header-elevate {
+    from {
+      box-shadow: none;
+    }
+    to {
+      box-shadow: var(--greese-shadow-md);
+    }
+  }
+}

package/dist/css/Heading.css

@@ -0,0 +1,6 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Heading {
+    margin: 0;
+  }
+}

package/dist/css/Icon.css

@@ -0,0 +1,12 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    vertical-align: middle;
+  }
+  .greese-Icon > svg {
+    inline-size: var(--greese-icon-size, 1.25em);
+    block-size: var(--greese-icon-size, 1.25em);
+  }
+}

package/dist/css/IconButton.css

@@ -0,0 +1,7 @@
+@import './core.css';
+@layer greese.components {
+  .greese-IconButton {
+    inline-size: var(--greese-button-height);
+    padding: 0;
+  }
+}

package/dist/css/Image.css

@@ -0,0 +1,69 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Image {
+    box-sizing: border-box;
+    display: block;
+    max-inline-size: 100%;
+    overflow: hidden;
+    background-position: center;
+    background-size: cover;
+  }
+  .greese-Image > img {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+  .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);
+  }
+  .greese-Image--radius-none {
+    border-radius: var(--greese-radius-none);
+  }
+  .greese-Image--radius-sm {
+    border-radius: var(--greese-radius-sm);
+  }
+  .greese-Image--radius-md {
+    border-radius: var(--greese-radius-md);
+  }
+  .greese-Image--radius-lg {
+    border-radius: var(--greese-radius-lg);
+  }
+  .greese-Image--radius-pill {
+    border-radius: var(--greese-radius-pill);
+  }
+  .greese-Image--xs-ratio {
+    aspect-ratio: var(--greese-image-ratio-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Image--sm-ratio {
+      aspect-ratio: var(--greese-image-ratio-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Image--md-ratio {
+      aspect-ratio: var(--greese-image-ratio-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Image--lg-ratio {
+      aspect-ratio: var(--greese-image-ratio-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Image--xl-ratio {
+      aspect-ratio: var(--greese-image-ratio-xl);
+    }
+  }
+}

package/dist/css/Indicator.css

@@ -0,0 +1,41 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Indicator {
+    position: relative;
+    display: inline-flex;
+    inline-size: max-content;
+  }
+  .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%;
+  }
+  .greese-Indicator-item: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/dist/css/Input.css

@@ -0,0 +1,115 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Input {
+    box-sizing: border-box;
+    color: var(--greese-color-fg);
+    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), box-shadow var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  @media (hover: hover) {
+    .greese-Input:hover {
+      border-color: var(--greese-color-fg-muted);
+    }
+  }
+  .greese-Input:has(:focus-visible) {
+    border-color: var(--greese-color-focus-ring);
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: -1px;
+  }
+  .greese-Input[aria-invalid=true], .greese-Input[data-invalid] {
+    border-color: var(--greese-color-negative);
+  }
+  .greese-Input:disabled, .greese-Input[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  .greese-Input {
+    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;
+  }
+  .greese-Input-control::placeholder {
+    color: var(--greese-color-fg-muted);
+    opacity: 1;
+  }
+  .greese-Input-control:disabled {
+    cursor: not-allowed;
+  }
+  .greese-Input-adornment {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-Input-adornment > svg {
+    inline-size: 1.25em;
+    block-size: 1.25em;
+  }
+  .greese-Input--size-xs {
+    --greese-input-height: 1rem;
+    --greese-input-padding: var(--greese-space-1);
+    font-size: var(--greese-type-p3-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Input--size-xs {
+      font-size: max(1rem, var(--greese-type-p3-font-size));
+    }
+  }
+  .greese-Input--size-sm {
+    --greese-input-height: 2rem;
+    --greese-input-padding: var(--greese-space-3);
+    font-size: var(--greese-type-p3-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Input--size-sm {
+      font-size: max(1rem, var(--greese-type-p3-font-size));
+    }
+  }
+  .greese-Input--size-md {
+    --greese-input-height: 2.5rem;
+    --greese-input-padding: var(--greese-space-3);
+    font-size: var(--greese-type-p2-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Input--size-md {
+      font-size: max(1rem, var(--greese-type-p2-font-size));
+    }
+  }
+  .greese-Input--size-lg {
+    --greese-input-height: 3rem;
+    --greese-input-padding: var(--greese-space-4);
+    font-size: var(--greese-type-p2-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Input--size-lg {
+      font-size: max(1rem, var(--greese-type-p2-font-size));
+    }
+  }
+  .greese-Input--size-xl {
+    --greese-input-height: 4rem;
+    --greese-input-padding: var(--greese-space-4);
+    font-size: var(--greese-type-p1-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Input--size-xl {
+      font-size: max(1rem, var(--greese-type-p1-font-size));
+    }
+  }
+}

package/dist/css/Key.css

@@ -0,0 +1,42 @@
+@import './core.css';
+@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);
+  }
+  .greese-Key: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/dist/css/Link.css

@@ -0,0 +1,72 @@
+@import './core.css';
+@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);
+  }
+  .greese-Link:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 1px;
+  }
+  @media (hover: hover) {
+    .greese-Link:hover {
+      color: var(--greese-color-primary-strong);
+    }
+  }
+  .greese-Link--primary {
+    color: var(--greese-color-primary);
+  }
+  @media (hover: hover) {
+    .greese-Link--primary:hover {
+      color: var(--greese-color-primary-strong);
+    }
+  }
+  .greese-Link--secondary {
+    color: var(--greese-color-secondary);
+  }
+  @media (hover: hover) {
+    .greese-Link--secondary:hover {
+      color: var(--greese-color-secondary-strong);
+    }
+  }
+  .greese-Link--tertiary {
+    color: var(--greese-color-tertiary);
+  }
+  @media (hover: hover) {
+    .greese-Link--tertiary:hover {
+      color: var(--greese-color-tertiary-strong);
+    }
+  }
+  .greese-Link--accent {
+    color: var(--greese-color-accent);
+  }
+  @media (hover: hover) {
+    .greese-Link--accent:hover {
+      color: var(--greese-color-accent-strong);
+    }
+  }
+  .greese-Link--neutral {
+    color: inherit;
+  }
+  @media (hover: hover) {
+    .greese-Link--neutral:hover {
+      color: inherit;
+      text-decoration-thickness: 2px;
+    }
+  }
+  .greese-Link--underline-hover {
+    text-decoration-line: none;
+  }
+  @media (hover: hover) {
+    .greese-Link--underline-hover:hover {
+      text-decoration-line: underline;
+    }
+  }
+  .greese-Link--underline-hover:focus-visible {
+    text-decoration-line: underline;
+  }
+}

package/dist/css/List.css

@@ -0,0 +1,52 @@
+@import './core.css';
+@layer greese.components {
+  .greese-List {
+    box-sizing: border-box;
+    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-List--framed > .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/dist/css/Media.css

@@ -0,0 +1,8 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Video,
+  .greese-Embed {
+    background-color: var(--greese-color-surface);
+    border-radius: var(--greese-corner-panel);
+  }
+}

package/dist/css/Menu.css

@@ -0,0 +1,161 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Menu {
+    inset: auto;
+    max-inline-size: calc(100vw - 2 * var(--greese-space-3));
+    max-block-size: calc(100dvh - 2 * var(--greese-space-3));
+    padding: 0;
+    overflow: auto;
+    position-try-fallbacks: flip-block, flip-inline;
+    color: var(--greese-color-fg);
+    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-lg);
+    --greese-overlay-enter: var(--greese-motion-popover, var(--greese-motion-overlay, greese-overlay-in));
+    --greese-overlay-exit-opacity: var(
+      --greese-motion-popover-exit-opacity,
+      var(--greese-motion-overlay-exit-opacity, 0)
+    );
+    --greese-overlay-exit-translate: var(
+      --greese-motion-popover-exit-translate,
+      var(--greese-motion-overlay-exit-translate, var(--greese-overlay-origin))
+    );
+    --greese-overlay-exit-scale: var(
+      --greese-motion-popover-exit-scale,
+      var(--greese-motion-overlay-exit-scale, 1)
+    );
+    --greese-overlay-exit-mask-image: var(
+      --greese-motion-popover-exit-mask-image,
+      var(--greese-motion-overlay-exit-mask-image, none)
+    );
+    --greese-overlay-exit-mask-repeat: var(
+      --greese-motion-popover-exit-mask-repeat,
+      var(--greese-motion-overlay-exit-mask-repeat, no-repeat)
+    );
+    --greese-overlay-exit-mask-position: var(
+      --greese-motion-popover-exit-mask-position,
+      var(--greese-motion-overlay-exit-mask-position, 50% 50%)
+    );
+    --greese-overlay-exit-mask-size: var(
+      --greese-motion-popover-exit-mask-size,
+      var(--greese-motion-overlay-exit-mask-size, 100% 100%)
+    );
+    --greese-overlay-exit-mask-from: var(
+      --greese-motion-popover-exit-mask-from,
+      var(--greese-motion-overlay-exit-mask-from, 100% 100%)
+    );
+    --greese-overlay-exit-transform: var(
+      --greese-motion-popover-exit-transform,
+      var(--greese-motion-overlay-exit-transform, none)
+    );
+    --greese-overlay-exit-transform-origin: var(
+      --greese-motion-popover-exit-transform-origin,
+      var(--greese-motion-overlay-exit-transform-origin, 50% 50%)
+    );
+    --greese-overlay-origin: 0 -0.25rem;
+    transition-property: opacity, translate, scale, transform, mask-size, mask-position, display, overlay;
+    transition-duration: var(--greese-motion-exit-duration, var(--greese-duration-fast));
+    transition-timing-function: var(--greese-motion-exit-ease, var(--greese-easing-exit));
+    transition-behavior: allow-discrete;
+    mask-image: var(--greese-motion-exit-mask-image, var(--greese-overlay-exit-mask-image));
+    mask-repeat: var(--greese-motion-exit-mask-repeat, var(--greese-overlay-exit-mask-repeat));
+    mask-position: var(--greese-motion-exit-mask-position, var(--greese-overlay-exit-mask-position));
+    mask-size: var(--greese-motion-exit-mask-from, var(--greese-overlay-exit-mask-from));
+    transform-origin: var(--greese-motion-exit-transform-origin, var(--greese-overlay-exit-transform-origin));
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Menu:popover-open {
+      animation-name: var(--greese-overlay-enter);
+      animation-duration: var(--greese-motion-overlay-duration, var(--greese-duration-fast));
+      animation-timing-function: var(--greese-motion-enter-ease, var(--greese-easing-enter));
+      animation-fill-mode: backwards;
+    }
+  }
+  .greese-Menu:not(:popover-open) {
+    opacity: var(--greese-motion-exit-opacity, var(--greese-overlay-exit-opacity));
+    translate: var(--greese-motion-exit-translate, var(--greese-overlay-exit-translate));
+    scale: var(--greese-motion-exit-scale, var(--greese-overlay-exit-scale));
+    transform: var(--greese-motion-exit-transform, var(--greese-overlay-exit-transform));
+    mask-size: var(--greese-motion-exit-mask-size, var(--greese-overlay-exit-mask-size));
+  }
+  @keyframes greese-overlay-in {
+    from {
+      opacity: 0;
+      translate: var(--greese-overlay-origin);
+    }
+  }
+  .greese-Menu {
+    min-inline-size: 11rem;
+    overflow: clip;
+  }
+  .greese-Menu: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 {
+    box-sizing: border-box;
+    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;
+  }
+  .greese-MenuItem:focus, .greese-MenuItem:hover {
+    background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
+  }
+  .greese-MenuItem:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: -2px;
+  }
+  .greese-MenuItem[aria-disabled=true] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  @media (pointer: coarse) {
+    .greese-MenuItem {
+      min-block-size: 2.75rem;
+    }
+  }
+  .greese-MenuItem > svg {
+    inline-size: 1.1em;
+    block-size: 1.1em;
+  }
+  .greese-MenuItem--primary {
+    color: var(--greese-color-primary);
+  }
+  .greese-MenuItem--secondary {
+    color: var(--greese-color-secondary);
+  }
+  .greese-MenuItem--tertiary {
+    color: var(--greese-color-tertiary);
+  }
+  .greese-MenuItem--accent {
+    color: var(--greese-color-accent);
+  }
+  .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);
+  }
+}