@greese/ui 0.0.0-stage → 1.0.0

package/dist/css/ChatBubble.css

@@ -0,0 +1,128 @@
+@import './core.css';
+@layer greese.components {
+  .greese-ChatBubble--neutral {
+    --greese-chat-tone: var(--greese-color-fg);
+    --greese-chat-tone-on: var(--greese-color-canvas);
+  }
+  .greese-ChatBubble--muted {
+    --greese-chat-tone: var(--greese-color-fg-muted);
+    --greese-chat-tone-on: var(--greese-color-canvas);
+  }
+  .greese-ChatBubble--primary {
+    --greese-chat-tone: var(--greese-color-primary);
+    --greese-chat-tone-on: var(--greese-color-primary-content);
+  }
+  .greese-ChatBubble--secondary {
+    --greese-chat-tone: var(--greese-color-secondary);
+    --greese-chat-tone-on: var(--greese-color-secondary-content);
+  }
+  .greese-ChatBubble--tertiary {
+    --greese-chat-tone: var(--greese-color-tertiary);
+    --greese-chat-tone-on: var(--greese-color-tertiary-content);
+  }
+  .greese-ChatBubble--accent {
+    --greese-chat-tone: var(--greese-color-accent);
+    --greese-chat-tone-on: var(--greese-color-accent-content);
+  }
+  .greese-ChatBubble--positive {
+    --greese-chat-tone: var(--greese-color-positive);
+    --greese-chat-tone-on: var(--greese-color-canvas);
+  }
+  .greese-ChatBubble--negative {
+    --greese-chat-tone: var(--greese-color-negative);
+    --greese-chat-tone-on: var(--greese-color-negative-content);
+  }
+  .greese-ChatBubble--warning {
+    --greese-chat-tone: var(--greese-color-warning);
+    --greese-chat-tone-on: var(--greese-color-canvas);
+  }
+  .greese-ChatBubble--info {
+    --greese-chat-tone: var(--greese-color-info);
+    --greese-chat-tone-on: var(--greese-color-canvas);
+  }
+  .greese-ChatBubble--neutral {
+    --greese-chat-tone: var(--greese-color-surface);
+    --greese-chat-tone-on: var(--greese-color-fg);
+  }
+  .greese-ChatBubble {
+    box-sizing: border-box;
+    --greese-chat-tail: 0.75rem;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: calc(var(--greese-chat-tail) + var(--greese-space-1));
+    justify-items: start;
+  }
+  .greese-ChatBubble:not(:has(> .greese-ChatBubble-avatar)) {
+    padding-inline-start: var(--greese-chat-tail);
+  }
+  .greese-ChatBubble > :not(.greese-ChatBubble-avatar) {
+    grid-column: 2;
+  }
+  .greese-ChatBubble--end {
+    grid-template-columns: minmax(0, 1fr) auto;
+    justify-items: end;
+  }
+  .greese-ChatBubble--end:not(:has(> .greese-ChatBubble-avatar)) {
+    padding-inline: 0 var(--greese-chat-tail);
+  }
+  .greese-ChatBubble--end > :not(.greese-ChatBubble-avatar) {
+    grid-column: 1;
+  }
+  .greese-ChatBubble--end > .greese-ChatBubble-avatar {
+    grid-column: 2;
+  }
+  .greese-ChatBubble-avatar {
+    grid-row: 1/span 3;
+    align-self: end;
+  }
+  .greese-ChatBubble-header {
+    display: flex;
+    gap: var(--greese-space-2);
+    align-items: baseline;
+    margin-block-end: var(--greese-space-1);
+    font-size: var(--greese-type-caption-font-size);
+  }
+  .greese-ChatBubble-author {
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-fg);
+  }
+  .greese-ChatBubble-time,
+  .greese-ChatBubble-footer {
+    font-size: var(--greese-type-caption-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-ChatBubble-footer {
+    margin-block-start: var(--greese-space-1);
+  }
+  .greese-ChatBubble-bubble {
+    position: relative;
+    max-inline-size: min(36rem, 85%);
+    padding: var(--greese-space-2) var(--greese-space-3);
+    overflow-wrap: anywhere;
+    color: var(--greese-chat-tone-on);
+    background-color: var(--greese-chat-tone);
+    border-radius: var(--greese-corner-surface);
+    border-end-start-radius: 0;
+  }
+  .greese-ChatBubble--end .greese-ChatBubble-bubble {
+    border-end-start-radius: var(--greese-corner-surface);
+    border-end-end-radius: 0;
+  }
+  .greese-ChatBubble-bubble::before {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: calc(var(--greese-chat-tail) * -1 + 1px);
+    inline-size: var(--greese-chat-tail);
+    block-size: var(--greese-chat-tail);
+    content: "";
+    background-color: inherit;
+    clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  }
+  .greese-ChatBubble--end .greese-ChatBubble-bubble::before {
+    inset-inline: auto calc(var(--greese-chat-tail) * -1 + 1px);
+    clip-path: polygon(0 0, 100% 100%, 0 100%);
+  }
+  .greese-ChatBubble-bubble:dir(rtl)::before {
+    scale: -1 1;
+  }
+}

package/dist/css/Checkbox.css

@@ -0,0 +1,65 @@
+@import './core.css';
+@layer greese.components {
+  @media (pointer: coarse) {
+    .greese-Checkbox-input::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-Checkbox-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-inset);
+  }
+  .greese-Checkbox-input:disabled {
+    cursor: not-allowed;
+  }
+  .greese-Checkbox-input {
+    appearance: none;
+    transition: background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  .greese-Checkbox-input:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-Checkbox-input:checked, .greese-Checkbox-input:indeterminate {
+    background-color: var(--greese-color-primary);
+    border-color: var(--greese-color-primary);
+  }
+  .greese-Checkbox-input[aria-invalid=true] {
+    border-color: var(--greese-color-negative);
+  }
+  .greese-Checkbox-icon {
+    position: absolute;
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    pointer-events: none;
+    fill: none;
+    stroke: var(--greese-color-primary-content);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2.25;
+    opacity: 0;
+  }
+  .greese-Checkbox-input:checked + .greese-Checkbox-icon,
+  .greese-Checkbox-input:indeterminate + .greese-Checkbox-icon {
+    opacity: 1;
+  }
+  .greese-Checkbox-icon path:last-child,
+  .greese-Checkbox-input:indeterminate + .greese-Checkbox-icon path:first-child {
+    display: none;
+  }
+  .greese-Checkbox-input:indeterminate + .greese-Checkbox-icon path:last-child {
+    display: inline;
+  }
+}

package/dist/css/Chip.css

@@ -0,0 +1,124 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Chip {
+    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);
+    line-height: 1;
+    color: var(--greese-color-fg);
+    white-space: nowrap;
+    background-color: var(--greese-color-surface);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-pill);
+  }
+  .greese-Chip:has(.greese-Chip-toggle) {
+    padding-inline: 0;
+  }
+  .greese-Chip:has(.greese-Chip-remove) {
+    padding-inline-end: var(--greese-space-1);
+  }
+  .greese-Chip--neutral {
+    --greese-chip-tone: var(--greese-color-fg);
+    --greese-chip-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Chip--primary {
+    --greese-chip-tone: var(--greese-color-primary);
+    --greese-chip-tone-on: var(--greese-color-primary-content);
+  }
+  .greese-Chip--secondary {
+    --greese-chip-tone: var(--greese-color-secondary);
+    --greese-chip-tone-on: var(--greese-color-secondary-content);
+  }
+  .greese-Chip--tertiary {
+    --greese-chip-tone: var(--greese-color-tertiary);
+    --greese-chip-tone-on: var(--greese-color-tertiary-content);
+  }
+  .greese-Chip--accent {
+    --greese-chip-tone: var(--greese-color-accent);
+    --greese-chip-tone-on: var(--greese-color-accent-content);
+  }
+  .greese-Chip--positive {
+    --greese-chip-tone: var(--greese-color-positive);
+    --greese-chip-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Chip--negative {
+    --greese-chip-tone: var(--greese-color-negative);
+    --greese-chip-tone-on: var(--greese-color-negative-content);
+  }
+  .greese-Chip--warning {
+    --greese-chip-tone: var(--greese-color-warning);
+    --greese-chip-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Chip--info {
+    --greese-chip-tone: var(--greese-color-info);
+    --greese-chip-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Chip--selected,
+  .greese-Chip--neutral:not(:has(> .greese-Chip-toggle)), .greese-Chip--primary:not(:has(> .greese-Chip-toggle)), .greese-Chip--secondary:not(:has(> .greese-Chip-toggle)), .greese-Chip--tertiary:not(:has(> .greese-Chip-toggle)), .greese-Chip--accent:not(:has(> .greese-Chip-toggle)), .greese-Chip--positive:not(:has(> .greese-Chip-toggle)), .greese-Chip--negative:not(:has(> .greese-Chip-toggle)), .greese-Chip--warning:not(:has(> .greese-Chip-toggle)), .greese-Chip--info:not(:has(> .greese-Chip-toggle)) {
+    color: var(--greese-chip-tone, var(--greese-color-primary));
+    background-color: color-mix(in oklab, var(--greese-chip-tone, var(--greese-color-primary)) 14%, transparent);
+    border-color: color-mix(in oklab, var(--greese-chip-tone, var(--greese-color-primary)) 55%, transparent);
+  }
+  .greese-Chip-icon {
+    display: inline-flex;
+  }
+  .greese-Chip-icon > svg {
+    inline-size: 1.1em;
+    block-size: 1.1em;
+  }
+  @media (pointer: coarse) {
+    .greese-Chip-toggle::after,
+    .greese-Chip-remove::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-Chip-toggle:focus-visible,
+  .greese-Chip-remove:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-Chip-toggle,
+  .greese-Chip-remove {
+    position: relative;
+    display: inline-flex;
+    gap: var(--greese-space-1);
+    align-items: center;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+  }
+  .greese-Chip-toggle {
+    align-self: stretch;
+    padding-inline: var(--greese-space-3);
+    border-radius: var(--greese-corner-pill);
+  }
+  .greese-Chip-remove {
+    justify-content: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    color: var(--greese-color-fg-muted);
+    border-radius: var(--greese-corner-round);
+  }
+  .greese-Chip-remove > svg {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+  }
+  @media (hover: hover) {
+    .greese-Chip-remove:hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
+    }
+  }
+}

package/dist/css/ChoiceGroup.css

@@ -0,0 +1,57 @@
+@import './core.css';
+@layer greese.components {
+  .greese-ChoiceGroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-2);
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+  .greese-ChoiceGroup > legend {
+    float: inline-start;
+    inline-size: 100%;
+    padding: 0;
+    margin-block-end: var(--greese-space-2);
+  }
+  .greese-Checkbox,
+  .greese-Radio,
+  .greese-Switch {
+    box-sizing: border-box;
+    display: inline-flex;
+    gap: var(--greese-space-2);
+    align-items: flex-start;
+    font-size: var(--greese-type-p2-font-size);
+    line-height: var(--greese-line-height-snug);
+    color: var(--greese-color-fg);
+  }
+  .greese-Checkbox[data-disabled],
+  .greese-Radio[data-disabled],
+  .greese-Switch[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  .greese-Checkbox-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-1);
+  }
+  .greese-Checkbox-label {
+    cursor: pointer;
+  }
+  [data-disabled] > .greese-Checkbox-text > .greese-Checkbox-label {
+    cursor: not-allowed;
+  }
+  .greese-Checkbox-description {
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-Checkbox-box {
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    margin-block: calc((1lh - 1.125rem) / 2);
+  }
+}

package/dist/css/Code.css

@@ -0,0 +1,29 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Code {
+    padding: 0.1em 0.35em;
+    font-family: var(--greese-font-mono);
+    font-size: 0.875em;
+    background-color: var(--greese-color-surface);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-inset);
+  }
+  .greese-Code--block {
+    box-sizing: border-box;
+  }
+  .greese-Code--block:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-Code--block {
+    padding: var(--greese-space-4);
+    margin: 0;
+    overflow-x: auto;
+    font-size: var(--greese-type-p3-font-size);
+    line-height: var(--greese-line-height-normal);
+    border-radius: var(--greese-corner-panel);
+  }
+  .greese-Code--block > code {
+    font: inherit;
+  }
+}

package/dist/css/Collapsible.css

@@ -0,0 +1,126 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Collapsible {
+    box-sizing: border-box;
+    interpolate-size: allow-keywords;
+  }
+  .greese-Collapsible::details-content {
+    block-size: 0;
+    overflow: clip;
+    transition: block-size var(--greese-duration-normal) var(--greese-easing-standard), content-visibility var(--greese-duration-normal) allow-discrete;
+  }
+  .greese-Collapsible[open]::details-content {
+    block-size: auto;
+  }
+  .greese-Collapsible-trigger {
+    display: flex;
+    gap: var(--greese-space-3);
+    align-items: center;
+    justify-content: space-between;
+    min-block-size: 2.75rem;
+    padding-block: var(--greese-space-3);
+    font-weight: var(--greese-font-weight-semibold);
+    cursor: pointer;
+    list-style: none;
+    border-radius: var(--greese-corner-inset);
+  }
+  .greese-Collapsible-trigger:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-Collapsible-trigger::-webkit-details-marker {
+    display: none;
+  }
+  .greese-Collapsible-chevron {
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.75;
+  }
+  .greese-Collapsible-icon {
+    --greese-collapsible-icon-turn: 180deg;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    inline-size: 1.25em;
+    block-size: 1.25em;
+  }
+  .greese-Collapsible-icon > * {
+    display: inline-grid;
+    grid-area: 1/1;
+    place-items: center;
+  }
+  .greese-Collapsible-icon > * > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Collapsible-icon {
+      transition: rotate var(--greese-duration-normal) var(--greese-easing-standard);
+    }
+    .greese-Collapsible-icon > * {
+      transition: opacity var(--greese-duration-normal) var(--greese-easing-standard), rotate var(--greese-duration-normal) var(--greese-easing-standard), scale var(--greese-duration-normal) var(--greese-easing-standard);
+    }
+  }
+  .greese-Collapsible-openIcon {
+    opacity: 0;
+  }
+  [open] > .greese-Collapsible-trigger > .greese-Collapsible-icon.greese-Collapsible-icon--rotate {
+    rotate: var(--greese-collapsible-icon-turn);
+  }
+  [open] > .greese-Collapsible-trigger > .greese-Collapsible-icon > .greese-Collapsible-closedIcon:has(+ .greese-Collapsible-openIcon) {
+    opacity: 0;
+  }
+  [open] > .greese-Collapsible-trigger > .greese-Collapsible-icon > .greese-Collapsible-openIcon {
+    opacity: 1;
+  }
+  .greese-Collapsible-icon--fade > .greese-Collapsible-openIcon {
+    rotate: -90deg;
+    scale: 0.6;
+  }
+  [open] > .greese-Collapsible-trigger > .greese-Collapsible-icon--fade > .greese-Collapsible-closedIcon {
+    rotate: 90deg;
+    scale: 0.6;
+  }
+  [open] > .greese-Collapsible-trigger > .greese-Collapsible-icon--fade > .greese-Collapsible-openIcon {
+    rotate: 0deg;
+    scale: 1;
+  }
+  .greese-Collapsible-icon--none > * {
+    transition: none;
+  }
+  .greese-Collapsible-content {
+    padding-block-end: var(--greese-space-4);
+    color: var(--greese-color-fg-muted);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    [open] > .greese-Collapsible-content:not(.greese-Motion) > * {
+      animation-name: var(--greese-motion-content, greese-content-in);
+      animation-duration: var(--greese-motion-content-duration, var(--greese-duration-normal));
+      animation-timing-function: var(--greese-motion-enter-ease, var(--greese-easing-enter));
+      animation-fill-mode: backwards;
+    }
+  }
+  [open] > .greese-Collapsible-content:not(.greese-Motion) > *:nth-child(2) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 1);
+  }
+  [open] > .greese-Collapsible-content:not(.greese-Motion) > *:nth-child(3) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 2);
+  }
+  [open] > .greese-Collapsible-content:not(.greese-Motion) > *:nth-child(4) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 3);
+  }
+  [open] > .greese-Collapsible-content:not(.greese-Motion) > *:nth-child(5) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 4);
+  }
+  [open] > .greese-Collapsible-content:not(.greese-Motion) > *:nth-child(6) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 5);
+  }
+  @keyframes greese-content-in {
+    from {
+      opacity: 0;
+      translate: 0 0.25rem;
+    }
+  }
+}