@greese/ui 0.0.0-stage → 1.1.0

package/dist/css/Pagination.css

@@ -0,0 +1,43 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Pagination-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-1);
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .greese-Pagination-list .greese-Button {
+    min-inline-size: 2rem;
+    font-variant-numeric: tabular-nums;
+  }
+  .greese-Pagination-step {
+    padding-inline: var(--greese-space-2);
+  }
+  .greese-Pagination-step > svg,
+  .greese-Pagination-step .greese-Button-icon > svg {
+    inline-size: 1.1em;
+    block-size: 1.1em;
+  }
+  .greese-Pagination-step--next svg {
+    scale: -1 1;
+  }
+  .greese-Pagination:dir(rtl) .greese-Pagination-step svg {
+    scale: -1 1;
+  }
+  .greese-Pagination:dir(rtl) .greese-Pagination-step--next svg {
+    scale: 1;
+  }
+  .greese-Pagination-ellipsis {
+    padding-inline: var(--greese-space-1);
+    color: var(--greese-color-fg-muted);
+  }
+  @media (width < 600px) {
+    .greese-Pagination-page:not(.greese-Pagination-page--current),
+    .greese-Pagination-ellipsis {
+      display: none;
+    }
+  }
+}

package/dist/css/Popover.css

@@ -0,0 +1,93 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Popover {
+    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-Popover: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-Popover: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-Popover {
+    inline-size: max-content;
+    max-inline-size: min(22rem, 100vw - 2 * var(--greese-space-3));
+    padding: var(--greese-space-4);
+  }
+}

package/dist/css/Progress.css

@@ -0,0 +1,101 @@
+@import './core.css';
+/* stylelint-disable selector-no-vendor-prefix */
+@layer greese.components {
+  .greese-Progress {
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    block-size: var(--greese-progress-height);
+    overflow: hidden;
+    color: var(--greese-color-primary);
+    background-color: var(--greese-color-track);
+    border: 0;
+    border-radius: var(--greese-corner-pill);
+    appearance: none;
+  }
+  .greese-Progress::-webkit-progress-bar {
+    background-color: var(--greese-color-track);
+  }
+  .greese-Progress::-webkit-progress-value {
+    background-color: var(--greese-color-primary);
+    border-radius: var(--greese-corner-pill);
+    transition: inline-size var(--greese-duration-normal) var(--greese-easing-standard);
+  }
+  .greese-Progress::-moz-progress-bar {
+    background-color: var(--greese-color-primary);
+    border-radius: var(--greese-corner-pill);
+  }
+  .greese-Progress:indeterminate {
+    background-image: linear-gradient(to right, transparent 0%, var(--greese-color-primary) 50%, transparent 100%);
+    background-repeat: no-repeat;
+    background-size: 40% 100%;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Progress:indeterminate {
+      animation: greese-progress-sweep 1.2s var(--greese-easing-standard) infinite;
+    }
+  }
+  .greese-Progress:indeterminate::-webkit-progress-bar {
+    background-color: transparent;
+  }
+  .greese-Progress:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+  }
+  .greese-Progress--loading {
+    --greese-progress-stripes: linear-gradient(
+      -45deg,
+      var(--greese-color-primary) 25%,
+      var(--greese-color-track) 25% 50%,
+      var(--greese-color-primary) 50% 75%,
+      var(--greese-color-track) 75%
+    );
+    --greese-progress-tile: max(0.5rem, 2 * var(--greese-progress-height));
+  }
+  .greese-Progress--loading::-webkit-progress-value {
+    background-image: var(--greese-progress-stripes);
+    background-size: var(--greese-progress-tile) var(--greese-progress-tile);
+  }
+  .greese-Progress--loading::-moz-progress-bar {
+    background-image: var(--greese-progress-stripes);
+    background-size: var(--greese-progress-tile) var(--greese-progress-tile);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Progress--loading::-webkit-progress-value {
+      animation: greese-progress-stripes 0.8s linear infinite;
+    }
+    .greese-Progress--loading::-moz-progress-bar {
+      animation: greese-progress-stripes 0.8s linear infinite;
+    }
+  }
+  @keyframes greese-progress-stripes {
+    from {
+      background-position: 0 0;
+    }
+    to {
+      background-position: var(--greese-progress-tile) 0;
+    }
+  }
+  .greese-Progress--xs {
+    --greese-progress-height: 0.125rem;
+  }
+  .greese-Progress--sm {
+    --greese-progress-height: 0.25rem;
+  }
+  .greese-Progress--md {
+    --greese-progress-height: 0.5rem;
+  }
+  .greese-Progress--lg {
+    --greese-progress-height: 0.75rem;
+  }
+  .greese-Progress--xl {
+    --greese-progress-height: 1rem;
+  }
+  @keyframes greese-progress-sweep {
+    from {
+      background-position: -60% 0;
+    }
+    to {
+      background-position: 160% 0;
+    }
+  }
+}

package/dist/css/RadialProgress.css

@@ -0,0 +1,44 @@
+@import './core.css';
+@property --greese-radialprogress-angle {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@layer greese.components {
+  .greese-RadialProgress {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    inline-size: var(--greese-radialprogress-size, 4rem);
+    aspect-ratio: 1;
+    font-size: calc(var(--greese-radialprogress-size, 4rem) / 4.5);
+    font-weight: var(--greese-font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    color: var(--greese-color-fg);
+  }
+  .greese-RadialProgress::before {
+    --greese-radialprogress-angle: calc(var(--greese-radialprogress-value) * 1%);
+    position: absolute;
+    inset: 0;
+    content: "";
+    background: conic-gradient(var(--greese-color-primary) var(--greese-radialprogress-angle), var(--greese-color-track) 0);
+    border-radius: 50%;
+    mask: radial-gradient(farthest-side, transparent calc(100% - var(--greese-radialprogress-thickness, 10%) - 0.5px), var(--greese-color-fg) calc(100% - var(--greese-radialprogress-thickness, 10%)));
+    transition: --greese-radialprogress-angle var(--greese-duration-slow) var(--greese-easing-standard);
+  }
+  .greese-RadialProgress-label {
+    position: relative;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-RadialProgress--indeterminate::before {
+      animation: greese-radialprogress-spin 1s linear infinite;
+    }
+  }
+  @keyframes greese-radialprogress-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+}

package/dist/css/Radio.css

@@ -0,0 +1,41 @@
+@import './core.css';
+@layer greese.components {
+  @media (pointer: coarse) {
+    .greese-Radio-input::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-Radio-input {
+    position: relative;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    margin: 0;
+    cursor: pointer;
+    background-color: var(--greese-color-canvas);
+    border: 1.5px solid var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-round);
+    appearance: none;
+  }
+  .greese-Radio-input:disabled {
+    cursor: not-allowed;
+  }
+  .greese-Radio-input {
+    transition: border-color var(--greese-duration-fast) var(--greese-easing-standard), border-width var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  .greese-Radio-input:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-Radio-input:checked {
+    border: 5px solid var(--greese-color-primary);
+  }
+  .greese-Radio-input[aria-invalid=true]:not(:checked) {
+    border-color: var(--greese-color-negative);
+  }
+}

package/dist/css/Rating.css

@@ -0,0 +1,100 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Rating {
+    box-sizing: border-box;
+    --greese-rating-size: 1.5rem;
+    --greese-rating-on: var(--greese-color-warning);
+    --greese-rating-off: var(--greese-color-border-strong);
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--greese-space-1);
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+  .greese-Rating--xs {
+    --greese-rating-size: 0.75rem;
+  }
+  .greese-Rating--sm {
+    --greese-rating-size: 1.125rem;
+  }
+  .greese-Rating--md {
+    --greese-rating-size: 1.625rem;
+  }
+  .greese-Rating--lg {
+    --greese-rating-size: 2rem;
+  }
+  .greese-Rating--xl {
+    --greese-rating-size: 3rem;
+  }
+  .greese-Rating-items,
+  .greese-Rating-stars {
+    position: relative;
+    display: inline-grid;
+    inline-size: max-content;
+  }
+  .greese-Rating-items > *,
+  .greese-Rating-stars > * {
+    grid-area: 1/1;
+  }
+  .greese-Rating-items {
+    cursor: pointer;
+    touch-action: none;
+  }
+  .greese-Rating-items:has(.greese-Rating-input:focus-visible) {
+    border-radius: var(--greese-corner-inset);
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (pointer: coarse) {
+    .greese-Rating-items > .greese-Rating-stars {
+      padding-block: max(0px, (44px - var(--greese-rating-size)) / 2);
+    }
+  }
+  .greese-Rating:disabled .greese-Rating-items {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  .greese-Rating-empty,
+  .greese-Rating-filled {
+    display: inline-flex;
+  }
+  .greese-Rating-filled {
+    clip-path: inset(0 calc(100% - var(--greese-rating-fill)) 0 0);
+    transition: clip-path var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  .greese-Rating-filled:dir(rtl) {
+    clip-path: inset(0 0 0 calc(100% - var(--greese-rating-fill)));
+  }
+  .greese-Rating-filled .greese-Rating-icon {
+    color: var(--greese-rating-on);
+  }
+  .greese-Rating-icon {
+    display: inline-flex;
+    inline-size: var(--greese-rating-size);
+    block-size: var(--greese-rating-size);
+    padding: 0.0625rem;
+    color: var(--greese-rating-off);
+  }
+  .greese-Rating-icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  .greese-Rating-choices {
+    display: flex;
+  }
+  .greese-Rating-choice {
+    position: relative;
+    flex: 1;
+  }
+  .greese-Rating-input {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    cursor: inherit;
+    opacity: 0;
+  }
+}

package/dist/css/ScrollSpy.css

@@ -0,0 +1,6 @@
+@import './core.css';
+@layer greese.components {
+  .greese-ScrollSpy [aria-current=location] {
+    color: var(--greese-color-primary);
+  }
+}

package/dist/css/SegmentedControl.css

@@ -0,0 +1,101 @@
+@import './core.css';
+@layer greese.components {
+  .greese-SegmentedControl {
+    box-sizing: border-box;
+    display: inline-block;
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+  .greese-SegmentedControl > 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);
+  }
+  .greese-SegmentedControl--size-xs {
+    --greese-button-height: 1rem;
+    --greese-button-padding: var(--greese-space-1);
+    font-size: var(--greese-type-p3-font-size);
+  }
+  .greese-SegmentedControl--size-sm {
+    --greese-button-height: 2rem;
+    --greese-button-padding: var(--greese-space-3);
+    font-size: var(--greese-type-p3-font-size);
+  }
+  .greese-SegmentedControl--size-md {
+    --greese-button-height: 2.5rem;
+    --greese-button-padding: var(--greese-space-3);
+    font-size: var(--greese-type-p2-font-size);
+  }
+  .greese-SegmentedControl--size-lg {
+    --greese-button-height: 3rem;
+    --greese-button-padding: var(--greese-space-4);
+    font-size: var(--greese-type-p2-font-size);
+  }
+  .greese-SegmentedControl--size-xl {
+    --greese-button-height: 4rem;
+    --greese-button-padding: var(--greese-space-4);
+    font-size: var(--greese-type-p1-font-size);
+  }
+  .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);
+  }
+  @media (hover: hover) {
+    .greese-Segment:hover {
+      color: var(--greese-color-fg);
+    }
+  }
+  .greese-Segment: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));
+  }
+  .greese-Segment:has(:focus-visible) {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 1px;
+  }
+  .greese-Segment:has(:disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  @media (pointer: coarse) {
+    .greese-Segment {
+      min-block-size: 2.75rem;
+    }
+  }
+  .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/dist/css/Select.css

@@ -0,0 +1,115 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Select {
+    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-Select:hover {
+      border-color: var(--greese-color-fg-muted);
+    }
+  }
+  .greese-Select:has(:focus-visible) {
+    border-color: var(--greese-color-focus-ring);
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: -1px;
+  }
+  .greese-Select[aria-invalid=true], .greese-Select[data-invalid] {
+    border-color: var(--greese-color-negative);
+  }
+  .greese-Select:disabled, .greese-Select[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  .greese-Select {
+    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;
+  }
+  .greese-Select-control:disabled {
+    cursor: not-allowed;
+  }
+  .greese-Select-control: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;
+  }
+  .greese-Select--size-xs {
+    --greese-select-height: 1rem;
+    --greese-select-padding: var(--greese-space-1);
+    font-size: var(--greese-type-p3-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Select--size-xs {
+      font-size: max(1rem, var(--greese-type-p3-font-size));
+    }
+  }
+  .greese-Select--size-sm {
+    --greese-select-height: 2rem;
+    --greese-select-padding: var(--greese-space-3);
+    font-size: var(--greese-type-p3-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Select--size-sm {
+      font-size: max(1rem, var(--greese-type-p3-font-size));
+    }
+  }
+  .greese-Select--size-md {
+    --greese-select-height: 2.5rem;
+    --greese-select-padding: var(--greese-space-3);
+    font-size: var(--greese-type-p2-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Select--size-md {
+      font-size: max(1rem, var(--greese-type-p2-font-size));
+    }
+  }
+  .greese-Select--size-lg {
+    --greese-select-height: 3rem;
+    --greese-select-padding: var(--greese-space-4);
+    font-size: var(--greese-type-p2-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Select--size-lg {
+      font-size: max(1rem, var(--greese-type-p2-font-size));
+    }
+  }
+  .greese-Select--size-xl {
+    --greese-select-height: 4rem;
+    --greese-select-padding: var(--greese-space-4);
+    font-size: var(--greese-type-p1-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Select--size-xl {
+      font-size: max(1rem, var(--greese-type-p1-font-size));
+    }
+  }
+}