@surflane/ui 0.4.0 → 0.6.0

package/dist/css/rules/date-picker.css

@@ -0,0 +1,301 @@
+/* Date / time picker, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Date and time share the same field feedback and nested surface hierarchy. */
+  .pui-date-picker,
+  .pui-time-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-width: 0;
+    max-width: 100%;
+  }
+  .pui-date-group {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: var(--control-height);
+    gap: var(--space-2);
+    padding-inline: var(--control-padding-x) var(--space-1);
+    border: 1px solid var(--control-border);
+    border-radius: var(--control-radius);
+    background: var(--control-background);
+    color: var(--ink);
+    outline: none;
+    transition:
+      background-color var(--duration-fast) var(--ease-out),
+      border-color var(--duration-fast) var(--ease-out),
+      box-shadow var(--duration-fast) var(--ease-out);
+  }
+  :is(.pui-date-picker, .pui-time-field):not([data-disabled], [data-readonly])
+    .pui-date-group:hover:not([data-focus-within], :focus-within) {
+    background: var(--control-hover-background);
+    border-color: var(--control-hover-border);
+  }
+  .pui-date-group[data-focus-within],
+  .pui-date-group:focus-within {
+    background: var(--control-focus-background);
+    border-color: var(--control-focus);
+    box-shadow: 0 0 0 var(--control-focus-ring-size) var(--control-focus-ring);
+  }
+  :is(.pui-date-picker, .pui-time-field)[data-invalid] .pui-date-group {
+    border-color: var(--status-danger-fg);
+  }
+  :is(.pui-date-picker, .pui-time-field)[data-disabled] {
+    opacity: var(--control-disabled-opacity);
+  }
+  :is(.pui-date-picker, .pui-time-field)[data-disabled] .pui-date-group {
+    cursor: not-allowed;
+    background: var(--control-disabled-background);
+  }
+  .pui-date-input {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    padding-block: var(--space-1);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    white-space: nowrap;
+  }
+  .pui-date-segment {
+    font-variant-numeric: tabular-nums;
+    border-radius: var(--space-1);
+    padding: 1px;
+    outline: none;
+  }
+  .pui-date-segment[data-type='literal'] {
+    padding: 0;
+    white-space: pre;
+  }
+  .pui-date-segment[data-placeholder] {
+    color: var(--control-placeholder);
+  }
+  .pui-date-segment[data-focused] {
+    background: var(--selected);
+    color: var(--ink);
+    outline: 1px solid var(--control-focus);
+  }
+  .pui-date-range-inputs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-1) var(--space-2);
+    min-width: 0;
+    flex: 1;
+  }
+  .pui-date-range-inputs .pui-date-input {
+    flex: 0 1 auto;
+  }
+  .pui-date-range-separator {
+    color: var(--ink-muted);
+  }
+  .pui-date-trigger,
+  .pui-calendar-nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-full);
+    background: transparent;
+    color: var(--ink);
+    cursor: pointer;
+    outline: none;
+    transition: background-color var(--duration-fast) var(--ease-out);
+  }
+  :is(.pui-date-trigger, .pui-calendar-nav)[data-hovered]:not([data-disabled]) {
+    background: var(--selected);
+  }
+  :is(.pui-date-trigger, .pui-calendar-nav)[data-focus-visible] {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
+  }
+  :is(.pui-date-trigger, .pui-calendar-nav)[data-disabled] {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .pui-date-popover {
+    box-sizing: border-box;
+    max-width: calc(100vw - var(--space-4));
+    max-height: var(--available-height);
+    overflow: auto;
+    overscroll-behavior: contain;
+    padding: var(--space-2);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--canvas);
+    color: var(--ink);
+    box-shadow: var(--shadow-float);
+    z-index: var(--layer-popup);
+  }
+  .pui-date-dialog {
+    outline: none;
+  }
+  .pui-calendar {
+    width: 280px;
+    max-width: 100%;
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+  }
+  .pui-calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-1);
+    margin-bottom: var(--space-2);
+  }
+  .pui-calendar-heading {
+    margin: 0;
+    font: var(--weight-medium) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    text-align: center;
+  }
+  .pui-calendar-grid {
+    min-width: 0;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 2px;
+    table-layout: fixed;
+  }
+  .pui-calendar-weekday {
+    color: var(--ink-muted);
+    font-weight: var(--weight-regular);
+    font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    letter-spacing: var(--type-caption-tracking);
+    text-align: center;
+  }
+  .pui-calendar-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 36px;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    outline: none;
+    font-variant-numeric: tabular-nums;
+  }
+  .pui-calendar-day[data-hovered]:not(
+      [data-disabled],
+      [data-unavailable],
+      [data-selected]
+    ) {
+    background: var(--selected);
+  }
+  .pui-calendar-day[data-selected] {
+    background: var(--selected);
+    color: var(--ink);
+  }
+  .pui-calendar-day:is([data-selection-start], [data-selection-end]) {
+    background: var(--brand);
+    color: var(--on-brand);
+  }
+  .pui-calendar-day[data-focus-visible] {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
+  }
+  .pui-calendar-day[data-today] {
+    border-color: var(--control-border);
+  }
+  .pui-calendar-day[data-outside-month] {
+    visibility: hidden;
+  }
+  .pui-calendar-day:is([data-disabled], [data-unavailable]) {
+    color: var(--ink-muted);
+    text-decoration: line-through;
+    cursor: not-allowed;
+    opacity: var(--control-disabled-opacity);
+  }
+  @media (max-width: 760px), (pointer: coarse) {
+    .pui-date-trigger,
+    .pui-calendar-nav {
+      width: 40px;
+      height: 40px;
+      min-width: 40px;
+    }
+    .pui-calendar-day {
+      min-height: 40px;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-date-group,
+    .pui-date-trigger,
+    .pui-calendar-nav {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-date-group,
+    .pui-date-popover {
+      border-color: CanvasText;
+    }
+    .pui-date-group[data-focus-within],
+    .pui-date-group:focus-within {
+      outline: 2px solid Highlight;
+    }
+    .pui-calendar-day[data-selected] {
+      background: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .pui-calendar-day[data-focus-visible],
+    .pui-date-segment[data-focused] {
+      outline-color: Highlight;
+    }
+  }
+  .pui-calendar-grid :is(th, td) {
+    padding: 0;
+    border: 0;
+    min-width: 0;
+    text-align: center;
+  }
+  .pui-calendar-day[data-focus-visible][data-selected] {
+    outline-color: var(--ink);
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *):is(
+    .pui-date-input,
+    .pui-date-segment
+  ) {
+    font-size: var(--ui-font);
+    line-height: var(--ui-leading);
+  }
+  :where([data-ui-size], [data-ui-size] *):is(.pui-date-trigger) > svg {
+    inline-size: var(--ui-icon);
+    block-size: var(--ui-icon);
+  }
+  :where([data-ui-size], [data-ui-size] *).pui-date-popover {
+    padding: var(--ui-surface-padding);
+  }
+  :where([data-ui-size], [data-ui-size] *).pui-calendar-day {
+    min-block-size: var(--ui-row);
+  }
+  :where([data-ui-size], [data-ui-size] *):is(
+    .pui-date-trigger,
+    .pui-calendar-nav
+  ) {
+    inline-size: calc(var(--control-height) - 4px);
+    block-size: calc(var(--control-height) - 4px);
+    min-inline-size: 0;
+  }
+  @media (max-width: 760px), (pointer: coarse) {
+    :where([data-ui-size], [data-ui-size] *):is(
+      .pui-date-trigger,
+      .pui-calendar-nav
+    ) {
+      inline-size: var(--control-target-size);
+      block-size: var(--control-target-size);
+    }
+  }
+}

package/dist/css/rules/dialog.css

@@ -0,0 +1,160 @@
+/* Dialog, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Dialog: acknowledge arrival; dismissal has no visual wait. */
+  .pui-dialog-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--layer-backdrop);
+    background: color-mix(in srgb, var(--chrome), transparent 25%);
+    backdrop-filter: blur(3px);
+    opacity: 1;
+    transition: opacity var(--dialog-enter-duration) var(--motion-ease);
+  }
+  .pui-dialog-popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: var(--layer-dialog);
+    margin: 0;
+    outline: none;
+    opacity: 1;
+    translate: 0 0;
+    transition:
+      opacity var(--dialog-enter-duration) var(--motion-ease),
+      translate var(--dialog-enter-duration) var(--motion-spatial-ease);
+  }
+  .pui-dialog-popup[data-starting-style] {
+    opacity: 0;
+    translate: 0 var(--dialog-enter-offset);
+  }
+  .pui-dialog-backdrop[data-starting-style] {
+    opacity: 0;
+  }
+  .pui-dialog-popup[data-ending-style],
+  .pui-dialog-backdrop[data-ending-style] {
+    transition: none;
+    transition-duration: var(--dialog-exit-duration);
+    opacity: 0;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-dialog-popup,
+    .pui-dialog-backdrop {
+      transition: none;
+    }
+    .pui-dialog-popup {
+      translate: none;
+    }
+  }
+  .pui-dialog-close {
+    position: absolute;
+    inset-block-start: var(--space-4);
+    inset-inline-end: var(--space-4);
+    z-index: 1;
+  }
+  /* Structural chrome never reserves scrollbar space; scrolling belongs to Body. */
+  .pui-dialog-content {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    --dialog-width: var(--size-dialog-default);
+    width: min(var(--dialog-width), calc(100% - var(--space-4) * 2));
+    max-height: calc(100dvh - 32px);
+    overflow: hidden;
+    scrollbar-gutter: auto;
+    padding: 0;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sheet);
+    background: var(--canvas);
+    color: var(--ink);
+    box-shadow: var(--shadow-float);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
+  }
+  .pui-dialog-header,
+  .pui-dialog-body,
+  .pui-dialog-footer {
+    box-sizing: border-box;
+    min-width: 0;
+  }
+  .pui-dialog-header,
+  .pui-dialog-footer {
+    flex: none;
+    align-self: stretch;
+  }
+  .pui-dialog-header {
+    padding-block: var(--space-6) var(--space-5);
+    padding-inline: var(--space-6)
+      calc(var(--control-height) + var(--space-4) * 2);
+    border-bottom: 1px solid var(--line);
+  }
+  .pui-dialog-header h2 {
+    margin: 0;
+    font: var(--weight-medium)
+      var(--type-section-size)/var(--type-section-leading) var(--font-display);
+    letter-spacing: var(--type-section-tracking);
+  }
+  .pui-dialog-header p {
+    margin: var(--space-2) 0 0;
+    color: var(--ink-body);
+  }
+  .pui-dialog-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--space-6);
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  }
+  .pui-dialog-body::-webkit-scrollbar {
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+  }
+  .pui-dialog-body::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: var(--scrollbar-radius);
+  }
+  .pui-dialog-body::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+  }
+  .pui-dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    padding: var(--space-5) var(--space-6);
+    border-top: 1px solid var(--line);
+  }
+  .pui-dialog-close:disabled {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .pui-dialog-content[data-size='small'] {
+    --dialog-width: var(--size-dialog-small);
+  }
+  .pui-dialog-content[data-size='default'] {
+    --dialog-width: var(--size-dialog-default);
+  }
+  .pui-dialog-content[data-size='large'] {
+    --dialog-width: var(--size-dialog-large);
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-dialog-body {
+    padding: var(--ui-card-padding);
+  }
+  :where([data-ui-size], [data-ui-size] *):is(
+    .pui-dialog-header,
+    .pui-dialog-footer
+  ) {
+    padding-inline: var(--ui-card-padding);
+  }
+  :where([data-ui-size], [data-ui-size] *).pui-dialog-header {
+    padding-inline-end: calc(var(--control-height) + var(--space-4) * 2);
+  }
+}

package/dist/css/rules/disclosure.css

@@ -0,0 +1,107 @@
+/* Shared by Accordion and Collapsible. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-accordion-item,
+  .pui-collapsible {
+    border-radius: var(--radius-md);
+    min-width: 0;
+  }
+  .pui-accordion-item[data-open],
+  .pui-collapsible[data-open] {
+    background: var(--surface);
+  }
+  .pui-disclosure-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    width: 100%;
+    min-height: var(--control-height);
+    padding: var(--space-3) var(--space-4);
+    border: 0;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--ink);
+    font: var(--weight-medium) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    text-align: start;
+    cursor: pointer;
+    outline: none;
+  }
+  .pui-disclosure-label {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .pui-disclosure-trigger:hover:not(:disabled) {
+    background: var(--interaction-hover-bg);
+  }
+  .pui-disclosure-trigger:active:not(:disabled) {
+    background: var(--interaction-active-bg);
+  }
+  .pui-disclosure-trigger:focus-visible {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
+  }
+  .pui-disclosure-trigger:disabled {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .pui-disclosure-chevron {
+    flex: none;
+    transition: rotate var(--duration-fast) var(--ease-out);
+  }
+  /* The chevron mirrors itself in right-to-left text, so it turns the other way to
+     point down when open. */
+  .pui-disclosure-trigger[data-panel-open] > .pui-disclosure-chevron {
+    rotate: 90deg;
+  }
+  .pui-disclosure-trigger:dir(rtl)[data-panel-open] > .pui-disclosure-chevron {
+    rotate: -90deg;
+  }
+  .pui-accordion-panel,
+  .pui-collapsible-panel {
+    overflow: clip;
+    opacity: 1;
+    transition:
+      height var(--motion-reveal) var(--motion-ease),
+      opacity var(--motion-reveal) var(--motion-ease);
+  }
+  .pui-accordion-panel[data-starting-style],
+  .pui-collapsible-panel[data-starting-style] {
+    height: 0;
+    opacity: 0;
+  }
+  .pui-accordion-panel[data-ending-style],
+  .pui-collapsible-panel[data-ending-style] {
+    height: 0;
+    opacity: 0;
+  }
+  .pui-disclosure-body {
+    padding: var(--space-2) var(--space-4) var(--space-4);
+    overflow-wrap: anywhere;
+    min-width: 0;
+  }
+  .pui-disclosure-body > :first-child {
+    margin-top: 0;
+  }
+  .pui-disclosure-body > :last-child {
+    margin-bottom: 0;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-disclosure-chevron,
+    .pui-accordion-panel,
+    .pui-collapsible-panel {
+      transition: none;
+    }
+  }
+}
+@layer surflane.sizes {
+  /* At the default size these equal the base rules: a default SizeProvider changes nothing. */
+  :where([data-ui-size], [data-ui-size] *).pui-disclosure-trigger {
+    min-block-size: var(--control-height);
+    font-size: var(--ui-font);
+    padding-block: calc(var(--ui-gap) * 1.5);
+  }
+}

package/dist/css/rules/drawer.css

@@ -0,0 +1,18 @@
+/* Drawer, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-drawer-handle {
+    flex: none;
+    width: 36px;
+    height: 4px;
+    margin: var(--space-3) auto 0;
+    border-radius: var(--radius-full);
+    background: var(--line);
+  }
+  .pui-drawer[data-side='left'] > .pui-drawer-handle,
+  .pui-drawer[data-side='right'] > .pui-drawer-handle {
+    display: none;
+  }
+}

package/dist/css/rules/empty-state.css

@@ -0,0 +1,9 @@
+/* Empty state, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-empty {
+    padding: var(--ui-card-padding);
+  }
+}

package/dist/css/rules/field-control.css

@@ -0,0 +1,70 @@
+/* Shared by text fields and select triggers. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-control,
+  .pui-select {
+    position: relative;
+    display: inline-flex;
+    min-width: 0;
+    max-width: 100%;
+    width: 100%;
+    vertical-align: middle;
+  }
+  .pui-input,
+  .pui-select-trigger {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: var(--control-height);
+    padding: 0 var(--control-padding-x);
+    border: 1px solid var(--control-border);
+    border-radius: var(--control-radius);
+    background: var(--control-background);
+    color: var(--ink);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
+    outline: none;
+    transition:
+      background-color var(--duration-fast) var(--ease-out),
+      border-color var(--duration-fast) var(--ease-out),
+      box-shadow var(--duration-fast) var(--ease-out);
+  }
+  .pui-input:hover:not(:disabled, [aria-disabled='true'], [readonly], :focus),
+  .pui-select-trigger:hover:not(
+      :disabled,
+      [aria-disabled='true'],
+      :focus-visible
+    ) {
+    background: var(--control-hover-background);
+    border-color: var(--control-hover-border);
+  }
+  .pui-input:focus,
+  .pui-select-trigger:focus-visible {
+    background: var(--control-focus-background);
+    border-color: var(--control-focus);
+    box-shadow: 0 0 0 var(--control-focus-ring-size) var(--control-focus-ring);
+  }
+  .pui-input:disabled,
+  .pui-select-trigger:disabled {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+    background: var(--control-disabled-background);
+  }
+  .pui-input[aria-invalid='true'],
+  .pui-select-trigger[aria-invalid='true'] {
+    border-color: var(--status-danger-fg);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-input,
+    .pui-select-trigger {
+      transition: none;
+    }
+  }
+  .pui-textarea[readonly],
+  .pui-input[readonly] {
+    cursor: text;
+  }
+}