@greese/ui 0.0.0-stage → 1.1.0

package/dist/css/Sidebar.css

@@ -0,0 +1,207 @@
+@import './core.css';
+@layer greese.components {
+  .greese-SidebarLayout {
+    min-block-size: 100dvh;
+  }
+  .greese-Sidebar {
+    box-sizing: border-box;
+    --greese-overlay-enter: var(--greese-motion-drawer, var(--greese-motion-overlay, greese-overlay-in));
+    --greese-overlay-exit-opacity: var(
+      --greese-motion-drawer-exit-opacity,
+      var(--greese-motion-overlay-exit-opacity, 0)
+    );
+    --greese-overlay-exit-translate: var(
+      --greese-motion-drawer-exit-translate,
+      var(--greese-motion-overlay-exit-translate, var(--greese-overlay-origin))
+    );
+    --greese-overlay-exit-scale: var(
+      --greese-motion-drawer-exit-scale,
+      var(--greese-motion-overlay-exit-scale, 1)
+    );
+    --greese-overlay-exit-mask-image: var(
+      --greese-motion-drawer-exit-mask-image,
+      var(--greese-motion-overlay-exit-mask-image, none)
+    );
+    --greese-overlay-exit-mask-repeat: var(
+      --greese-motion-drawer-exit-mask-repeat,
+      var(--greese-motion-overlay-exit-mask-repeat, no-repeat)
+    );
+    --greese-overlay-exit-mask-position: var(
+      --greese-motion-drawer-exit-mask-position,
+      var(--greese-motion-overlay-exit-mask-position, 50% 50%)
+    );
+    --greese-overlay-exit-mask-size: var(
+      --greese-motion-drawer-exit-mask-size,
+      var(--greese-motion-overlay-exit-mask-size, 100% 100%)
+    );
+    --greese-overlay-exit-mask-from: var(
+      --greese-motion-drawer-exit-mask-from,
+      var(--greese-motion-overlay-exit-mask-from, 100% 100%)
+    );
+    --greese-overlay-exit-transform: var(
+      --greese-motion-drawer-exit-transform,
+      var(--greese-motion-overlay-exit-transform, none)
+    );
+    --greese-overlay-exit-transform-origin: var(
+      --greese-motion-drawer-exit-transform-origin,
+      var(--greese-motion-overlay-exit-transform-origin, 50% 50%)
+    );
+    --greese-overlay-origin: calc(-100% * var(--greese-sidebar-dir)) 0;
+    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-Sidebar: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-Sidebar: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-Sidebar {
+    --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);
+  }
+  .greese-Sidebar:dir(rtl) {
+    --greese-sidebar-dir: -1;
+    inset: 0 0 0 auto;
+  }
+  .greese-Sidebar:popover-open {
+    display: flex;
+  }
+  .greese-Sidebar::backdrop {
+    background-color: var(--greese-color-scrim);
+  }
+  @media (width >= 600px) {
+    .greese-SidebarLayout--sm {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: start;
+    }
+    .greese-SidebarLayout--sm > .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;
+      transform: initial;
+      mask-image: none;
+    }
+    .greese-SidebarLayout--sm > .greese-Sidebar[data-collapsed] {
+      --greese-sidebar-width: 4.5rem;
+    }
+    .greese-SidebarTrigger--sm {
+      display: none;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-SidebarLayout--md {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: start;
+    }
+    .greese-SidebarLayout--md > .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;
+      transform: initial;
+      mask-image: none;
+    }
+    .greese-SidebarLayout--md > .greese-Sidebar[data-collapsed] {
+      --greese-sidebar-width: 4.5rem;
+    }
+    .greese-SidebarTrigger--md {
+      display: none;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-SidebarLayout--lg {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: start;
+    }
+    .greese-SidebarLayout--lg > .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;
+      transform: initial;
+      mask-image: none;
+    }
+    .greese-SidebarLayout--lg > .greese-Sidebar[data-collapsed] {
+      --greese-sidebar-width: 4.5rem;
+    }
+    .greese-SidebarTrigger--lg {
+      display: none;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-SidebarLayout--xl {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: start;
+    }
+    .greese-SidebarLayout--xl > .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;
+      transform: initial;
+      mask-image: none;
+    }
+    .greese-SidebarLayout--xl > .greese-Sidebar[data-collapsed] {
+      --greese-sidebar-width: 4.5rem;
+    }
+    .greese-SidebarTrigger--xl {
+      display: none;
+    }
+  }
+}

package/dist/css/Skeleton.css

@@ -0,0 +1,48 @@
+@import './core.css';
+@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);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Skeleton {
+      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%);
+  }
+  .greese-Skeleton-lines > :last-child:not(:only-child) {
+    inline-size: 60%;
+  }
+  @keyframes greese-skeleton-shimmer {
+    from {
+      background-position: -100% 0;
+    }
+    to {
+      background-position: 200% 0;
+    }
+  }
+}

package/dist/css/Slider.css

@@ -0,0 +1,75 @@
+@import './core.css';
+/* stylelint-disable selector-no-vendor-prefix */
+@layer greese.components {
+  .greese-Slider {
+    --greese-slider-thumb: 1.25rem;
+    --greese-slider-towards: right;
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    block-size: var(--greese-slider-thumb);
+    margin: 0;
+    cursor: pointer;
+    background: none;
+    appearance: none;
+  }
+  .greese-Slider:dir(rtl) {
+    --greese-slider-towards: left;
+  }
+  @media (pointer: coarse) {
+    .greese-Slider {
+      --greese-slider-thumb: 1.75rem;
+    }
+  }
+  .greese-Slider:focus-visible {
+    outline: none;
+  }
+  .greese-Slider::-webkit-slider-runnable-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);
+  }
+  .greese-Slider::-moz-range-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);
+  }
+  .greese-Slider::-webkit-slider-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);
+    margin-block-start: calc((0.375rem - var(--greese-slider-thumb)) / 2);
+    appearance: none;
+  }
+  .greese-Slider::-moz-range-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);
+  }
+  .greese-Slider:focus-visible::-webkit-slider-thumb {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-Slider:focus-visible::-moz-range-thumb {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-Slider[aria-invalid=true]::-webkit-slider-thumb {
+    border-color: var(--greese-color-negative);
+  }
+  .greese-Slider[aria-invalid=true]::-moz-range-thumb {
+    border-color: var(--greese-color-negative);
+  }
+  .greese-Slider:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}

package/dist/css/Spacer.css

@@ -0,0 +1,34 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Spacer {
+    flex: 1 1 auto;
+    align-self: stretch;
+  }
+  .greese-Spacer--fixed {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .greese-Spacer--xs-size {
+    flex-basis: var(--greese-spacer-size-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Spacer--sm-size {
+      flex-basis: var(--greese-spacer-size-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Spacer--md-size {
+      flex-basis: var(--greese-spacer-size-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Spacer--lg-size {
+      flex-basis: var(--greese-spacer-size-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Spacer--xl-size {
+      flex-basis: var(--greese-spacer-size-xl);
+    }
+  }
+}

package/dist/css/SpeedDial.css

@@ -0,0 +1,165 @@
+@import './core.css';
+@layer greese.components {
+  .greese-SpeedDial {
+    box-sizing: border-box;
+    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);
+  }
+  .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);
+  }
+  .greese-SpeedDial-icon > svg {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+  .greese-SpeedDial-trigger[aria-expanded=true] .greese-SpeedDial-icon {
+    rotate: 45deg;
+  }
+  .greese-SpeedDial-actions {
+    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;
+    --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.5rem;
+    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-SpeedDial-actions: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-SpeedDial-actions: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-SpeedDial-actions {
+    flex-direction: column;
+    gap: var(--greese-space-2);
+    align-items: flex-end;
+    overflow: visible;
+    background: none;
+    border: 0;
+  }
+  .greese-SpeedDial-actions: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);
+  }
+  .greese-SpeedDialAction:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .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);
+  }
+  .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);
+  }
+  .greese-SpeedDialAction-icon.greese-Button > svg {
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+  }
+  @media (hover: hover) {
+    .greese-SpeedDialAction:hover .greese-SpeedDialAction-icon {
+      background-color: var(--greese-button-bg-hover);
+    }
+  }
+}

package/dist/css/Spinner.css

@@ -0,0 +1,44 @@
+@import './core.css';
+@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) {
+    .greese-Spinner {
+      animation: greese-spinner-pulse 1.5s ease-in-out infinite;
+    }
+  }
+  .greese-Spinner--xs {
+    --greese-spinner-size: 0.75rem;
+  }
+  .greese-Spinner--sm {
+    --greese-spinner-size: 1rem;
+  }
+  .greese-Spinner--md {
+    --greese-spinner-size: 1.5rem;
+  }
+  .greese-Spinner--lg {
+    --greese-spinner-size: 2.25rem;
+  }
+  .greese-Spinner--xl {
+    --greese-spinner-size: 3.5rem;
+  }
+  @keyframes greese-spinner-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+  @keyframes greese-spinner-pulse {
+    50% {
+      opacity: 0.4;
+    }
+  }
+}