@surflane/ui 0.4.0 → 0.6.0

package/dist/css/rules/field.css

@@ -0,0 +1,56 @@
+/* Field, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Form and selection primitives: semantic labels, consistent control states. */
+  .pui-field {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+  .pui-field {
+    gap: var(--space-2);
+  }
+  .pui-field-label {
+    display: block;
+    margin: 0;
+    color: var(--ink);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+  }
+  .pui-field-description,
+  .pui-field-error {
+    margin: 0;
+    font: var(--weight-regular)
+      var(--type-caption-size)/var(--type-caption-leading) var(--font-body);
+    overflow-wrap: anywhere;
+  }
+  .pui-field-description {
+    color: var(--ink-muted);
+  }
+  .pui-field-error {
+    color: var(--status-danger-fg);
+  }
+  .pui-field-item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    column-gap: var(--space-3);
+    row-gap: var(--space-1);
+    min-height: var(--control-height);
+  }
+  .pui-field-item > :is(.pui-field-description, .pui-field-error) {
+    grid-column: 2;
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-field-item {
+    min-block-size: var(--control-height);
+  }
+  @media (max-width: 760px), (pointer: coarse) {
+    :where([data-ui-size], [data-ui-size] *).pui-field-item {
+      min-block-size: var(--control-target-size);
+    }
+  }
+}

package/dist/css/rules/fieldset.css

@@ -0,0 +1,23 @@
+/* Fieldset, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-fieldset {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+  .pui-fieldset-legend {
+    padding: 0;
+    margin-bottom: var(--space-4);
+    color: var(--ink);
+    font: var(--weight-medium)
+      var(--type-subsection-size)/var(--type-subsection-leading)
+      var(--font-body);
+  }
+}

package/dist/css/rules/file-upload.css

@@ -0,0 +1,156 @@
+/* File upload, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-file-upload {
+    min-width: 0;
+  }
+  .pui-file-native {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .pui-file-dropzone {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-5);
+    border: 1px solid transparent;
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    transition: background-color var(--duration-fast) var(--ease-out);
+  }
+  .pui-file-upload[data-dragging] .pui-file-dropzone {
+    background: var(--selected);
+  }
+  .pui-file-trigger {
+    flex-direction: row;
+    width: fit-content;
+    cursor: pointer;
+    font-size: var(--type-body-size);
+    letter-spacing: var(--type-body-tracking);
+    line-height: var(--type-body-leading);
+  }
+  .pui-file-trigger[data-disabled] {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .pui-file-upload:has(.pui-file-native:focus-visible) .pui-file-trigger {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
+  }
+  .pui-file-upload:has(.pui-file-native[aria-invalid='true'])
+    .pui-file-dropzone {
+    border-color: var(--status-danger-fg);
+  }
+  .pui-file-drop-hint {
+    margin: 0;
+    color: var(--ink-muted);
+    font-size: var(--type-compact-size);
+    line-height: var(--type-compact-leading);
+    letter-spacing: var(--type-compact-tracking);
+  }
+  .pui-file-errors {
+    color: var(--status-danger-fg);
+    font: var(--weight-regular)
+      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
+    letter-spacing: var(--type-compact-tracking);
+    overflow-wrap: anywhere;
+  }
+  .pui-file-errors:empty {
+    display: none;
+  }
+  .pui-file-errors ul {
+    margin: 0;
+    padding-inline-start: var(--space-5);
+  }
+  .pui-file-list {
+    display: grid;
+    gap: var(--space-2);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .pui-file-item {
+    min-width: 0;
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    background: var(--surface);
+  }
+  .pui-file-info {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2) var(--space-3);
+    font-size: var(--type-compact-size);
+    line-height: var(--type-compact-leading);
+    letter-spacing: var(--type-compact-tracking);
+  }
+  .pui-file-info > strong {
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    font-weight: var(--weight-medium);
+  }
+  .pui-file-info > span:not(.pui-badge) {
+    color: var(--ink-muted);
+  }
+  .pui-file-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-top: var(--space-3);
+  }
+  .pui-file-item .pui-gauge {
+    margin-top: var(--space-3);
+  }
+  .pui-file-upload-error {
+    margin: var(--space-2) 0 0;
+    color: var(--status-danger-fg);
+    font-size: var(--type-compact-size);
+    line-height: var(--type-compact-leading);
+    letter-spacing: var(--type-compact-tracking);
+  }
+  @media (max-width: 760px), (pointer: coarse) {
+    .pui-file-trigger {
+      min-height: var(--control-target-size);
+    }
+  }
+  @media (max-width: 760px) {
+    .pui-file-dropzone {
+      padding: var(--space-4);
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-file-dropzone {
+      border-color: ButtonText;
+      background: Canvas;
+    }
+    .pui-file-upload[data-dragging] .pui-file-dropzone {
+      border-color: Highlight;
+    }
+    .pui-file-item {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-file-dropzone {
+      transition: none;
+    }
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-file-dropzone {
+    padding: var(--ui-file-padding);
+  }
+}

package/dist/css/rules/filter-bar.css

@@ -0,0 +1,56 @@
+/* Search / filter bar, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-filter-bar {
+    display: grid;
+    gap: var(--space-4);
+    min-inline-size: 0;
+  }
+  .pui-filter-bar-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: end;
+    gap: var(--space-4);
+    min-inline-size: 0;
+  }
+  .pui-filter-bar-field {
+    display: grid;
+    gap: var(--space-2);
+    flex: 1 1 12rem;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+  .pui-filter-bar-field[data-width='search'] {
+    flex: 2 1 20rem;
+  }
+  .pui-filter-bar-field > :is(.pui-control, .pui-select-trigger) {
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+  .pui-filter-bar-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    min-inline-size: 0;
+  }
+  .pui-filter-bar-summary {
+    color: var(--ink-muted);
+    font: var(--weight-regular)
+      var(--type-caption-size)/var(--type-caption-leading) var(--font-body);
+  }
+}
+@layer surflane.sizes {
+  .pui-filter-bar-actions > .pui-button {
+    max-inline-size: 100%;
+    min-height: var(--control-height);
+    overflow-wrap: anywhere;
+  }
+  /* Labels wrap; an icon button stays square. */
+  .pui-filter-bar-actions > .pui-button:where(:not([data-size^='icon'])) {
+    height: auto;
+    padding-block: var(--space-2);
+  }
+}

package/dist/css/rules/form.css

@@ -0,0 +1,15 @@
+/* Form, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Form and selection primitives: semantic labels, consistent control states. */
+  .pui-form {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+  .pui-form {
+    gap: var(--space-6);
+  }
+}

package/dist/css/rules/gauge.css

@@ -0,0 +1,61 @@
+/* Shared by Progress and Meter. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Feedback: completion and measurement share geometry, not semantics. */
+  .pui-gauge {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--space-2) var(--space-4);
+    min-width: 0;
+    color: var(--ink);
+  }
+  .pui-gauge-label {
+    font-weight: var(--weight-regular);
+    overflow-wrap: anywhere;
+  }
+  .pui-gauge-value {
+    color: var(--ink-body);
+    font-variant-numeric: tabular-nums;
+  }
+  .pui-gauge-track {
+    grid-column: 1 / -1;
+    position: relative;
+    height: var(--space-2);
+    overflow: hidden;
+    border-radius: var(--radius-full);
+    background: var(--surface);
+  }
+  .pui-gauge-indicator {
+    background: var(--ink-body);
+    border-radius: inherit;
+    transition: width var(--duration-base) var(--ease-out);
+  }
+  .pui-gauge-indicator[data-indeterminate] {
+    width: 40%;
+    height: inherit;
+    animation: pui-progress-pulse 1.4s ease-in-out infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-gauge-indicator,
+    .pui-gauge-indicator[data-indeterminate] {
+      animation: none;
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-gauge-track {
+      background: Canvas;
+      outline: 1px solid CanvasText;
+    }
+    .pui-gauge-indicator {
+      background: CanvasText;
+    }
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-gauge-track {
+    height: var(--ui-gauge);
+  }
+}

package/dist/css/rules/icon.css

@@ -0,0 +1,27 @@
+/* Icon, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Static glyphs share size/stroke tokens; parent controls own interaction. */
+  .pui-icon {
+    display: inline-block;
+    flex: 0 0 auto;
+    width: var(--icon-size-sm);
+    height: var(--icon-size-sm);
+    vertical-align: -0.125em;
+    stroke-width: var(--icon-stroke-width);
+    pointer-events: none;
+  }
+  .pui-icon[data-size='md'] {
+    width: var(--icon-size-md);
+    height: var(--icon-size-md);
+  }
+  .pui-icon[data-size='lg'] {
+    width: var(--icon-size-lg);
+    height: var(--icon-size-lg);
+  }
+  .pui-icon[data-directional='true']:dir(rtl) {
+    transform: scaleX(-1);
+  }
+}

package/dist/css/rules/inline-message.css

@@ -0,0 +1,10 @@
+/* Inline message, 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-message {
+    padding: var(--ui-surface-padding);
+    gap: var(--ui-content-gap);
+  }
+}

package/dist/css/rules/input-group.css

@@ -0,0 +1,69 @@
+/* Shared by Combobox and NumberField: the field that holds an input and its buttons. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-combobox-group,
+  .pui-number-group {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    width: 100%;
+    min-height: var(--control-height);
+    border: 1px solid var(--control-border);
+    border-radius: var(--control-radius);
+    background: var(--control-background);
+    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-combobox-group:hover,
+  .pui-number-group:hover {
+    border-color: var(--control-hover-border);
+    background: var(--control-hover-background);
+  }
+  .pui-combobox-group:focus-within,
+  .pui-number-group:focus-within {
+    border-color: var(--control-focus);
+    box-shadow: 0 0 0 var(--control-focus-ring-size) var(--control-focus-ring);
+  }
+  .pui-combobox-action,
+  .pui-number-step,
+  .pui-combobox-chip-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: var(--control-height);
+    height: var(--control-height);
+    padding: 0;
+    border: 0;
+    border-radius: var(--control-radius);
+    background: transparent;
+    color: var(--ink-body);
+    cursor: pointer;
+  }
+  .pui-combobox-action:focus-visible,
+  .pui-number-step:focus-visible,
+  .pui-combobox-chip-remove:focus-visible {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
+  }
+  .pui-combobox-group[data-disabled],
+  .pui-number-group[data-disabled] {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .pui-combobox-action[data-disabled],
+  .pui-number-step[data-disabled],
+  .pui-combobox-chip-remove[data-disabled] {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .pui-combobox-group[data-invalid],
+  .pui-number-group[data-invalid] {
+    border-color: var(--status-danger-border);
+  }
+}

package/dist/css/rules/input.css

@@ -0,0 +1,33 @@
+/* Input, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-input::placeholder {
+    color: var(--control-placeholder);
+    opacity: 1;
+  }
+  .pui-control-icon {
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: var(--control-padding-x);
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    color: var(--ink-muted);
+    z-index: 1;
+  }
+  .pui-control[data-leading-icon] .pui-input {
+    padding-inline-start: calc(
+      var(--control-padding-x) + var(--control-icon-size) +
+        var(--control-icon-gap)
+    );
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *):is(.pui-input) {
+    font-size: var(--ui-font);
+    line-height: var(--ui-leading);
+  }
+}

package/dist/css/rules/item.css

@@ -0,0 +1,14 @@
+/* Shared by Menu, Select and Combobox items. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-menu-group-label,
+  .pui-select-group-label {
+    padding: var(--space-2) var(--space-3);
+    color: var(--ink-muted);
+    font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    letter-spacing: var(--type-caption-tracking);
+  }
+}

package/dist/css/rules/layout.css

@@ -0,0 +1,3 @@
+/* Container, Stack, Inline, Grid and Surface, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;

package/dist/css/rules/link.css

@@ -0,0 +1,9 @@
+/* Link, 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] *):is(.pui-link) {
+    font-size: var(--ui-font);
+  }
+}

package/dist/css/rules/list.css

@@ -0,0 +1,10 @@
+/* List, 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-list-item {
+    padding: var(--ui-table-padding-y) var(--ui-surface-padding);
+    gap: var(--ui-surface-padding);
+  }
+}

package/dist/css/rules/markdown.css

@@ -0,0 +1,63 @@
+/* Markdown, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-markdown {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .pui-markdown > :first-child {
+    margin-block-start: 0;
+  }
+  .pui-markdown > :last-child {
+    margin-block-end: 0;
+  }
+  .pui-markdown .pui-code-block {
+    max-inline-size: 100%;
+    margin-block: var(--space-4);
+  }
+  .pui-markdown img {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+    border-radius: var(--radius-md);
+  }
+  .pui-markdown blockquote {
+    margin-inline: 0;
+    padding-inline-start: var(--space-4);
+    border-inline-start: 2px solid var(--line);
+    color: var(--ink-body);
+  }
+  .pui-markdown a {
+    color: var(--ink);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  .pui-markdown a:focus-visible {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
+  }
+  .pui-markdown .contains-task-list {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+  .pui-markdown .task-list-item {
+    display: list-item;
+  }
+  .pui-markdown .task-list-item input {
+    margin-inline-end: var(--space-2);
+    accent-color: var(--ink);
+  }
+  /* Markdown always renders inside pui-prose, whose code rule sets the family, size,
+   * radius and ligatures. */
+  .pui-markdown-inline-code {
+    padding: 2px 4px;
+    background: var(--code-bg);
+    font-weight: var(--weight-regular);
+    letter-spacing: var(--tracking-mono);
+  }
+  .pui-markdown .pui-table {
+    min-inline-size: 480px;
+  }
+}