From a7c1212ad544e5a96754219722f2071ebe89c2b9 Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Wed, 23 Sep 2026 23:59:28 +0200 Subject: [PATCH 01/18] chore(release): simplify contribution templates --- .github/ISSUE_TEMPLATE/bug.yml | 33 ++++++++++-------------------- .github/ISSUE_TEMPLATE/feature.yml | 22 +++++++------------- .github/PULL_REQUEST_TEMPLATE.md | 15 +++----------- 3 files changed, 21 insertions(+), 49 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml index 573b910..088e75a 100644 --- a/.github/ISSUE_TEMPLATE/bug.yml +++ b/.github/ISSUE_TEMPLATE/bug.yml @@ -1,41 +1,30 @@ name: Bug report -description: Report reproducible behavior that differs from the documented component contract. -title: '[Bug]: ' +description: Report a reproducible problem. labels: [bug] body: - - type: markdown - attributes: - value: Thank you for helping improve Sushi. Please describe observable behavior rather than implementation guesses. - type: input - id: component + id: version attributes: - label: Component and version - placeholder: 'Select, @sushi-kit/angular 0.0.1' + label: Version + placeholder: '@sushi-kit/angular 0.1.0' validations: required: true - type: textarea - id: reproduction + id: behavior attributes: - label: Minimal reproduction - description: Provide a repository, StackBlitz, or concise markup and steps. + label: What happened? + description: Describe the actual and expected behavior. validations: required: true - type: textarea - id: expected - attributes: - label: Expected behavior - validations: - required: true - - type: textarea - id: actual + id: reproduction attributes: - label: Actual behavior + label: Reproduction + description: Provide a minimal example or clear steps. validations: required: true - type: textarea id: environment attributes: label: Environment - description: Angular version, browser, operating system, input method, and active theme when relevant. - validations: - required: true + description: Include the browser, operating system, or Angular version when relevant. diff --git a/.github/ISSUE_TEMPLATE/feature.yml b/.github/ISSUE_TEMPLATE/feature.yml index 1593026..39ca821 100644 --- a/.github/ISSUE_TEMPLATE/feature.yml +++ b/.github/ISSUE_TEMPLATE/feature.yml @@ -1,30 +1,22 @@ -name: Component or API proposal -description: Propose a new consumer capability or a change to an existing contract. -title: '[Proposal]: ' +name: Feature request +description: Suggest a new capability or improvement. labels: [enhancement] body: - type: textarea id: problem attributes: label: Consumer problem - description: Describe the workflow or limitation without prescribing the implementation first. - validations: - required: true - - type: textarea - id: api - attributes: - label: Suggested consumer API - description: Include the shortest realistic usage example when possible. + description: What problem should Sushi solve? validations: required: true - type: textarea id: behavior attributes: - label: Required behavior - description: Include accessibility, keyboard, responsive, theming, and compatibility considerations. + label: Desired behavior + description: Describe the expected result. An API example is optional. validations: required: true - type: textarea - id: alternatives + id: context attributes: - label: Alternatives considered + label: Additional context diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 9bbb3ac..0a0b5a0 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,16 +1,7 @@ -## What changed +## Summary -Describe the consumer problem and the resulting public behavior. - -## Contract review - -- [ ] Public API and source documentation are intentional. -- [ ] Accessibility, keyboard, focus, responsive behavior, and theming were considered. -- [ ] Examples use only supported consumer APIs. -- [ ] Unit tests protect logic and semantics; E2E tests exist only for browser-dependent contracts. -- [ ] Generated API references are current. -- [ ] Package contents and dependency changes were reviewed when relevant. +What changed and why? ## Verification -List the focused and full checks that were run. +Which checks were run? From 0c8216c93952b0cdb6405a4195eaafed2798a3df Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Thu, 24 Sep 2026 00:36:39 +0200 Subject: [PATCH 02/18] docs(sushi): improve package readme --- sushi/README.md | 31 ++++++++++++++++++++++--------- 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/sushi/README.md b/sushi/README.md index 021e3da..7f44553 100644 --- a/sushi/README.md +++ b/sushi/README.md @@ -1,6 +1,8 @@ -# Sushi +# Sushi Angular -The Angular component library in Ramen Suite, published as `@sushi-kit/angular`. Accessible, themeable Angular 22 components use typed signal APIs, Angular Aria, and the Angular CDK. +Accessible, themeable Angular components for Ramen Suite, published as `@sushi-kit/angular`. + +[Documentation](https://ramen-suite.github.io/sushi-angular/) · [Source](https://github.com/ramen-suite/sushi-angular) · [Issues](https://github.com/ramen-suite/sushi-angular/issues) ## Install @@ -8,16 +10,16 @@ The Angular component library in Ramen Suite, published as `@sushi-kit/angular`. npm install @sushi-kit/angular ``` -Import the package stylesheet once from the application's global stylesheet: +Load the component styles once in the application's global stylesheet: ```css @import '@sushi-kit/angular/styles.css'; ``` -The package includes the compiled CSS required by Sushi components. - ## Use a component +Sushi declarations are standalone. Import only what the consuming component uses: + ```ts import { Component } from '@angular/core'; import { Button } from '@sushi-kit/angular'; @@ -30,10 +32,21 @@ import { Button } from '@sushi-kit/angular'; export class Checkout {} ``` -`sushi` is the default theme; `sushi-dark` follows the operating-system dark preference. An application can select either explicitly through `data-theme="sushi"` or `data-theme="sushi-dark"` on an ancestor. +## Themes + +`sushi` is the default light theme. Use `sushi-dark` for the dark theme: + +```html + +``` + +Theme tokens, component APIs, and examples are documented in the [Sushi Playground](https://ramen-suite.github.io/sushi-angular/). + +## Requirements -The repository's [styling and themes guide](https://github.com/ramen-suite/sushi-angular/blob/main/docs/styling-and-themes.md) explains theme tokens, component tokens, recommended Tailwind usage, and custom themes. +- Angular 22 +- A modern browser -Complete examples, generated API references, theming tokens, and contribution guidance are available in the [Sushi repository](https://github.com/ramen-suite/sushi-angular). +## License -Sushi is released under the MIT License. +[MIT](https://github.com/ramen-suite/sushi-angular/blob/main/LICENSE) From 4eb1824e8356189551df8db8bd1d2b9ec8a2686c Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Thu, 24 Sep 2026 00:37:12 +0200 Subject: [PATCH 03/18] fix(sushi): correct package metadata --- sushi/package.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/sushi/package.json b/sushi/package.json index f72a1ef..7a33bd4 100644 --- a/sushi/package.json +++ b/sushi/package.json @@ -16,9 +16,10 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/RAMEN-Suite/sushi-angular.git" + "url": "git+https://github.com/RAMEN-Suite/sushi-angular.git", + "directory": "sushi" }, - "homepage": "https://github.com/RAMEN-Suite/sushi-angular#readme", + "homepage": "https://ramen-suite.github.io/sushi-angular/", "bugs": { "url": "https://github.com/RAMEN-Suite/sushi-angular/issues" }, @@ -26,7 +27,7 @@ "access": "public", "provenance": true }, - "sideEfjjkfects": [ + "sideEffects": [ "*.css" ], "exports": { From 470deae6851e48b28896e30f6de13a9f29dc032b Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Thu, 24 Sep 2026 01:10:02 +0200 Subject: [PATCH 04/18] fix(release): upload generated notices file --- .github/workflows/release.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 7380d02..944d8b8 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -107,7 +107,7 @@ jobs: path: | ${{ steps.pack.outputs.tarball }} sbom.cdx.json - dist/sushi/THIRD-PARTY-NOTICES.md + dist/sushi/NOTICES.md retention-days: 90 - name: Push commit and tag if: ${{ !inputs.dry_run }} From cbc16f8741033740954ff1dfdbea23cd1f5775bf Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Thu, 24 Sep 2026 07:56:24 +0200 Subject: [PATCH 05/18] docs(sushi): clarify Angular 22 support --- README.md | 2 +- docs/getting-started.md | 2 +- sushi/README.md | 6 ++---- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 6c42af2..75b3f23 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Sushi is the Angular component library in Ramen Suite, published as `@sushi-kit/ ## Requirements -- Angular 22 +- Angular 22.x - A modern browser Sushi ships the compiled CSS required by its components. diff --git a/docs/getting-started.md b/docs/getting-started.md index 2fc95c6..578cb29 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -1,6 +1,6 @@ # Getting started -Sushi requires Angular 22. +Sushi requires Angular 22.x. ## 1. Install diff --git a/sushi/README.md b/sushi/README.md index 7f44553..ec0dae9 100644 --- a/sushi/README.md +++ b/sushi/README.md @@ -1,9 +1,7 @@ -# Sushi Angular +# Sushi in Angular Accessible, themeable Angular components for Ramen Suite, published as `@sushi-kit/angular`. -[Documentation](https://ramen-suite.github.io/sushi-angular/) · [Source](https://github.com/ramen-suite/sushi-angular) · [Issues](https://github.com/ramen-suite/sushi-angular/issues) - ## Install ```bash @@ -44,7 +42,7 @@ Theme tokens, component APIs, and examples are documented in the [Sushi Playgrou ## Requirements -- Angular 22 +- Angular 22.x - A modern browser ## License From 0754bc34a9c29be6a0b8cc044039d50f6cfe7e06 Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Sun, 27 Sep 2026 15:17:34 +0200 Subject: [PATCH 06/18] fix(playground): restore document scrolling on mobile --- playground/src/app/app.html | 4 ++-- playground/src/app/app.ts | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/playground/src/app/app.html b/playground/src/app/app.html index d36d7c9..eebb370 100644 --- a/playground/src/app/app.html +++ b/playground/src/app/app.html @@ -1,11 +1,11 @@ -
+
Date: Sun, 27 Sep 2026 15:17:38 +0200 Subject: [PATCH 07/18] fix(sushi): preserve form control sizing on touch focus --- sushi/src/styles/features/form-control.styles.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/sushi/src/styles/features/form-control.styles.css b/sushi/src/styles/features/form-control.styles.css index 8ebe782..95c5584 100644 --- a/sushi/src/styles/features/form-control.styles.css +++ b/sushi/src/styles/features/form-control.styles.css @@ -1,3 +1,13 @@ +.sui-form-control { + /* Keep the configured size; DaisyUI otherwise changes this variable on touch focus. */ + --font-size: initial; +} + +.sui-form-control, +.sui-form-control::file-selector-button { + box-shadow: none; +} + .sui-form-control--disabled { @apply text-base-content/40; } From d963b69e14f9943d8082dafe1c3fa00190cebbe6 Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Sun, 27 Sep 2026 15:17:41 +0200 Subject: [PATCH 08/18] fix(sushi): restore control-specific focus colors --- docs/styling-and-themes.md | 20 +++++++++---------- .../theme-token-reference.generated.ts | 6 +++--- sushi/src/styles/features/focus.styles.css | 2 +- sushi/src/styles/sushi.themes.css | 6 +++--- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/styling-and-themes.md b/docs/styling-and-themes.md index 0c98abf..6a9e7d5 100644 --- a/docs/styling-and-themes.md +++ b/docs/styling-and-themes.md @@ -77,16 +77,16 @@ Use the DaisyUI color roles for the application palette. Every background color Sushi derives shared interaction and overlay styles from these semantic tokens. Override them when a theme needs a different treatment instead of changing several components: -| Token | Purpose | -| ------------------------ | ----------------------------- | -| `--sui-color-border` | Default component border | -| `--sui-color-muted` | Secondary text and actions | -| `--sui-color-subtle` | Low-emphasis labels | -| `--sui-color-hover` | Neutral hover surface | -| `--sui-color-overlay` | Dialog and popover surface | -| `--sui-focus-ring-color` | Keyboard focus indicator | -| `--sui-shadow-overlay` | Dialog and popover elevation | -| `--sui-disabled-opacity` | Shared disabled-state opacity | +| Token | Purpose | +| ------------------------ | ---------------------------------------------------------- | +| `--sui-color-border` | Default component border | +| `--sui-color-muted` | Secondary text and actions | +| `--sui-color-subtle` | Low-emphasis labels | +| `--sui-color-hover` | Neutral hover surface | +| `--sui-color-overlay` | Dialog and popover surface | +| `--sui-focus-ring-color` | Optional global focus color; otherwise follows the control | +| `--sui-shadow-overlay` | Dialog and popover elevation | +| `--sui-disabled-opacity` | Shared disabled-state opacity | Component tokens remain the correct choice for a local exception. For example, `--sui-popover-shadow` defaults to `--sui-shadow-overlay` but can be changed on one popover. diff --git a/playground/src/app/generated/theme-token-reference.generated.ts b/playground/src/app/generated/theme-token-reference.generated.ts index a28f2c5..4cda6a2 100644 --- a/playground/src/app/generated/theme-token-reference.generated.ts +++ b/playground/src/app/generated/theme-token-reference.generated.ts @@ -242,10 +242,10 @@ export const THEME_TOKEN_REFERENCES: readonly ThemeTokenReference[] = [ }, { token: '--sui-focus-ring-color', - lightValue: 'var(--color-primary)', - darkValue: 'var(--color-primary)', + lightValue: 'initial', + darkValue: 'initial', group: 'Semantic UI', - purpose: 'Keyboard focus indicator.', + purpose: "Optional focus color override. Unset by default to retain each control's color.", }, { token: '--sui-shadow-overlay', diff --git a/sushi/src/styles/features/focus.styles.css b/sushi/src/styles/features/focus.styles.css index 256451b..61c9266 100644 --- a/sushi/src/styles/features/focus.styles.css +++ b/sushi/src/styles/features/focus.styles.css @@ -4,7 +4,7 @@ } :is(.btn, .input, .file-input, .select, .textarea, .checkbox, .radio, .toggle, .range, .tab, .kbd):is(:focus, :focus-visible, :focus-within) { - outline-color: var(--sui-focus-ring-color); + outline-color: var(--sui-focus-ring-color, revert-layer); outline-width: var(--sui-focus-ring-width); outline-offset: var(--sui-focus-ring-offset); } diff --git a/sushi/src/styles/sushi.themes.css b/sushi/src/styles/sushi.themes.css index 5773123..54cb7e0 100644 --- a/sushi/src/styles/sushi.themes.css +++ b/sushi/src/styles/sushi.themes.css @@ -89,8 +89,8 @@ --sui-color-hover: color-mix(in oklab, var(--color-base-content) 7%, transparent); /** @group Semantic UI | Dialog and popover surface. */ --sui-color-overlay: var(--color-base-100); - /** @group Semantic UI | Keyboard focus indicator. */ - --sui-focus-ring-color: var(--color-primary); + /** @group Semantic UI | Optional focus color override. Unset by default to retain each control's color. */ + --sui-focus-ring-color: initial; /** @group Semantic UI | Dialog and popover elevation. */ --sui-shadow-overlay: 0 0.75rem 2rem rgb(0 0 0 / 12%); /** @group Semantic UI | Shared disabled-state opacity. */ @@ -155,7 +155,7 @@ --sui-color-subtle: color-mix(in oklab, var(--color-base-content) 45%, transparent); --sui-color-hover: color-mix(in oklab, var(--color-base-content) 7%, transparent); --sui-color-overlay: var(--color-base-100); - --sui-focus-ring-color: var(--color-primary); + --sui-focus-ring-color: initial; --sui-shadow-overlay: 0 0.75rem 2rem rgb(0 0 0 / 28%); --sui-disabled-opacity: 0.5; } From 3b044c8e507da3c968608d99afc42090c1022768 Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Sun, 27 Sep 2026 15:17:44 +0200 Subject: [PATCH 09/18] fix(sushi): allow breadcrumb items to wrap --- .../lib/breadcrumb/breadcrumb.component.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/sushi/src/lib/breadcrumb/breadcrumb.component.css b/sushi/src/lib/breadcrumb/breadcrumb.component.css index c95418f..8c0acc1 100644 --- a/sushi/src/lib/breadcrumb/breadcrumb.component.css +++ b/sushi/src/lib/breadcrumb/breadcrumb.component.css @@ -27,4 +27,22 @@ a:focus-visible { nav { padding: calc(var(--sui-focus-ring-offset) + var(--sui-focus-ring-width)); + overflow: visible; +} + +ol { + flex-wrap: wrap; + row-gap: 0.5rem; + white-space: normal; +} + +li { + min-width: 0; + max-width: 100%; +} + +a, +[aria-current='page'] { + min-width: 0; + overflow-wrap: anywhere; } From 8d330456f7e0d4be04aca0a9b7954f08f26873fb Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Sun, 27 Sep 2026 15:17:47 +0200 Subject: [PATCH 10/18] fix(sushi): pin only the first table column --- sushi/src/lib/table/table.component.html | 1 - sushi/src/lib/table/testing/table.component.spec.ts | 2 -- 2 files changed, 3 deletions(-) diff --git a/sushi/src/lib/table/table.component.html b/sushi/src/lib/table/table.component.html index 25b1606..379dde8 100644 --- a/sushi/src/lib/table/table.component.html +++ b/sushi/src/lib/table/table.component.html @@ -12,7 +12,6 @@ [class.table-xl]="size() === 'xl'" [class.table-zebra]="zebra()" [class.table-pin-rows]="stickyHeader()" - [class.table-pin-cols]="pinFirstColumn()" [class.sui-table--sticky-header]="stickyHeader()" [class.sui-table--pin-first-column]="pinFirstColumn()" [class.sui-table--gridlines]="showGridlines()" diff --git a/sushi/src/lib/table/testing/table.component.spec.ts b/sushi/src/lib/table/testing/table.component.spec.ts index c8bb82e..f77414a 100644 --- a/sushi/src/lib/table/testing/table.component.spec.ts +++ b/sushi/src/lib/table/testing/table.component.spec.ts @@ -122,8 +122,6 @@ describe('Table native structure and templates', (): void => { expect(query(fixture, 'thead th').textContent).toContain('Name'); expect(query(fixture, 'tbody th[scope="row"]').textContent.trim()).toBe('Miso'); expect(query(fixture, 'tbody td').textContent.trim()).toBe('4'); - expect(query(fixture, 'table').classList).toContain('table-pin-cols'); - expect(query(fixture, 'table').classList).toContain('table-pin-rows'); }); it('renders a custom row with its row index', (): void => { From 7811bd9b9a12bc80d202281e7c4c480704d2a0fb Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Sun, 27 Sep 2026 15:17:50 +0200 Subject: [PATCH 11/18] fix(sushi): account for visible viewport offsets in selection overlays --- sushi/src/lib/selection/selection-overlay.ts | 9 ++++++--- .../selection/testing/selection-overlay.spec.ts | 14 +++++++++++++- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/sushi/src/lib/selection/selection-overlay.ts b/sushi/src/lib/selection/selection-overlay.ts index 01302c2..3231088 100644 --- a/sushi/src/lib/selection/selection-overlay.ts +++ b/sushi/src/lib/selection/selection-overlay.ts @@ -18,9 +18,12 @@ export const SELECTION_ABOVE: ConnectedPosition = { export function selectionOverlayPositions(origin: HTMLElement, panelHeight: number): ConnectedPosition[] { const rect: DOMRect = origin.getBoundingClientRect(); - const viewportHeight: number = window.visualViewport?.height ?? document.documentElement.clientHeight; - const availableAbove: number = rect.top - 8; - const availableBelow: number = viewportHeight - rect.bottom - 8; + // The on-screen keyboard can shrink and shift the visible area within the layout viewport. + const viewport: VisualViewport | null = window.visualViewport; + const viewportTop: number = viewport?.offsetTop ?? 0; + const viewportBottom: number = viewportTop + (viewport?.height ?? document.documentElement.clientHeight); + const availableAbove: number = rect.top - viewportTop - 8; + const availableBelow: number = viewportBottom - rect.bottom - 8; return availableBelow < panelHeight && availableAbove > availableBelow ? [SELECTION_ABOVE, SELECTION_BELOW] diff --git a/sushi/src/lib/selection/testing/selection-overlay.spec.ts b/sushi/src/lib/selection/testing/selection-overlay.spec.ts index caeb911..90f021e 100644 --- a/sushi/src/lib/selection/testing/selection-overlay.spec.ts +++ b/sushi/src/lib/selection/testing/selection-overlay.spec.ts @@ -1,4 +1,4 @@ -import { describe, expect, it, vi } from 'vitest'; +import { afterEach, describe, expect, it, vi } from 'vitest'; import { selectionOverlayPositions, SELECTION_ABOVE, SELECTION_BELOW } from '../selection-overlay'; function originAt(top: number, bottom: number): HTMLElement { @@ -7,6 +7,11 @@ function originAt(top: number, bottom: number): HTMLElement { return origin; } +afterEach((): void => { + vi.restoreAllMocks(); + vi.unstubAllGlobals(); +}); + describe('selection overlay positions', (): void => { it('prefers the space below when the panel fits', (): void => { vi.spyOn(document.documentElement, 'clientHeight', 'get').mockReturnValue(800); @@ -19,4 +24,11 @@ describe('selection overlay positions', (): void => { expect(selectionOverlayPositions(originAt(500, 540), 240)).toEqual([SELECTION_ABOVE, SELECTION_BELOW]); }); + + it('measures available space relative to a shifted visual viewport', (): void => { + vi.stubGlobal('visualViewport', { offsetTop: 300, height: 400 }); + + expect(selectionOverlayPositions(originAt(400, 440), 240)).toEqual([SELECTION_BELOW, SELECTION_ABOVE]); + expect(selectionOverlayPositions(originAt(600, 640), 240)).toEqual([SELECTION_ABOVE, SELECTION_BELOW]); + }); }); From 9badc100f3cc34f3c95ac0e21f2e57a1be1285c5 Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Sun, 27 Sep 2026 15:17:54 +0200 Subject: [PATCH 12/18] fix(playground): keep form examples within narrow viewports --- .../app/generated/api-reference.generated.ts | 4 ++-- .../examples/options/options.example.html | 4 ++-- .../examples/address/address.example.html | 6 ++--- .../examples/commerce/commerce.example.html | 23 ++++++++++++++----- .../examples/commerce/commerce.example.ts | 4 ++-- .../pages/input-group/input-group.page.html | 5 ++-- .../input/examples/basic/basic.example.html | 6 ++--- .../input/examples/basic/basic.example.ts | 4 ++-- .../composition/composition.example.html | 6 ++--- .../input/examples/states/states.example.html | 8 +++---- .../lib/input-group/input-group.directive.ts | 2 +- sushi/src/lib/label/label.directive.ts | 4 ++-- 12 files changed, 44 insertions(+), 32 deletions(-) diff --git a/playground/src/app/generated/api-reference.generated.ts b/playground/src/app/generated/api-reference.generated.ts index d9a64c0..8e53d59 100644 --- a/playground/src/app/generated/api-reference.generated.ts +++ b/playground/src/app/generated/api-reference.generated.ts @@ -5316,7 +5316,7 @@ export const apiReference: Readonly<{ kind: 'input', type: 'InputGroupOrientation', defaultValue: "'horizontal'", - description: 'Controls whether items flow horizontally, vertically, or responsively.', + description: 'Defaults to horizontal. Responsive groups stack below 48rem and become horizontal at 48rem.', }, ], templates: [], @@ -5967,7 +5967,7 @@ export const apiReference: Readonly<{ className: 'Label', declaration: 'Label', selector: '[suiLabel]', - description: 'Styles a visible control label without prescribing its native or ARIA association.', + description: 'Styles a visible control label with wrapping text without prescribing its native or ARIA association.', members: [ { name: 'floating', diff --git a/playground/src/app/pages/file-input/examples/options/options.example.html b/playground/src/app/pages/file-input/examples/options/options.example.html index 9e33667..32f7fad 100644 --- a/playground/src/app/pages/file-input/examples/options/options.example.html +++ b/playground/src/app/pages/file-input/examples/options/options.example.html @@ -1,5 +1,5 @@ -
-
diff --git a/playground/src/app/pages/input-group/examples/commerce/commerce.example.html b/playground/src/app/pages/input-group/examples/commerce/commerce.example.html index b6c5f5c..733f4fa 100644 --- a/playground/src/app/pages/input-group/examples/commerce/commerce.example.html +++ b/playground/src/app/pages/input-group/examples/commerce/commerce.example.html @@ -1,7 +1,18 @@ -
- Budget - - EUR - - +
+ +
+
+ + EUR +
+ + +
diff --git a/playground/src/app/pages/input-group/examples/commerce/commerce.example.ts b/playground/src/app/pages/input-group/examples/commerce/commerce.example.ts index 61e5755..1f1a03f 100644 --- a/playground/src/app/pages/input-group/examples/commerce/commerce.example.ts +++ b/playground/src/app/pages/input-group/examples/commerce/commerce.example.ts @@ -1,9 +1,9 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { Button, Input, InputGroup, InputGroupAddon, JoinItem, Select, SelectOption } from '@sushi-kit/angular'; +import { Button, Input, InputGroup, InputGroupAddon, JoinItem, Label, Select, SelectOption } from '@sushi-kit/angular'; @Component({ selector: 'pg-input-group-commerce-example', - imports: [Button, Input, InputGroup, InputGroupAddon, JoinItem, Select], + imports: [Button, Input, InputGroup, InputGroupAddon, JoinItem, Label, Select], templateUrl: './commerce.example.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/playground/src/app/pages/input-group/input-group.page.html b/playground/src/app/pages/input-group/input-group.page.html index 4e8b1c2..87915c8 100644 --- a/playground/src/app/pages/input-group/input-group.page.html +++ b/playground/src/app/pages/input-group/input-group.page.html @@ -13,7 +13,8 @@

Input Group

Addresses and responsive fields

- Use add-ons for fixed text and responsive orientation when controls should stack on narrow screens. + Groups are horizontal by default. Responsive groups stack below 48rem (768px at the default font size). Apply direction-specific + widths and flex sizing at the same breakpoint.

@@ -24,7 +25,7 @@

Addresses and responsive fields

Mixed controls

-

Inputs, add-ons, Select, and Button retain their semantics inside one visual group.

+

Keep the amount and currency together. Stack the period and action below on narrow screens.

diff --git a/playground/src/app/pages/input/examples/basic/basic.example.html b/playground/src/app/pages/input/examples/basic/basic.example.html index eea6d47..8e14160 100644 --- a/playground/src/app/pages/input/examples/basic/basic.example.html +++ b/playground/src/app/pages/input/examples/basic/basic.example.html @@ -1,11 +1,11 @@ -
+
-
+
diff --git a/playground/src/app/pages/input/examples/basic/basic.example.ts b/playground/src/app/pages/input/examples/basic/basic.example.ts index f9309f2..86a1a49 100644 --- a/playground/src/app/pages/input/examples/basic/basic.example.ts +++ b/playground/src/app/pages/input/examples/basic/basic.example.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, signal, WritableSignal } from '@angular/core'; import { FieldTree, form, FormField, required, SchemaPathTree } from '@angular/forms/signals'; -import { Button, Input, Join, JoinItem, Label } from '@sushi-kit/angular'; +import { Button, Input, InputGroup, JoinItem, Label } from '@sushi-kit/angular'; interface InputModel { name: string; @@ -8,7 +8,7 @@ interface InputModel { @Component({ selector: 'pg-input-basic-example', - imports: [FormField, Button, Input, Join, JoinItem, Label], + imports: [FormField, Button, Input, InputGroup, JoinItem, Label], templateUrl: './basic.example.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/playground/src/app/pages/input/examples/composition/composition.example.html b/playground/src/app/pages/input/examples/composition/composition.example.html index de099f6..bfcd124 100644 --- a/playground/src/app/pages/input/examples/composition/composition.example.html +++ b/playground/src/app/pages/input/examples/composition/composition.example.html @@ -3,7 +3,7 @@ Search controls
-
+
Account fields
-