@greese/ui 1.1.0 → 1.2.0

package/dist/clipboard.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copying text, safely. The async Clipboard API is missing on insecure
+ * origins and in some WebViews, and a browser can refuse it (permissions, a
+ * page without focus), so a copy falls back to selecting a hidden textarea
+ * and `document.execCommand('copy')`. Only when both fail does it reject.
+ *
+ * Framework-free; `useCopyToClipboard()` and `CopyToClipboard` in
+ * @greese/react are the React side.
+ */
+/**
+ * Copies `text` to the clipboard. Resolves once it's there; rejects when the
+ * browser allows neither the Clipboard API nor the fallback.
+ *
+ * ```ts
+ * await copyToClipboard("import { CopyIcon } from '@greese/icons'")
+ * ```
+ */
+export declare const copyToClipboard: (text: string) => Promise<void>;

package/dist/clipboard.js

@@ -0,0 +1,62 @@
+/**
+ * Copying text, safely. The async Clipboard API is missing on insecure
+ * origins and in some WebViews, and a browser can refuse it (permissions, a
+ * page without focus), so a copy falls back to selecting a hidden textarea
+ * and `document.execCommand('copy')`. Only when both fail does it reject.
+ *
+ * Framework-free; `useCopyToClipboard()` and `CopyToClipboard` in
+ * @greese/react are the React side.
+ */
+/**
+ * The old way: copy the selection of a textarea that's on the page for one
+ * moment. Puts focus and the reader's selection back afterwards.
+ */
+const copyBySelection = (text) => {
+    if (typeof document == 'undefined')
+        return false;
+    const focused = document.activeElement;
+    const selection = document.getSelection();
+    const ranges = selection
+        ? Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i))
+        : [];
+    const area = document.createElement('textarea');
+    area.value = text;
+    // Read-only so phones don't open a keyboard; fixed and transparent so the
+    // page neither scrolls to it nor shows it.
+    area.readOnly = true;
+    area.style.cssText = 'position:fixed;inset:0;opacity:0;pointer-events:none';
+    document.body.append(area);
+    area.select();
+    let copied = false;
+    try {
+        copied = document.execCommand('copy');
+    }
+    catch {
+        // Refused: report it below.
+    }
+    area.remove();
+    focused?.focus({ preventScroll: true });
+    if (selection && ranges.length) {
+        selection.removeAllRanges();
+        for (const range of ranges)
+            selection.addRange(range);
+    }
+    return copied;
+};
+/**
+ * Copies `text` to the clipboard. Resolves once it's there; rejects when the
+ * browser allows neither the Clipboard API nor the fallback.
+ *
+ * ```ts
+ * await copyToClipboard("import { CopyIcon } from '@greese/icons'")
+ * ```
+ */
+export const copyToClipboard = async (text) => {
+    try {
+        await navigator.clipboard.writeText(text);
+    }
+    catch (error) {
+        if (!copyBySelection(text))
+            throw error;
+    }
+};

package/dist/css/Button.css

@@ -159,8 +159,8 @@
     );
   }
   .greese-Button--size-xs {
-    --greese-button-height: 1rem;
-    --greese-button-padding: var(--greese-space-1);
+    --greese-button-height: 1.5rem;
+    --greese-button-padding: var(--greese-space-2);
     font-size: var(--greese-type-p3-font-size);
   }
   .greese-Button--size-sm {

package/dist/css/Carousel.css

@@ -2,41 +2,161 @@
 @layer greese.components {
   .greese-Carousel {
     box-sizing: border-box;
+    --greese-carousel-way: 1;
+    --greese-carousel-enter: var(--greese-motion-carousel, greese-carousel-in);
+    --greese-carousel-duration: var(
+      --greese-motion-carousel-duration,
+      var(--greese-duration-normal)
+    );
+    --greese-carousel-exit-opacity: var(
+      --greese-motion-carousel-exit-opacity,
+      1
+    );
+    --greese-carousel-exit-translate: var(
+      --greese-motion-carousel-exit-translate,
+      calc(-100% * var(--greese-carousel-way)) 0
+    );
+    --greese-carousel-exit-scale: var(
+      --greese-motion-carousel-exit-scale,
+      1
+    );
+    --greese-carousel-exit-mask-image: var(
+      --greese-motion-carousel-exit-mask-image,
+      none
+    );
+    --greese-carousel-exit-mask-repeat: var(
+      --greese-motion-carousel-exit-mask-repeat,
+      no-repeat
+    );
+    --greese-carousel-exit-mask-position: var(
+      --greese-motion-carousel-exit-mask-position,
+      50% 50%
+    );
+    --greese-carousel-exit-mask-size: var(
+      --greese-motion-carousel-exit-mask-size,
+      100% 100%
+    );
+    --greese-carousel-exit-mask-from: var(
+      --greese-motion-carousel-exit-mask-from,
+      100% 100%
+    );
+    --greese-carousel-exit-transform: var(
+      --greese-motion-carousel-exit-transform,
+      none
+    );
+    --greese-carousel-exit-transform-origin: var(
+      --greese-motion-carousel-exit-transform-origin,
+      50% 50%
+    );
     position: relative;
     display: grid;
     gap: var(--greese-space-3);
     min-inline-size: 0;
   }
+  .greese-Carousel[data-direction=back] {
+    --greese-carousel-way: -1;
+    --greese-carousel-enter: var(
+      --greese-motion-carousel-back,
+      var(--greese-motion-carousel, greese-carousel-in)
+    );
+    --greese-carousel-exit-opacity: var(
+      --greese-motion-carousel-back-exit-opacity,
+      var(--greese-motion-carousel-exit-opacity, 1)
+    );
+    --greese-carousel-exit-translate: var(
+      --greese-motion-carousel-back-exit-translate,
+      var(--greese-motion-carousel-exit-translate, calc(-100% * var(--greese-carousel-way)) 0)
+    );
+    --greese-carousel-exit-scale: var(
+      --greese-motion-carousel-back-exit-scale,
+      var(--greese-motion-carousel-exit-scale, 1)
+    );
+    --greese-carousel-exit-mask-image: var(
+      --greese-motion-carousel-back-exit-mask-image,
+      var(--greese-motion-carousel-exit-mask-image, none)
+    );
+    --greese-carousel-exit-mask-repeat: var(
+      --greese-motion-carousel-back-exit-mask-repeat,
+      var(--greese-motion-carousel-exit-mask-repeat, no-repeat)
+    );
+    --greese-carousel-exit-mask-position: var(
+      --greese-motion-carousel-back-exit-mask-position,
+      var(--greese-motion-carousel-exit-mask-position, 50% 50%)
+    );
+    --greese-carousel-exit-mask-size: var(
+      --greese-motion-carousel-back-exit-mask-size,
+      var(--greese-motion-carousel-exit-mask-size, 100% 100%)
+    );
+    --greese-carousel-exit-mask-from: var(
+      --greese-motion-carousel-back-exit-mask-from,
+      var(--greese-motion-carousel-exit-mask-from, 100% 100%)
+    );
+    --greese-carousel-exit-transform: var(
+      --greese-motion-carousel-back-exit-transform,
+      var(--greese-motion-carousel-exit-transform, none)
+    );
+    --greese-carousel-exit-transform-origin: var(
+      --greese-motion-carousel-back-exit-transform-origin,
+      var(--greese-motion-carousel-exit-transform-origin, 50% 50%)
+    );
+  }
+  .greese-Carousel:dir(rtl) {
+    --greese-carousel-way: -1;
+  }
+  .greese-Carousel[data-direction=back]:dir(rtl) {
+    --greese-carousel-way: 1;
+  }
   .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;
+    --greese-motion-exit-opacity: initial;
+    --greese-motion-exit-translate: initial;
+    --greese-motion-exit-scale: initial;
+    --greese-motion-exit-mask-image: initial;
+    --greese-motion-exit-mask-repeat: initial;
+    --greese-motion-exit-mask-position: initial;
+    --greese-motion-exit-mask-size: initial;
+    --greese-motion-exit-mask-from: initial;
+    --greese-motion-exit-transform: initial;
+    --greese-motion-exit-transform-origin: initial;
+    --greese-carousel-slide-enter: initial;
+    display: grid;
+    min-inline-size: 0;
+    overflow: clip;
     border-radius: var(--greese-corner-panel);
-  }
-  .greese-Carousel-viewport::-webkit-scrollbar {
-    display: none;
+    touch-action: pan-y;
   }
   .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));
+    grid-area: 1/1;
     min-inline-size: 0;
-    scroll-snap-align: start;
+    mask-image: var(--greese-motion-exit-mask-image, var(--greese-carousel-exit-mask-image));
+    mask-repeat: var(--greese-motion-exit-mask-repeat, var(--greese-carousel-exit-mask-repeat));
+    mask-position: var(--greese-motion-exit-mask-position, var(--greese-carousel-exit-mask-position));
+    mask-size: var(--greese-motion-exit-mask-from, var(--greese-carousel-exit-mask-from));
+    transform-origin: var(--greese-motion-exit-transform-origin, var(--greese-carousel-exit-transform-origin));
+  }
+  .greese-CarouselSlide:not([data-active]) {
+    visibility: hidden;
+    opacity: var(--greese-motion-exit-opacity, var(--greese-carousel-exit-opacity));
+    translate: var(--greese-motion-exit-translate, var(--greese-carousel-exit-translate));
+    scale: var(--greese-motion-exit-scale, var(--greese-carousel-exit-scale));
+    transform: var(--greese-motion-exit-transform, var(--greese-carousel-exit-transform));
+    mask-size: var(--greese-motion-exit-mask-size, var(--greese-carousel-exit-mask-size));
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Carousel[data-moved] > .greese-Carousel-viewport > .greese-CarouselSlide[data-active] {
+      animation-name: var(--greese-carousel-slide-enter, var(--greese-carousel-enter));
+      animation-duration: var(--greese-carousel-duration);
+      animation-timing-function: var(--greese-easing-standard);
+      animation-fill-mode: backwards;
+    }
+    .greese-Carousel[data-moved] > .greese-Carousel-viewport > .greese-CarouselSlide:not([data-active]) {
+      transition-property: visibility, opacity, translate, scale, transform, mask-size, mask-position;
+      transition-duration: var(--greese-carousel-duration);
+      transition-timing-function: var(--greese-easing-standard);
+    }
   }
   .greese-Carousel-control {
     position: absolute;
@@ -71,6 +191,7 @@
     }
   }
   .greese-Carousel-control:disabled {
+    pointer-events: none;
     cursor: default;
     opacity: 0;
   }
@@ -96,11 +217,6 @@
   .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;
@@ -144,27 +260,9 @@
     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);
+  @keyframes greese-carousel-in {
+    from {
+      translate: calc(100% * var(--greese-carousel-way)) 0;
     }
   }
 }

package/dist/css/Checkbox.css

@@ -13,8 +13,8 @@
   }
   .greese-Checkbox-input {
     position: relative;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
+    inline-size: var(--greese-choice-box, 1.125rem);
+    block-size: var(--greese-choice-box, 1.125rem);
     margin: 0;
     cursor: pointer;
     background-color: var(--greese-color-canvas);

package/dist/css/Chip.css

@@ -4,9 +4,9 @@
     display: inline-flex;
     gap: var(--greese-space-1);
     align-items: center;
-    min-block-size: 2rem;
-    padding-inline: var(--greese-space-3);
-    font-size: var(--greese-type-p3-font-size);
+    min-block-size: var(--greese-chip-height);
+    padding-inline: var(--greese-chip-padding);
+    font-size: var(--greese-chip-font);
     line-height: 1;
     color: var(--greese-color-fg);
     white-space: nowrap;
@@ -20,6 +20,36 @@
   .greese-Chip:has(.greese-Chip-remove) {
     padding-inline-end: var(--greese-space-1);
   }
+  .greese-Chip--size-xs {
+    --greese-chip-height: 1.25rem;
+    --greese-chip-padding: var(--greese-space-1);
+    --greese-chip-font: var(--greese-type-caption-font-size);
+    --greese-chip-remove: 1rem;
+  }
+  .greese-Chip--size-sm {
+    --greese-chip-height: 1.625rem;
+    --greese-chip-padding: var(--greese-space-2);
+    --greese-chip-font: var(--greese-type-caption-font-size);
+    --greese-chip-remove: 1.25rem;
+  }
+  .greese-Chip--size-md {
+    --greese-chip-height: 2rem;
+    --greese-chip-padding: var(--greese-space-3);
+    --greese-chip-font: var(--greese-type-p3-font-size);
+    --greese-chip-remove: 1.5rem;
+  }
+  .greese-Chip--size-lg {
+    --greese-chip-height: 2.5rem;
+    --greese-chip-padding: var(--greese-space-4);
+    --greese-chip-font: var(--greese-type-p2-font-size);
+    --greese-chip-remove: 1.75rem;
+  }
+  .greese-Chip--size-xl {
+    --greese-chip-height: 3rem;
+    --greese-chip-padding: var(--greese-space-5);
+    --greese-chip-font: var(--greese-type-p1-font-size);
+    --greese-chip-remove: 2rem;
+  }
   .greese-Chip--neutral {
     --greese-chip-tone: var(--greese-color-fg);
     --greese-chip-tone-on: var(--greese-color-canvas);
@@ -101,19 +131,19 @@
   }
   .greese-Chip-toggle {
     align-self: stretch;
-    padding-inline: var(--greese-space-3);
+    padding-inline: var(--greese-chip-padding);
     border-radius: var(--greese-corner-pill);
   }
   .greese-Chip-remove {
     justify-content: center;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--greese-chip-remove);
+    block-size: var(--greese-chip-remove);
     color: var(--greese-color-fg-muted);
     border-radius: var(--greese-corner-round);
   }
   .greese-Chip-remove > svg {
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
+    inline-size: 0.6em;
+    block-size: 0.6em;
   }
   @media (hover: hover) {
     .greese-Chip-remove:hover {

package/dist/css/ChoiceGroup.css

@@ -32,19 +32,60 @@
     cursor: not-allowed;
     opacity: 0.55;
   }
+  .greese-Checkbox--size-xs,
+  .greese-Radio--size-xs,
+  .greese-Switch--size-xs,
+  .greese-ChoiceGroup--size-xs {
+    --greese-choice-font: var(--greese-type-p3-font-size);
+    --greese-choice-gap: var(--greese-space-2);
+    --greese-choice-box: calc(1.5rem * 0.45);
+  }
+  .greese-Checkbox--size-sm,
+  .greese-Radio--size-sm,
+  .greese-Switch--size-sm,
+  .greese-ChoiceGroup--size-sm {
+    --greese-choice-font: var(--greese-type-p3-font-size);
+    --greese-choice-gap: var(--greese-space-3);
+    --greese-choice-box: calc(2rem * 0.45);
+  }
+  .greese-Checkbox--size-md,
+  .greese-Radio--size-md,
+  .greese-Switch--size-md,
+  .greese-ChoiceGroup--size-md {
+    --greese-choice-font: var(--greese-type-p2-font-size);
+    --greese-choice-gap: var(--greese-space-3);
+    --greese-choice-box: calc(2.5rem * 0.45);
+  }
+  .greese-Checkbox--size-lg,
+  .greese-Radio--size-lg,
+  .greese-Switch--size-lg,
+  .greese-ChoiceGroup--size-lg {
+    --greese-choice-font: var(--greese-type-p2-font-size);
+    --greese-choice-gap: var(--greese-space-4);
+    --greese-choice-box: calc(3rem * 0.45);
+  }
+  .greese-Checkbox--size-xl,
+  .greese-Radio--size-xl,
+  .greese-Switch--size-xl,
+  .greese-ChoiceGroup--size-xl {
+    --greese-choice-font: var(--greese-type-p1-font-size);
+    --greese-choice-gap: var(--greese-space-4);
+    --greese-choice-box: calc(4rem * 0.45);
+  }
   .greese-Checkbox-text {
     display: flex;
     flex-direction: column;
     gap: var(--greese-space-1);
   }
   .greese-Checkbox-label {
+    font-size: var(--greese-choice-font, inherit);
     cursor: pointer;
   }
   [data-disabled] > .greese-Checkbox-text > .greese-Checkbox-label {
     cursor: not-allowed;
   }
   .greese-Checkbox-description {
-    font-size: var(--greese-type-p3-font-size);
+    font-size: var(--greese-choice-description-font, var(--greese-type-p3-font-size));
     color: var(--greese-color-fg-muted);
   }
   .greese-Checkbox-box {

package/dist/css/Collapsible.css

@@ -91,6 +91,7 @@
     transition: none;
   }
   .greese-Collapsible-content {
+    display: flow-root;
     padding-block-end: var(--greese-space-4);
     color: var(--greese-color-fg-muted);
   }

package/dist/css/ColorPicker.css

@@ -2,6 +2,26 @@
 /* stylelint-disable selector-no-vendor-prefix */
 /* stylelint-disable color-no-hex, function-disallowed-list */
 @layer greese.components {
+  .greese-ColorPicker--size-xs {
+    --greese-colorpicker-font: var(--greese-type-p3-font-size);
+    --greese-colorpicker-padding: var(--greese-space-2);
+  }
+  .greese-ColorPicker--size-sm {
+    --greese-colorpicker-font: var(--greese-type-p3-font-size);
+    --greese-colorpicker-padding: var(--greese-space-3);
+  }
+  .greese-ColorPicker--size-md {
+    --greese-colorpicker-font: var(--greese-type-p2-font-size);
+    --greese-colorpicker-padding: var(--greese-space-3);
+  }
+  .greese-ColorPicker--size-lg {
+    --greese-colorpicker-font: var(--greese-type-p2-font-size);
+    --greese-colorpicker-padding: var(--greese-space-4);
+  }
+  .greese-ColorPicker--size-xl {
+    --greese-colorpicker-font: var(--greese-type-p1-font-size);
+    --greese-colorpicker-padding: var(--greese-space-4);
+  }
   .greese-ColorPicker {
     --greese-colorpicker-thumb: 1.125rem;
     box-sizing: border-box;
@@ -153,8 +173,72 @@
   .greese-ColorPicker-hue {
     direction: ltr;
   }
+  .greese-ColorPicker-fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-2);
+    align-items: center;
+  }
   .greese-ColorPicker-hex {
+    flex: 1 1 7rem;
+    min-inline-size: 0;
+    font-family: var(--greese-font-mono);
+  }
+  .greese-ColorPicker-channels {
+    display: flex;
+    flex: 1 0 100%;
+    gap: var(--greese-space-2);
+    min-inline-size: 0;
+  }
+  .greese-ColorPicker-channel {
+    flex: 1;
+    min-inline-size: 0;
+    padding-inline: var(--greese-space-1);
+  }
+  .greese-ColorPicker-channel .greese-Input-control {
     font-family: var(--greese-font-mono);
+    text-align: end;
+    appearance: textfield;
+  }
+  .greese-ColorPicker-channel .greese-Input-control::-webkit-outer-spin-button, .greese-ColorPicker-channel .greese-Input-control::-webkit-inner-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+  .greese-ColorPicker-channel .greese-Input-adornment {
+    font-family: var(--greese-font-mono);
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-ColorPicker-tool {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    padding: 0;
+    color: var(--greese-color-fg-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+  }
+  @media (pointer: coarse) {
+    .greese-ColorPicker-tool {
+      inline-size: 2.25rem;
+      block-size: 2.25rem;
+    }
+  }
+  .greese-ColorPicker-tool:hover:not(:disabled) {
+    color: var(--greese-color-fg);
+    background: var(--greese-color-track);
+  }
+  .greese-ColorPicker-tool:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-ColorPicker-tool:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
   }
   .greese-ColorPicker-swatches {
     display: flex;

package/dist/css/Combobox.css

@@ -15,8 +15,8 @@
     position: relative;
     display: inline-grid;
     place-items: center;
-    inline-size: 1.75rem;
-    block-size: 1.75rem;
+    inline-size: min(1.75rem, var(--greese-input-height, 1.75rem) - 2px);
+    block-size: min(1.75rem, var(--greese-input-height, 1.75rem) - 2px);
     padding: 0;
     margin-inline-end: calc(-1 * var(--greese-space-2));
     color: var(--greese-color-fg-muted);