@greese/ui 0.0.0-stage → 1.0.0

package/dist/css/Button.css

@@ -0,0 +1,275 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Button {
+    box-sizing: border-box;
+    --greese-button-tone: var(--greese-color-primary);
+    --greese-button-on-tone: var(--greese-color-primary-content);
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: var(--greese-space-2);
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--greese-button-height);
+    padding-inline: var(--greese-button-padding);
+    font-family: var(--greese-type-button-font-family, inherit);
+    font-style: var(--greese-type-button-font-style, normal);
+    font-weight: var(--greese-type-button-font-weight);
+    line-height: var(--greese-type-button-line-height);
+    text-transform: var(--greese-type-button-text-transform, none);
+    letter-spacing: var(--greese-type-button-letter-spacing);
+    color: var(--greese-button-fg);
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    background-color: var(--greese-button-bg);
+    border: 1px solid var(--greese-button-border, transparent);
+    border-radius: var(--greese-corner-control);
+    transition: background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  .greese-Button:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (pointer: coarse) {
+    .greese-Button::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  @media (hover: hover) {
+    .greese-Button:hover {
+      background-color: var(--greese-button-bg-hover);
+    }
+  }
+  .greese-Button:active:not([aria-disabled=true], :disabled) {
+    background-color: var(--greese-button-bg-active);
+  }
+  .greese-Button:disabled, .greese-Button[aria-disabled=true]:not([data-loading]) {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  .greese-Button:not(button)[aria-disabled=true] {
+    pointer-events: none;
+  }
+  .greese-Button--neutral {
+    --greese-button-tone: var(--greese-color-fg);
+    --greese-button-on-tone: var(--greese-color-canvas);
+  }
+  .greese-Button--primary {
+    --greese-button-tone: var(--greese-color-primary);
+    --greese-button-on-tone: var(--greese-color-primary-content);
+  }
+  .greese-Button--secondary {
+    --greese-button-tone: var(--greese-color-secondary);
+    --greese-button-on-tone: var(--greese-color-secondary-content);
+  }
+  .greese-Button--tertiary {
+    --greese-button-tone: var(--greese-color-tertiary);
+    --greese-button-on-tone: var(--greese-color-tertiary-content);
+  }
+  .greese-Button--accent {
+    --greese-button-tone: var(--greese-color-accent);
+    --greese-button-on-tone: var(--greese-color-accent-content);
+  }
+  .greese-Button--negative {
+    --greese-button-tone: var(--greese-color-negative);
+    --greese-button-on-tone: var(--greese-color-negative-content);
+  }
+  .greese-Button--solid {
+    --greese-button-fg: var(--greese-button-on-tone);
+    --greese-button-bg: var(--greese-button-tone);
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone),
+      var(--greese-button-on-tone) 14%
+    );
+    --greese-button-bg-active: color-mix(
+      in oklab,
+      var(--greese-button-tone),
+      var(--greese-button-on-tone) 24%
+    );
+  }
+  .greese-Button--soft {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: color-mix(in oklab, var(--greese-button-tone) 12%, transparent);
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone) 20%,
+      transparent
+    );
+    --greese-button-bg-active: color-mix(
+      in oklab,
+      var(--greese-button-tone) 28%,
+      transparent
+    );
+  }
+  .greese-Button--outline {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: transparent;
+    --greese-button-border: color-mix(
+      in oklab,
+      var(--greese-button-tone) 55%,
+      transparent
+    );
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone) 8%,
+      transparent
+    );
+    --greese-button-bg-active: color-mix(
+      in oklab,
+      var(--greese-button-tone) 16%,
+      transparent
+    );
+  }
+  .greese-Button--ghost {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: transparent;
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone) 10%,
+      transparent
+    );
+    --greese-button-bg-active: color-mix(
+      in oklab,
+      var(--greese-button-tone) 18%,
+      transparent
+    );
+  }
+  .greese-Button--text {
+    --greese-button-fg: currentcolor;
+    --greese-button-bg: transparent;
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone) 8%,
+      transparent
+    );
+    --greese-button-bg-active: color-mix(
+      in oklab,
+      var(--greese-button-tone) 14%,
+      transparent
+    );
+  }
+  .greese-Button--size-xs {
+    --greese-button-height: 1rem;
+    --greese-button-padding: var(--greese-space-1);
+    font-size: var(--greese-type-p3-font-size);
+  }
+  .greese-Button--size-sm {
+    --greese-button-height: 2rem;
+    --greese-button-padding: var(--greese-space-3);
+    font-size: var(--greese-type-p3-font-size);
+  }
+  .greese-Button--size-md {
+    --greese-button-height: 2.5rem;
+    --greese-button-padding: var(--greese-space-3);
+    font-size: var(--greese-type-p2-font-size);
+  }
+  .greese-Button--size-lg {
+    --greese-button-height: 3rem;
+    --greese-button-padding: var(--greese-space-4);
+    font-size: var(--greese-type-p2-font-size);
+  }
+  .greese-Button--size-xl {
+    --greese-button-height: 4rem;
+    --greese-button-padding: var(--greese-space-4);
+    font-size: var(--greese-type-p1-font-size);
+  }
+  .greese-Button-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+  .greese-Button-icon > svg {
+    inline-size: 1.25em;
+    block-size: 1.25em;
+  }
+  .greese-Button[data-loading] {
+    color: transparent;
+    cursor: progress;
+  }
+  .greese-Button[data-loading]::before {
+    position: absolute;
+    inset: 0;
+    inline-size: 1.1em;
+    block-size: 1.1em;
+    margin: auto;
+    content: "";
+    border: 2px solid var(--greese-button-fg);
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Button[data-loading]::before {
+      animation: greese-button-spin 0.7s linear infinite;
+    }
+  }
+  .greese-Button[data-loading] > * {
+    visibility: hidden;
+  }
+  .greese-Button--xs-width {
+    inline-size: var(--greese-button-width-xs);
+  }
+  .greese-Button--xs-width-full {
+    inline-size: 100%;
+  }
+  .greese-Button--xs-width-auto {
+    inline-size: auto;
+  }
+  @media (width >= 600px) {
+    .greese-Button--sm-width {
+      inline-size: var(--greese-button-width-sm);
+    }
+    .greese-Button--sm-width-full {
+      inline-size: 100%;
+    }
+    .greese-Button--sm-width-auto {
+      inline-size: auto;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Button--md-width {
+      inline-size: var(--greese-button-width-md);
+    }
+    .greese-Button--md-width-full {
+      inline-size: 100%;
+    }
+    .greese-Button--md-width-auto {
+      inline-size: auto;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Button--lg-width {
+      inline-size: var(--greese-button-width-lg);
+    }
+    .greese-Button--lg-width-full {
+      inline-size: 100%;
+    }
+    .greese-Button--lg-width-auto {
+      inline-size: auto;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Button--xl-width {
+      inline-size: var(--greese-button-width-xl);
+    }
+    .greese-Button--xl-width-full {
+      inline-size: 100%;
+    }
+    .greese-Button--xl-width-auto {
+      inline-size: auto;
+    }
+  }
+  @keyframes greese-button-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+}

package/dist/css/ButtonGroup.css

@@ -0,0 +1,40 @@
+@import './core.css';
+@layer greese.components {
+  .greese-ButtonGroup {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-2);
+  }
+  .greese-ButtonGroup[data-orientation=vertical] {
+    flex-direction: column;
+  }
+  .greese-ButtonGroup--attached {
+    flex-wrap: nowrap;
+    gap: 0;
+  }
+  .greese-ButtonGroup--attached > :is(.greese-Button, .greese-Select, .greese-Input):is(:focus-visible, :focus-within) {
+    z-index: 1;
+  }
+  .greese-ButtonGroup--attached > :is(.greese-Select, .greese-Input) {
+    flex: 1 1 auto;
+    inline-size: auto;
+  }
+  .greese-ButtonGroup--attached[data-orientation=horizontal] > :is(.greese-Button, .greese-Select, .greese-Input):not(:first-child) {
+    margin-inline-start: -1px;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .greese-ButtonGroup--attached[data-orientation=horizontal] > :is(.greese-Button, .greese-Select, .greese-Input):not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .greese-ButtonGroup--attached[data-orientation=vertical] > :is(.greese-Button, .greese-Select, .greese-Input):not(:first-child) {
+    margin-block-start: -1px;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  .greese-ButtonGroup--attached[data-orientation=vertical] > :is(.greese-Button, .greese-Select, .greese-Input):not(:last-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+}

package/dist/css/Card.css

@@ -0,0 +1,101 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Card {
+    --greese-card-padding: var(--greese-space-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-4);
+    min-inline-size: 0;
+    padding: var(--greese-card-padding);
+    overflow: hidden;
+    color: var(--greese-color-fg);
+    border-radius: var(--greese-corner-surface);
+  }
+  @media (width >= 900px) {
+    .greese-Card {
+      --greese-card-padding: var(--greese-space-5);
+    }
+  }
+  .greese-Card--outline {
+    background-color: var(--greese-color-surface-overlay);
+    border: 1px solid var(--greese-color-border);
+  }
+  .greese-Card--elevated {
+    background-color: var(--greese-color-surface-overlay);
+    box-shadow: var(--greese-shadow-md);
+  }
+  .greese-Card--filled {
+    background-color: var(--greese-color-surface);
+  }
+  .greese-Card--interactive {
+    position: relative;
+    text-decoration: none;
+    cursor: pointer;
+    transition: box-shadow var(--greese-duration-normal) var(--greese-easing-standard), border-color var(--greese-duration-normal) var(--greese-easing-standard), translate var(--greese-duration-normal) var(--greese-easing-standard);
+  }
+  .greese-Card--interactive:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (hover: hover) {
+    .greese-Card--interactive:hover {
+      border-color: var(--greese-color-border-strong);
+      box-shadow: var(--greese-shadow-lg);
+    }
+  }
+  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
+    .greese-Card--interactive:hover {
+      translate: 0 -2px;
+    }
+  }
+  .greese-Card--interactive {
+    overflow: visible;
+  }
+  .greese-Card--interactive::before {
+    position: absolute;
+    inset-block: 100% -4px;
+    inset-inline: 0;
+    content: "";
+  }
+  .greese-CardMedia {
+    margin-inline: calc(-1 * var(--greese-card-padding));
+    overflow: hidden;
+  }
+  .greese-CardMedia:first-child {
+    margin-block-start: calc(-1 * var(--greese-card-padding));
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+  }
+  .greese-CardMedia:last-child {
+    margin-block-end: calc(-1 * var(--greese-card-padding));
+    border-end-start-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+  .greese-CardMedia > :is(img, video, picture) {
+    display: block;
+    inline-size: 100%;
+  }
+  .greese-Card--xs-padding {
+    --greese-card-padding: var(--greese-card-padding-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Card--sm-padding {
+      --greese-card-padding: var(--greese-card-padding-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Card--md-padding {
+      --greese-card-padding: var(--greese-card-padding-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Card--lg-padding {
+      --greese-card-padding: var(--greese-card-padding-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Card--xl-padding {
+      --greese-card-padding: var(--greese-card-padding-xl);
+    }
+  }
+}

package/dist/css/Carousel.css

@@ -0,0 +1,170 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Carousel {
+    box-sizing: border-box;
+    position: relative;
+    display: grid;
+    gap: var(--greese-space-3);
+    min-inline-size: 0;
+  }
+  .greese-Carousel-viewport {
+    --greese-carousel-per-view: 1;
+    --greese-carousel-gap: var(--greese-space-3);
+    display: flex;
+    gap: var(--greese-carousel-gap);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    border-radius: var(--greese-corner-panel);
+  }
+  .greese-Carousel-viewport::-webkit-scrollbar {
+    display: none;
+  }
+  .greese-Carousel-viewport:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Carousel-viewport {
+      scroll-behavior: smooth;
+    }
+  }
+  .greese-CarouselSlide {
+    --greese-carousel-gaps: calc(
+      (var(--greese-carousel-per-view) - 1) * var(--greese-carousel-gap)
+    );
+    flex: 0 0 calc((100% - var(--greese-carousel-gaps)) / var(--greese-carousel-per-view));
+    min-inline-size: 0;
+    scroll-snap-align: start;
+  }
+  .greese-Carousel-control {
+    position: absolute;
+    inset-block-start: calc(50% - 1.25rem - var(--greese-carousel-dots, 0px) / 2);
+    display: inline-grid;
+    place-items: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    padding: 0;
+    color: var(--greese-color-fg);
+    cursor: pointer;
+    background-color: color-mix(in oklab, var(--greese-color-surface-overlay) 88%, transparent);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-round);
+    box-shadow: var(--greese-shadow-md);
+    translate: 0 -50%;
+    transition: opacity var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  .greese-Carousel-control:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (pointer: coarse) {
+    .greese-Carousel-control::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-Carousel-control:disabled {
+    cursor: default;
+    opacity: 0;
+  }
+  .greese-Carousel-control > svg {
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+  }
+  .greese-Carousel:has(.greese-Carousel-indicators) {
+    --greese-carousel-dots: calc(0.5rem + var(--greese-space-3));
+  }
+  .greese-Carousel-control--previous {
+    inset-inline-start: var(--greese-space-2);
+  }
+  .greese-Carousel-control--next {
+    inset-inline-end: var(--greese-space-2);
+  }
+  .greese-Carousel-control--next > svg {
+    scale: -1 1;
+  }
+  .greese-Carousel-control:dir(rtl) > svg {
+    scale: -1 1;
+  }
+  .greese-Carousel-control--next:dir(rtl) > svg {
+    scale: 1;
+  }
+  @media (hover: none) {
+    .greese-Carousel-control {
+      display: none;
+    }
+  }
+  .greese-Carousel-indicators {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-1);
+    justify-content: center;
+  }
+  .greese-Carousel-indicator {
+    position: relative;
+    inline-size: 1.5rem;
+    block-size: 0.5rem;
+    padding: 0;
+    cursor: pointer;
+    background: none;
+    border: 0;
+  }
+  .greese-Carousel-indicator:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (pointer: coarse) {
+    .greese-Carousel-indicator::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 24px);
+      block-size: max(100%, 24px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-Carousel-indicator::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    background-color: var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-pill);
+    clip-path: inset(0 calc(50% - 0.25rem) round var(--greese-corner-pill));
+    transition: clip-path var(--greese-duration-normal) var(--greese-easing-standard), background-color var(--greese-duration-normal) var(--greese-easing-standard);
+  }
+  .greese-Carousel-indicator[aria-current=true]::before {
+    background-color: var(--greese-color-primary);
+    clip-path: inset(0 round var(--greese-corner-pill));
+  }
+  .greese-Carousel--xs-per-view {
+    --greese-carousel-per-view: var(--greese-carousel-per-view-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Carousel--sm-per-view {
+      --greese-carousel-per-view: var(--greese-carousel-per-view-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Carousel--md-per-view {
+      --greese-carousel-per-view: var(--greese-carousel-per-view-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Carousel--lg-per-view {
+      --greese-carousel-per-view: var(--greese-carousel-per-view-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Carousel--xl-per-view {
+      --greese-carousel-per-view: var(--greese-carousel-per-view-xl);
+    }
+  }
+}

package/dist/css/Center.css

@@ -0,0 +1,11 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .greese-Center--inline {
+    display: inline-flex;
+  }
+}