@kouji-ui/components 0.1.1

package/src/example-components.ts

@@ -0,0 +1,396 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// Map of folder → lazy loader for that folder's example components,
+// plus a static exportName → folder owner index.
+//
+// Consumers (apps/docs ExampleRegistryService) look up an export name in
+// EXAMPLE_OWNER to find its folder chunk, then call EXAMPLE_LOADERS[folder]()
+// to import the (code-split) module containing it.
+//
+// Each entry below produces its own chunk in the build output — opening
+// the docs page for component X only pulls component X's examples, not the
+// entire library.
+
+import type { Type } from '@angular/core';
+
+export const EXAMPLE_LOADERS: Record<string, () => Promise<Record<string, Type<unknown>>>> = {
+  'accordion': () => import('./accordion/_examples') as Promise<Record<string, Type<unknown>>>,
+  'alert': () => import('./alert/_examples') as Promise<Record<string, Type<unknown>>>,
+  'avatar': () => import('./avatar/_examples') as Promise<Record<string, Type<unknown>>>,
+  'badge': () => import('./badge/_examples') as Promise<Record<string, Type<unknown>>>,
+  'breadcrumb': () => import('./breadcrumb/_examples') as Promise<Record<string, Type<unknown>>>,
+  'button': () => import('./button/_examples') as Promise<Record<string, Type<unknown>>>,
+  'button-group': () => import('./button-group/_examples') as Promise<Record<string, Type<unknown>>>,
+  'calendar': () => import('./calendar/_examples') as Promise<Record<string, Type<unknown>>>,
+  'card': () => import('./card/_examples') as Promise<Record<string, Type<unknown>>>,
+  'carousel': () => import('./carousel/_examples') as Promise<Record<string, Type<unknown>>>,
+  'cascade-select': () => import('./cascade-select/_examples') as Promise<Record<string, Type<unknown>>>,
+  'chat': () => import('./chat/_examples') as Promise<Record<string, Type<unknown>>>,
+  'checkbox': () => import('./checkbox/_examples') as Promise<Record<string, Type<unknown>>>,
+  'color-picker': () => import('./color-picker/_examples') as Promise<Record<string, Type<unknown>>>,
+  'combobox': () => import('./combobox/_examples') as Promise<Record<string, Type<unknown>>>,
+  'command-palette': () => import('./command-palette/_examples') as Promise<Record<string, Type<unknown>>>,
+  'confirm-popup': () => import('./confirm-popup/_examples') as Promise<Record<string, Type<unknown>>>,
+  'date-picker': () => import('./date-picker/_examples') as Promise<Record<string, Type<unknown>>>,
+  'dialog': () => import('./dialog/_examples') as Promise<Record<string, Type<unknown>>>,
+  'divider': () => import('./divider/_examples') as Promise<Record<string, Type<unknown>>>,
+  'drawer': () => import('./drawer/_examples') as Promise<Record<string, Type<unknown>>>,
+  'dropdown-menu': () => import('./dropdown-menu/_examples') as Promise<Record<string, Type<unknown>>>,
+  'empty-state': () => import('./empty-state/_examples') as Promise<Record<string, Type<unknown>>>,
+  'field': () => import('./field/_examples') as Promise<Record<string, Type<unknown>>>,
+  'file-upload': () => import('./file-upload/_examples') as Promise<Record<string, Type<unknown>>>,
+  'form': () => import('./form/_examples') as Promise<Record<string, Type<unknown>>>,
+  'icon': () => import('./icon/_examples') as Promise<Record<string, Type<unknown>>>,
+  'input': () => import('./input/_examples') as Promise<Record<string, Type<unknown>>>,
+  'input-group': () => import('./input-group/_examples') as Promise<Record<string, Type<unknown>>>,
+  'input-mask': () => import('./input-mask/_examples') as Promise<Record<string, Type<unknown>>>,
+  'input-otp': () => import('./input-otp/_examples') as Promise<Record<string, Type<unknown>>>,
+  'kbd': () => import('./kbd/_examples') as Promise<Record<string, Type<unknown>>>,
+  'link': () => import('./link/_examples') as Promise<Record<string, Type<unknown>>>,
+  'list': () => import('./list/_examples') as Promise<Record<string, Type<unknown>>>,
+  'menubar': () => import('./menubar/_examples') as Promise<Record<string, Type<unknown>>>,
+  'number-input': () => import('./number-input/_examples') as Promise<Record<string, Type<unknown>>>,
+  'overlay-badge': () => import('./overlay-badge/_examples') as Promise<Record<string, Type<unknown>>>,
+  'pagination': () => import('./pagination/_examples') as Promise<Record<string, Type<unknown>>>,
+  'password-input': () => import('./password-input/_examples') as Promise<Record<string, Type<unknown>>>,
+  'popover': () => import('./popover/_examples') as Promise<Record<string, Type<unknown>>>,
+  'progress-bar': () => import('./progress-bar/_examples') as Promise<Record<string, Type<unknown>>>,
+  'radio': () => import('./radio/_examples') as Promise<Record<string, Type<unknown>>>,
+  'select': () => import('./select/_examples') as Promise<Record<string, Type<unknown>>>,
+  'skeleton': () => import('./skeleton/_examples') as Promise<Record<string, Type<unknown>>>,
+  'slider': () => import('./slider/_examples') as Promise<Record<string, Type<unknown>>>,
+  'speed-dial': () => import('./speed-dial/_examples') as Promise<Record<string, Type<unknown>>>,
+  'spinner': () => import('./spinner/_examples') as Promise<Record<string, Type<unknown>>>,
+  'stepper': () => import('./stepper/_examples') as Promise<Record<string, Type<unknown>>>,
+  'table': () => import('./table/_examples') as Promise<Record<string, Type<unknown>>>,
+  'tabs': () => import('./tabs/_examples') as Promise<Record<string, Type<unknown>>>,
+  'tag': () => import('./tag/_examples') as Promise<Record<string, Type<unknown>>>,
+  'textarea': () => import('./textarea/_examples') as Promise<Record<string, Type<unknown>>>,
+  'time-picker': () => import('./time-picker/_examples') as Promise<Record<string, Type<unknown>>>,
+  'toast': () => import('./toast/_examples') as Promise<Record<string, Type<unknown>>>,
+  'toggle': () => import('./toggle/_examples') as Promise<Record<string, Type<unknown>>>,
+  'tooltip': () => import('./tooltip/_examples') as Promise<Record<string, Type<unknown>>>,
+  'tree-select': () => import('./tree-select/_examples') as Promise<Record<string, Type<unknown>>>,
+  'typography': () => import('./typography/_examples') as Promise<Record<string, Type<unknown>>>,
+};
+
+export const EXAMPLE_OWNER: Record<string, string> = {
+  KjAccordionDefaultExample: 'accordion',
+  KjAccordionDisabledExample: 'accordion',
+  KjAccordionMultipleExample: 'accordion',
+  KjAccordionRichContentExample: 'accordion',
+  KjAlertBannerExample: 'alert',
+  KjAlertDismissibleExample: 'alert',
+  KjAlertExample: 'alert',
+  KjAlertVariantsExample: 'alert',
+  KjAlertWithActionsExample: 'alert',
+  KjAvatarDefaultExample: 'avatar',
+  KjAvatarGroupExample: 'avatar',
+  KjAvatarGroupListExample: 'avatar',
+  KjAvatarGroupOverflowExample: 'avatar',
+  KjAvatarGroupShapesExample: 'avatar',
+  KjAvatarGroupSizesExample: 'avatar',
+  KjAvatarInitialsExample: 'avatar',
+  KjAvatarShapesExample: 'avatar',
+  KjAvatarSizesExample: 'avatar',
+  KjAvatarWithImageExample: 'avatar',
+  KjBadgeDefaultExample: 'badge',
+  KjBadgeSizesExample: 'badge',
+  KjBadgeVariantsExample: 'badge',
+  KjBadgeWithIconExample: 'badge',
+  KjBreadcrumbCustomSeparatorExample: 'breadcrumb',
+  KjBreadcrumbExample: 'breadcrumb',
+  KjBreadcrumbLongPathExample: 'breadcrumb',
+  KjBreadcrumbTruncatedExample: 'breadcrumb',
+  KjBreadcrumbWithIconsExample: 'breadcrumb',
+  KjButtonAnchorExample: 'button',
+  KjButtonConfiguredExample: 'button',
+  KjButtonDisabledExample: 'button',
+  KjButtonExample: 'button',
+  KjButtonGroupExample: 'button-group',
+  KjButtonGroupIconOnlyExample: 'button-group',
+  KjButtonGroupToggleExample: 'button-group',
+  KjButtonGroupVariantsExample: 'button-group',
+  KjButtonGroupVerticalExample: 'button-group',
+  KjButtonIconExample: 'button',
+  KjButtonLoadingExample: 'button',
+  KjButtonPressedExample: 'button',
+  KjButtonSizesExample: 'button',
+  KjButtonUsageExample: 'button',
+  KjButtonVariantsExample: 'button',
+  KjCalendarExample: 'calendar',
+  KjCardCoverExample: 'card',
+  KjCardExample: 'card',
+  KjCardFullExample: 'card',
+  KjCarouselAutoplayExample: 'carousel',
+  KjCarouselExample: 'carousel',
+  KjCarouselIndicatorsExample: 'carousel',
+  KjCarouselLazyLoadExample: 'carousel',
+  KjCarouselTabsPatternExample: 'carousel',
+  KjCascadeSelectDataDrivenExample: 'cascade-select',
+  KjCascadeSelectDisabledExample: 'cascade-select',
+  KjCascadeSelectExample: 'cascade-select',
+  KjCascadeSelectFieldExample: 'cascade-select',
+  KjCascadeSelectPathExample: 'cascade-select',
+  KjChatBubbleExample: 'chat',
+  KjChatBubbleGroupedExample: 'chat',
+  KjChatBubbleSidesExample: 'chat',
+  KjChatBubbleVariantsExample: 'chat',
+  KjChatBubbleWithStateExample: 'chat',
+  KjCheckboxCheckedExample: 'checkbox',
+  KjCheckboxDefaultExample: 'checkbox',
+  KjCheckboxDisabledExample: 'checkbox',
+  KjCheckboxIndeterminateExample: 'checkbox',
+  KjCheckboxUsageExample: 'checkbox',
+  KjColorPickerAlphaExample: 'color-picker',
+  KjColorPickerExample: 'color-picker',
+  KjColorPickerHexInputExample: 'color-picker',
+  KjColorPickerInFormExample: 'color-picker',
+  KjColorPickerUsageExample: 'color-picker',
+  KjColorPickerWithPresetsExample: 'color-picker',
+  KjComboboxAsyncExample: 'combobox',
+  KjComboboxEmptyStateExample: 'combobox',
+  KjComboboxExample: 'combobox',
+  KjComboboxFreeTextExample: 'combobox',
+  KjComboboxUsageExample: 'combobox',
+  KjComboboxWithIconsExample: 'combobox',
+  KjCommandPaletteAsyncExample: 'command-palette',
+  KjCommandPaletteDialogExample: 'command-palette',
+  KjCommandPaletteExample: 'command-palette',
+  KjCommandPaletteFuzzyExample: 'command-palette',
+  KjCommandPaletteGroupsExample: 'command-palette',
+  KjCommandPaletteUsageExample: 'command-palette',
+  KjConfirmPopupDestructiveExample: 'confirm-popup',
+  KjConfirmPopupExample: 'confirm-popup',
+  KjConfirmPopupPlacementExample: 'confirm-popup',
+  KjConfirmPopupUsageExample: 'confirm-popup',
+  KjConfirmPopupWithMessageExample: 'confirm-popup',
+  KjDatePickerDisabledDatesExample: 'date-picker',
+  KjDatePickerExample: 'date-picker',
+  KjDatePickerLocaleExample: 'date-picker',
+  KjDatePickerReadonlyExample: 'date-picker',
+  KjDatePickerUsageExample: 'date-picker',
+  KjDatePickerWithMinMaxExample: 'date-picker',
+  KjDialogConfirmationExample: 'dialog',
+  KjDialogDefaultExample: 'dialog',
+  KjDialogNestedExample: 'dialog',
+  KjDialogScrollableExample: 'dialog',
+  KjDialogUsageExample: 'dialog',
+  KjDialogWithFormExample: 'dialog',
+  KjDividerExample: 'divider',
+  KjDividerSizesExample: 'divider',
+  KjDividerStructuralExample: 'divider',
+  KjDividerUsageExample: 'divider',
+  KjDividerVariantsExample: 'divider',
+  KjDividerVerticalExample: 'divider',
+  KjDividerWithContentExample: 'divider',
+  KjDrawerExample: 'drawer',
+  KjDrawerModalVsNonModalExample: 'drawer',
+  KjDrawerScrollableExample: 'drawer',
+  KjDrawerSidesExample: 'drawer',
+  KjDrawerUsageExample: 'drawer',
+  KjDrawerWithFormExample: 'drawer',
+  KjDropdownMenuDisabledExample: 'dropdown-menu',
+  KjDropdownMenuExample: 'dropdown-menu',
+  KjDropdownMenuShortcutsExample: 'dropdown-menu',
+  KjDropdownMenuSidesExample: 'dropdown-menu',
+  KjDropdownMenuUsageExample: 'dropdown-menu',
+  KjDropdownMenuWithIconsExample: 'dropdown-menu',
+  KjDropdownMenuWithSeparatorExample: 'dropdown-menu',
+  KjEmptyStateErrorExample: 'empty-state',
+  KjEmptyStateExample: 'empty-state',
+  KjEmptyStateSearchExample: 'empty-state',
+  KjEmptyStateSizesExample: 'empty-state',
+  KjEmptyStateUsageExample: 'empty-state',
+  KjEmptyStateWithActionsExample: 'empty-state',
+  KjFieldDisabledExample: 'field',
+  KjFieldExample: 'field',
+  KjFieldRequiredExample: 'field',
+  KjFieldWithErrorExample: 'field',
+  KjFieldWithPrefixSuffixExample: 'field',
+  KjFileUploadDropzoneExample: 'file-upload',
+  KjFileUploadExample: 'file-upload',
+  KjFileUploadImagePreviewExample: 'file-upload',
+  KjFileUploadMultipleExample: 'file-upload',
+  KjFileUploadWithProgressExample: 'file-upload',
+  KjFormAsyncSubmitExample: 'form',
+  KjFormCompoundExample: 'form',
+  KjFormExample: 'form',
+  KjFormValidationExample: 'form',
+  KjIconGalleryExample: 'icon',
+  KjInputColorExample: 'input',
+  KjInputExample: 'input',
+  KjInputGroupButtonExample: 'input-group',
+  KjInputGroupExample: 'input-group',
+  KjInputGroupIconExample: 'input-group',
+  KjInputGroupUrlExample: 'input-group',
+  KjInputGroupVariantsExample: 'input-group',
+  KjInputMaskCreditCardExample: 'input-mask',
+  KjInputMaskCustomTokensExample: 'input-mask',
+  KjInputMaskDateExample: 'input-mask',
+  KjInputMaskExample: 'input-mask',
+  KjInputMaskValidationExample: 'input-mask',
+  KjInputOtpAutosubmitExample: 'input-otp',
+  KjInputOtpExample: 'input-otp',
+  KjInputOtpLengthsExample: 'input-otp',
+  KjInputOtpMaskedExample: 'input-otp',
+  KjInputOtpReactiveExample: 'input-otp',
+  KjInputOtpSeparatorExample: 'input-otp',
+  KjKbdComboExample: 'kbd',
+  KjKbdExample: 'kbd',
+  KjKbdInTooltipExample: 'kbd',
+  KjKbdSizesExample: 'kbd',
+  KjLinkDisabledExample: 'link',
+  KjLinkExample: 'link',
+  KjLinkExternalExample: 'link',
+  KjLinkInProseExample: 'link',
+  KjLinkSizesExample: 'link',
+  KjLinkVariantsExample: 'link',
+  KjListDividedExample: 'list',
+  KjListExample: 'list',
+  KjListInteractiveExample: 'list',
+  KjListNavExample: 'list',
+  KjListWithIconsExample: 'list',
+  KjMenubarDisabledItemExample: 'menubar',
+  KjMenubarExample: 'menubar',
+  KjMenubarWithShortcutsExample: 'menubar',
+  KjMenubarWithSubmenuExample: 'menubar',
+  KjNumberInputCurrencyExample: 'number-input',
+  KjNumberInputDecimalExample: 'number-input',
+  KjNumberInputExample: 'number-input',
+  KjNumberInputMinMaxExample: 'number-input',
+  KjNumberInputWithStepperExample: 'number-input',
+  KjOverlayBadgeDescribedExample: 'overlay-badge',
+  KjOverlayBadgeDotExample: 'overlay-badge',
+  KjOverlayBadgeExample: 'overlay-badge',
+  KjOverlayBadgeOnAvatarExample: 'overlay-badge',
+  KjOverlayBadgePositionsExample: 'overlay-badge',
+  KjPaginationBoundariesExample: 'pagination',
+  KjPaginationCompactExample: 'pagination',
+  KjPaginationExample: 'pagination',
+  KjPaginationLargeExample: 'pagination',
+  KjPaginationWithInfoExample: 'pagination',
+  KjPasswordInputExample: 'password-input',
+  KjPasswordInputStrengthExample: 'password-input',
+  KjPasswordInputToggleExample: 'password-input',
+  KjPasswordInputWithRulesExample: 'password-input',
+  KjPopoverCancellableExample: 'popover',
+  KjPopoverExample: 'popover',
+  KjPopoverModalExample: 'popover',
+  KjPopoverSidesExample: 'popover',
+  KjPopoverWithFormExample: 'popover',
+  KjProgressBarExample: 'progress-bar',
+  KjProgressBarIndeterminateExample: 'progress-bar',
+  KjProgressBarSizesExample: 'progress-bar',
+  KjProgressBarVariantsExample: 'progress-bar',
+  KjProgressBarWithLabelExample: 'progress-bar',
+  KjRadioDefaultExample: 'radio',
+  KjRadioDisabledExample: 'radio',
+  KjRadioGroupExample: 'radio',
+  KjRadioInlineExample: 'radio',
+  KjSelectDefaultExample: 'select',
+  KjSelectDisabledExample: 'select',
+  KjSelectGroupedExample: 'select',
+  KjSelectPlaceholderExample: 'select',
+  KjSkeletonAnimationsExample: 'skeleton',
+  KjSkeletonCardExample: 'skeleton',
+  KjSkeletonExample: 'skeleton',
+  KjSkeletonShapesExample: 'skeleton',
+  KjSliderExample: 'slider',
+  KjSliderFormattedExample: 'slider',
+  KjSliderRangeExample: 'slider',
+  KjSliderVerticalExample: 'slider',
+  KjSliderWithMarksExample: 'slider',
+  KjSpeedDialDirectionsExample: 'speed-dial',
+  KjSpeedDialDisabledExample: 'speed-dial',
+  KjSpeedDialExample: 'speed-dial',
+  KjSpeedDialUsageExample: 'speed-dial',
+  KjSpeedDialWithTooltipsExample: 'speed-dial',
+  KjSpinnerAnimationsExample: 'spinner',
+  KjSpinnerExample: 'spinner',
+  KjSpinnerInButtonExample: 'spinner',
+  KjSpinnerSizesExample: 'spinner',
+  KjSpinnerUsageExample: 'spinner',
+  KjSpinnerVariantsExample: 'spinner',
+  KjStepperExample: 'stepper',
+  KjStepperNonLinearExample: 'stepper',
+  KjStepperOptionalStepExample: 'stepper',
+  KjStepperUsageExample: 'stepper',
+  KjStepperVerticalExample: 'stepper',
+  KjStepperWithErrorExample: 'stepper',
+  KjTableColumnPinningExample: 'table',
+  KjTableColumnResizeExample: 'table',
+  KjTableColumnVisibilityExample: 'table',
+  KjTableDensityExample: 'table',
+  KjTableEditableExample: 'table',
+  KjTableEmptyAndErrorExample: 'table',
+  KjTableExample: 'table',
+  KjTableExportExample: 'table',
+  KjTableFilterableExample: 'table',
+  KjTableGroupingExample: 'table',
+  KjTableKeyboardExample: 'table',
+  KjTableMasterDetailExample: 'table',
+  KjTablePersistenceExample: 'table',
+  KjTablePlayground: 'table',
+  KjTableRowPinningExample: 'table',
+  KjTableSelectionExample: 'table',
+  KjTableServerModeExample: 'table',
+  KjTableSortableExample: 'table',
+  KjTableThemingExample: 'table',
+  KjTableUsageExample: 'table',
+  KjTableVirtualizedExample: 'table',
+  KjTabsControlledExample: 'tabs',
+  KjTabsDisabledExample: 'tabs',
+  KjTabsExample: 'tabs',
+  KjTabsManualActivationExample: 'tabs',
+  KjTabsUsageExample: 'tabs',
+  KjTabsVerticalExample: 'tabs',
+  KjTagExample: 'tag',
+  KjTagListExample: 'tag',
+  KjTagRemovableExample: 'tag',
+  KjTagSelectableExample: 'tag',
+  KjTagSizesExample: 'tag',
+  KjTagUsageExample: 'tag',
+  KjTagVariantsExample: 'tag',
+  KjTextareaAutoresizeExample: 'textarea',
+  KjTextareaCharacterCountExample: 'textarea',
+  KjTextareaExample: 'textarea',
+  KjTextareaNoResizeExample: 'textarea',
+  KjTextareaUsageExample: 'textarea',
+  KjTextareaWithFieldExample: 'textarea',
+  KjTimePicker12HourExample: 'time-picker',
+  KjTimePickerExample: 'time-picker',
+  KjTimePickerFormattedExample: 'time-picker',
+  KjTimePickerRangeExample: 'time-picker',
+  KjTimePickerUsageExample: 'time-picker',
+  KjTimePickerWithSecondsExample: 'time-picker',
+  KjToastDefaultExample: 'toast',
+  KjToastDismissibleExample: 'toast',
+  KjToastUsageExample: 'toast',
+  KjToastVariantsExample: 'toast',
+  KjToastWithActionExample: 'toast',
+  KjToggleCheckedExample: 'toggle',
+  KjToggleDefaultExample: 'toggle',
+  KjToggleDisabledExample: 'toggle',
+  KjToggleUsageExample: 'toggle',
+  KjToggleWithLabelExample: 'toggle',
+  KjTooltipDelaysExample: 'tooltip',
+  KjTooltipDisabledExample: 'tooltip',
+  KjTooltipExample: 'tooltip',
+  KjTooltipGroupExample: 'tooltip',
+  KjTooltipRichExample: 'tooltip',
+  KjTooltipSidesExample: 'tooltip',
+  KjTooltipUsageExample: 'tooltip',
+  KjTreeSelectDisabledExample: 'tree-select',
+  KjTreeSelectExample: 'tree-select',
+  KjTreeSelectExpandedExample: 'tree-select',
+  KjTreeSelectFieldExample: 'tree-select',
+  KjTreeSelectMultiExample: 'tree-select',
+  KjTreeSelectUsageExample: 'tree-select',
+  KjTypographyBlockquoteExample: 'typography',
+  KjTypographyCodeExample: 'typography',
+  KjTypographyExample: 'typography',
+  KjTypographyLeadExample: 'typography',
+  KjTypographyMutedExample: 'typography',
+  KjTypographyTruncateExample: 'typography',
+  KjTypographyUsageExample: 'typography',
+};

package/src/field/_examples/field.disabled.example.ts

@@ -0,0 +1,49 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAriaDescribedBy } from '@kouji-ui/core';
+import { KjFieldComponent, KjFieldHelpComponent, KjFieldLabelComponent } from '../field';
+
+/**
+ * Disabled field. The wrapper dims the whole row and forwards the disabled
+ * state to the inner control.
+ */
+@Component({
+  selector: 'kj-field-disabled-example',
+  standalone: true,
+  imports: [KjFieldComponent, KjFieldLabelComponent, KjFieldHelpComponent, KjAriaDescribedBy],
+  styles: [
+    `
+      :host {
+        display: block;
+        max-width: 400px;
+      }
+      .kj-input {
+        color: var(--kj-fg-default);
+        border: var(--kj-border) solid var(--kj-border-default);
+        border-radius: var(--kj-radius-field);
+        padding: var(--kj-space-sm) var(--kj-space-md);
+        font: var(--kj-text-sm) / 1.4 var(--kj-font-sans);
+        width: 100%;
+      }
+      .kj-input:disabled {
+        cursor: not-allowed;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-field #f="kjField" [kjDisabled]="true">
+      <kj-field-label>Username</kj-field-label>
+      <input
+        kjAriaDescribedBy
+        class="kj-input"
+        type="text"
+        value="ada.lovelace"
+        [id]="f.controlId()"
+        [disabled]="f.disabled()"
+        [kjDescribedBy]="$any(f.describedByIds())"
+      />
+      <kj-field-help>Contact support to change your username.</kj-field-help>
+    </kj-field>
+  `,
+})
+export class KjFieldDisabledExample {}

package/src/field/_examples/field.example.ts

@@ -0,0 +1,51 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAriaDescribedBy } from '@kouji-ui/core';
+import { KjFieldComponent, KjFieldHelpComponent, KjFieldLabelComponent } from '../field';
+
+/**
+ * Default usage example for `kj-field` — label + input + help text.
+ * The help id is auto-wired into the input's `aria-describedby` via the
+ * `kjField` template ref's `describedByIds` signal.
+ */
+@Component({
+  selector: 'kj-field-default-example',
+  standalone: true,
+  imports: [KjFieldComponent, KjFieldLabelComponent, KjFieldHelpComponent, KjAriaDescribedBy],
+  styles: [
+    `
+      :host {
+        display: block;
+        max-width: 400px;
+      }
+      .kj-input {
+        color: var(--kj-fg-default);
+        border: var(--kj-border) solid var(--kj-border-default);
+        border-radius: var(--kj-radius-field);
+        padding: var(--kj-space-sm) var(--kj-space-md);
+        font: var(--kj-text-sm) / 1.4 var(--kj-font-sans);
+        width: 100%;
+      }
+      .kj-input:focus-visible {
+        outline: 2px solid var(--kj-bg-primary);
+        outline-offset: 2px;
+        border-color: var(--kj-bg-primary);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-field #f="kjField">
+      <kj-field-label>Email</kj-field-label>
+      <input
+        kjAriaDescribedBy
+        class="kj-input"
+        type="email"
+        placeholder="you@example.com"
+        [id]="f.controlId()"
+        [kjDescribedBy]="$any(f.describedByIds())"
+      />
+      <kj-field-help>We'll never share your email.</kj-field-help>
+    </kj-field>
+  `,
+})
+export class KjFieldExample {}

package/src/field/_examples/field.required.example.ts

@@ -0,0 +1,46 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAriaDescribedBy } from '@kouji-ui/core';
+import { KjFieldComponent, KjFieldHelpComponent, KjFieldLabelComponent } from '../field';
+
+/**
+ * Required field. Adds the visual `*` next to the label via `data-required`
+ * and reflects `aria-required` on the inner input.
+ */
+@Component({
+  selector: 'kj-field-required-example',
+  standalone: true,
+  imports: [KjFieldComponent, KjFieldLabelComponent, KjFieldHelpComponent, KjAriaDescribedBy],
+  styles: [
+    `
+      :host {
+        display: block;
+        max-width: 400px;
+      }
+      .kj-input {
+        color: var(--kj-fg-default);
+        border: var(--kj-border) solid var(--kj-border-default);
+        border-radius: var(--kj-radius-field);
+        padding: var(--kj-space-sm) var(--kj-space-md);
+        font: var(--kj-text-sm) / 1.4 var(--kj-font-sans);
+        width: 100%;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-field #f="kjField" [kjRequired]="true">
+      <kj-field-label>Full name</kj-field-label>
+      <input
+        kjAriaDescribedBy
+        class="kj-input"
+        type="text"
+        placeholder="Ada Lovelace"
+        [id]="f.controlId()"
+        [attr.aria-required]="f.required() ? 'true' : null"
+        [kjDescribedBy]="$any(f.describedByIds())"
+      />
+      <kj-field-help>As it appears on your ID.</kj-field-help>
+    </kj-field>
+  `,
+})
+export class KjFieldRequiredExample {}

package/src/field/_examples/field.with-error.example.ts

@@ -0,0 +1,73 @@
+import { Component, computed, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjAriaDescribedBy } from '@kouji-ui/core';
+import {
+  KjFieldComponent,
+  KjFieldErrorComponent,
+  KjFieldHelpComponent,
+  KjFieldLabelComponent,
+} from '../field';
+
+/**
+ * `kj-field` showing an error message. The error registers its id with the
+ * field; when `kjInvalid` is true the field swaps the help-id for the
+ * error-id in the inner input's `aria-describedby` and toggles the help /
+ * error visibility.
+ */
+@Component({
+  selector: 'kj-field-with-error-example',
+  standalone: true,
+  imports: [
+    KjFieldComponent,
+    KjFieldLabelComponent,
+    KjFieldHelpComponent,
+    KjFieldErrorComponent,
+    KjAriaDescribedBy,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+        max-width: 400px;
+      }
+      .kj-input {
+        color: var(--kj-fg-default);
+        border: var(--kj-border) solid var(--kj-border-default);
+        border-radius: var(--kj-radius-field);
+        padding: var(--kj-space-sm) var(--kj-space-md);
+        font: var(--kj-text-sm) / 1.4 var(--kj-font-sans);
+        width: 100%;
+      }
+      .kj-input[aria-invalid='true'] {
+        border-color: var(--kj-fg-danger);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-field #f="kjField" [kjInvalid]="invalid()">
+      <kj-field-label>Email</kj-field-label>
+      <input
+        kjAriaDescribedBy
+        class="kj-input"
+        type="email"
+        [id]="f.controlId()"
+        [value]="value()"
+        [attr.aria-invalid]="invalid() ? 'true' : null"
+        [kjDescribedBy]="$any(f.describedByIds())"
+        (input)="onInput($event)"
+      />
+      <kj-field-help>Format: name@example.com</kj-field-help>
+      <kj-field-error>Please enter a valid email address.</kj-field-error>
+    </kj-field>
+  `,
+})
+export class KjFieldWithErrorExample {
+  readonly value = signal('not-an-email');
+  // Derive invalid from the value — a real form would use FormControl +
+  // Validators; this keeps the example dependency-free.
+  readonly invalid = computed(() => !this.value().includes('@'));
+
+  protected onInput(e: Event): void {
+    this.value.set((e.target as HTMLInputElement).value);
+  }
+}