@greese/ui 0.0.0-stage → 1.1.0

package/dist/css/ColorPicker.css

@@ -0,0 +1,191 @@
+@import './core.css';
+/* stylelint-disable selector-no-vendor-prefix */
+/* stylelint-disable color-no-hex, function-disallowed-list */
+@layer greese.components {
+  .greese-ColorPicker {
+    --greese-colorpicker-thumb: 1.125rem;
+    box-sizing: border-box;
+    display: grid;
+    gap: var(--greese-space-3);
+    inline-size: min(100%, 18rem);
+    color: var(--greese-color-fg);
+  }
+  @media (pointer: coarse) {
+    .greese-ColorPicker {
+      --greese-colorpicker-thumb: 1.5rem;
+    }
+  }
+  .greese-ColorPicker[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  .greese-ColorPicker-area {
+    position: relative;
+    aspect-ratio: 4/3;
+    cursor: crosshair;
+    background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(var(--greese-colorpicker-hue), 100%, 50%);
+    border-radius: var(--greese-corner-panel);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--greese-color-black) 10%, transparent);
+    touch-action: none;
+  }
+  .greese-ColorPicker-area:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  [data-disabled] > .greese-ColorPicker-area {
+    pointer-events: none;
+  }
+  .greese-ColorPicker-thumb {
+    box-sizing: border-box;
+    inline-size: var(--greese-colorpicker-thumb);
+    block-size: var(--greese-colorpicker-thumb);
+    background: transparent;
+    border: 3px solid #fff;
+    border-radius: var(--greese-corner-round);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--greese-color-black) 35%, transparent), var(--greese-shadow-sm);
+    position: absolute;
+    inset-block-start: var(--greese-colorpicker-y);
+    inset-inline-start: var(--greese-colorpicker-x);
+    pointer-events: none;
+    background: var(--greese-colorpicker-color);
+    translate: -50% -50%;
+  }
+  .greese-ColorPicker-thumb:dir(rtl) {
+    translate: 50% -50%;
+  }
+  .greese-ColorPicker-controls {
+    display: flex;
+    gap: var(--greese-space-3);
+    align-items: center;
+  }
+  .greese-ColorPicker-preview {
+    flex: none;
+    inline-size: 2.25rem;
+    block-size: 2.25rem;
+    background: linear-gradient(var(--greese-colorpicker-current), var(--greese-colorpicker-current)), repeating-conic-gradient(#c8ccd2 0% 25%, #fff 0% 50%) 0 0/0.75rem 0.75rem;
+    border-radius: var(--greese-corner-round);
+    box-shadow: inset 0 0 0 1px var(--greese-color-border-strong);
+  }
+  .greese-ColorPicker-sliders {
+    display: grid;
+    flex: 1;
+    gap: var(--greese-space-3);
+    min-inline-size: 0;
+  }
+  .greese-ColorPicker-hue,
+  .greese-ColorPicker-alpha {
+    --greese-colorpicker-track: linear-gradient(
+      to right,
+      #f00,
+      #ff0 17%,
+      #0f0 33%,
+      #0ff 50%,
+      #00f 67%,
+      #f0f 83%,
+      #f00
+    );
+    display: block;
+    inline-size: 100%;
+    block-size: var(--greese-colorpicker-thumb);
+    margin: 0;
+    cursor: pointer;
+    background: none;
+    appearance: none;
+  }
+  .greese-ColorPicker-hue::-webkit-slider-runnable-track,
+  .greese-ColorPicker-alpha::-webkit-slider-runnable-track {
+    block-size: 0.75rem;
+    background: var(--greese-colorpicker-track);
+    border-radius: var(--greese-corner-pill);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--greese-color-black) 10%, transparent);
+  }
+  .greese-ColorPicker-hue::-moz-range-track,
+  .greese-ColorPicker-alpha::-moz-range-track {
+    block-size: 0.75rem;
+    background: var(--greese-colorpicker-track);
+    border-radius: var(--greese-corner-pill);
+  }
+  .greese-ColorPicker-hue::-webkit-slider-thumb,
+  .greese-ColorPicker-alpha::-webkit-slider-thumb {
+    box-sizing: border-box;
+    inline-size: var(--greese-colorpicker-thumb);
+    block-size: var(--greese-colorpicker-thumb);
+    background: transparent;
+    border: 3px solid #fff;
+    border-radius: var(--greese-corner-round);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--greese-color-black) 35%, transparent), var(--greese-shadow-sm);
+    margin-block-start: calc((0.75rem - var(--greese-colorpicker-thumb)) / 2);
+    appearance: none;
+  }
+  .greese-ColorPicker-hue::-moz-range-thumb,
+  .greese-ColorPicker-alpha::-moz-range-thumb {
+    box-sizing: border-box;
+    inline-size: var(--greese-colorpicker-thumb);
+    block-size: var(--greese-colorpicker-thumb);
+    background: transparent;
+    border: 3px solid #fff;
+    border-radius: var(--greese-corner-round);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--greese-color-black) 35%, transparent), var(--greese-shadow-sm);
+  }
+  .greese-ColorPicker-hue:focus-visible,
+  .greese-ColorPicker-alpha:focus-visible {
+    outline: none;
+  }
+  .greese-ColorPicker-hue:focus-visible::-webkit-slider-thumb,
+  .greese-ColorPicker-alpha:focus-visible::-webkit-slider-thumb {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-ColorPicker-hue:focus-visible::-moz-range-thumb,
+  .greese-ColorPicker-alpha:focus-visible::-moz-range-thumb {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-ColorPicker-hue:disabled,
+  .greese-ColorPicker-alpha:disabled {
+    cursor: not-allowed;
+  }
+  .greese-ColorPicker-alpha {
+    --greese-colorpicker-track:
+      linear-gradient(to right, transparent, var(--greese-colorpicker-color)), repeating-conic-gradient(#c8ccd2 0% 25%, #fff 0% 50%) 0 0/0.75rem 0.75rem;
+    direction: ltr;
+  }
+  .greese-ColorPicker-hue {
+    direction: ltr;
+  }
+  .greese-ColorPicker-hex {
+    font-family: var(--greese-font-mono);
+  }
+  .greese-ColorPicker-swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-2);
+  }
+  .greese-ColorPicker-swatch {
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    padding: 0;
+    cursor: pointer;
+    background: linear-gradient(var(--greese-colorpicker-swatch), var(--greese-colorpicker-swatch)), repeating-conic-gradient(#c8ccd2 0% 25%, #fff 0% 50%) 0 0/0.75rem 0.75rem;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+    box-shadow: inset 0 0 0 1px var(--greese-color-border-strong);
+  }
+  @media (pointer: coarse) {
+    .greese-ColorPicker-swatch {
+      inline-size: 2.25rem;
+      block-size: 2.25rem;
+    }
+  }
+  .greese-ColorPicker-swatch[aria-pressed=true] {
+    outline: 2px solid var(--greese-color-fg);
+    outline-offset: 2px;
+  }
+  .greese-ColorPicker-swatch:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-ColorPicker-swatch:disabled {
+    cursor: not-allowed;
+  }
+}

package/dist/css/Combobox.css

@@ -0,0 +1,90 @@
+@import './core.css';
+@layer greese.components {
+  @media (pointer: coarse) {
+    .greese-Combobox-toggle::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-Combobox-toggle {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    padding: 0;
+    margin-inline-end: calc(-1 * var(--greese-space-2));
+    color: var(--greese-color-fg-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+  }
+  .greese-Combobox-toggle > svg {
+    inline-size: 1rem;
+    block-size: 1rem;
+    rotate: -90deg;
+    transition: rotate var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  .greese-Combobox-toggle[data-open] > svg {
+    rotate: 90deg;
+  }
+  .greese-Combobox-popup {
+    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);
+    max-inline-size: min(28rem, 100vw - 2 * var(--greese-space-3));
+    max-block-size: min(18rem, 50dvh);
+    padding: var(--greese-space-1);
+    overscroll-behavior: contain;
+  }
+  .greese-Combobox-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .greese-Combobox-option {
+    display: flex;
+    align-items: center;
+    min-block-size: 2.25rem;
+    padding-inline: var(--greese-space-3);
+    font-size: var(--greese-type-p3-font-size);
+    cursor: pointer;
+    border-radius: var(--greese-corner-inset);
+  }
+  .greese-Combobox-option[data-active] {
+    background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
+  }
+  .greese-Combobox-option[aria-selected=true] {
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-primary);
+  }
+  .greese-Combobox-option[aria-disabled=true] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  @media (pointer: coarse) {
+    .greese-Combobox-option {
+      min-block-size: 2.75rem;
+    }
+  }
+  .greese-Combobox-empty {
+    padding: var(--greese-space-2) var(--greese-space-3);
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+}

package/dist/css/Container.css

@@ -0,0 +1,30 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Container {
+    inline-size: 100%;
+    margin-inline: auto;
+    padding-right: max(var(--greese-space-4), env(safe-area-inset-right));
+    padding-left: max(var(--greese-space-4), env(safe-area-inset-left));
+  }
+  @media (width >= 900px) {
+    .greese-Container {
+      padding-right: max(var(--greese-space-6), env(safe-area-inset-right));
+      padding-left: max(var(--greese-space-6), env(safe-area-inset-left));
+    }
+  }
+  .greese-Container--size-sm {
+    max-inline-size: 600px;
+  }
+  .greese-Container--size-md {
+    max-inline-size: 900px;
+  }
+  .greese-Container--size-lg {
+    max-inline-size: 1200px;
+  }
+  .greese-Container--size-xl {
+    max-inline-size: 1536px;
+  }
+  .greese-Container--size-full {
+    max-inline-size: none;
+  }
+}

package/dist/css/Countdown.css

@@ -0,0 +1,25 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Countdown {
+    display: inline-flex;
+    gap: 0.35em;
+    align-items: baseline;
+    font-variant-numeric: tabular-nums;
+  }
+  .greese-Countdown--clock {
+    gap: 0;
+  }
+  .greese-Countdown-unit {
+    display: inline-flex;
+    align-items: baseline;
+  }
+  .greese-Countdown-separator {
+    padding-inline: 0.1em;
+    opacity: 0.6;
+  }
+  .greese-Countdown-label {
+    margin-inline-start: 0.1em;
+    font-size: 0.7em;
+    color: var(--greese-color-fg-muted);
+  }
+}

package/dist/css/DateField.css

@@ -0,0 +1,15 @@
+@import './core.css';
+/* stylelint-disable selector-no-vendor-prefix */
+@layer greese.components {
+  .greese-DateField .greese-Input-control {
+    min-block-size: 1.5em;
+    text-align: start;
+  }
+  .greese-DateField .greese-Input-control::-webkit-date-and-time-value {
+    text-align: start;
+  }
+  .greese-DateField .greese-Input-control::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 0.7;
+  }
+}