[sdcorejs]

Summary

CH3 of the sd-chip work in the design handoff .sdcorejs/handoff/design-icon-chip-table/ (spec in chip.md, items C1–C4, D1 and D2). It gives sd-chip the chip look of sd-chip-calendar through one shared SCSS mixin, marks locked chips, removes the dead autocomplete API and rewrites sd-chip.md. CH1 (#103) and CH2 (#104) are already on main, so this PR is based on main directly.

The work is two commits. The first adds the specs, which fail on their own. The second is the code, npm run sync, docs, CHANGELOG and the showcase.

What changed

Item	Change
C1	A sd-chip-row($block, …) mixin at the end of core/form.scss styles mat-form-field.sd-chip-field and .sd-chip-calendar-field. Field 32 / 40 / 48px, chip 20 / 24 / 28px centred, text 12 / 13 / 14px, padding 8 / 8 / 10px, 4px between chips, square suffix buttons 24 / 28 / 32px with 16 / 18 / 20px icons. size="lg" now has a style. The md field is no longer taller than other controls.
C1 (one line)	The typing area keeps at least 80px instead of Material's 150px, so md and lg fit three chips plus the clear button on one line. While chips are folded into “+N” (sd-chip-field--folded) the input shrinks and shows no placeholder, so a size="sm" table cell stays 32px.
C2	Radius 6px, --sd-surface background, 1px --sd-border outline, tabular digits, weight 400, transparent state layer.
C3	A chip that removable keeps gets --sd-chip-locked-bg, a lock icon in the place of ✕ with the tooltip “Không xoá được”, and the accessible name “{value}, Không xoá được”. Disabled fields show neither ✕ nor the lock.
C4	chip.component.scss has no ::ng-deep, !important or hex left. c-md, .no-padding-wrapper and the 10px margin-top are gone.
D1	Removed onSelect(), selectable, separatorKeysCodes, the MatAutocompleteModule / MatProgressSpinnerModule imports, the effect that assigned #name and SdRemovableChipPipe. isFocused is a signal, and the sdChanges subscription uses takeUntilDestroyed instead of ngOnDestroy. The label slot renders only with labelPlacement="top", like sd-date and sd-select.
D2	sd-chip.md rewritten: autoIds, the size scale, locked chips, maxVisible, the label slot, model, keyboard, the public API table, visual cues, E2E hooks, accessibility and anti-patterns.

Also in this PR:

• Tokens: --sd-chip-locked-bg (55% --sd-surface-muted on --sd-surface) and --sd-chip-more-hover-bg (6% --sd-text on --sd-surface-muted), light and dark. --sd-chip-calendar-chip-locked-bg and --sd-chip-calendar-more-hover-bg keep their names and now default to the shared tokens. THEME.md and the contrast test cover both.
• sd-chip-calendar: its :host ::ng-deep field block moved into the mixin, open state included. The only ::ng-deep left in its SCSS is the existing popup panel rule. This also fixes its clear button icon, which a shared .sd-clear-btn sd-icon rule forced to 16px at every size; it is now 18 / 20px at md / lg.
• Showcase: “Kích thước” shows sm / md / lg side by side, each with a locked chip and clearable. The demo drops a helperText attribute sd-chip does not have.

Changes for consumers (CHANGELOG [Unreleased])

• Changed (BREAKING for consumers), with a migration diff in the changelog:
  • onSelect(), selectable and separatorKeysCodes are gone. The template never rendered an autocomplete, so only code that called onSelect() itself is affected.
  • SdRemovableChipPipe (sdRemovableChip) is no longer exported from @sdcorejs/angular/forms/chip.
  • isFocused is a Signal<boolean>, and SdChip no longer has ngAfterViewInit() / ngOnDestroy().
• Added: --sd-chip-locked-bg, --sd-chip-more-hover-bg.
• Changed: the chip look and size scale, the 80px typing area, folded table cells, the locked chip, and sd-chip-calendar moving to the mixin.
• Fixed: the sd-chip-calendar clear button icon size.

API consistency review

Following the mandatory naming and public API consistency review in AGENTS.md.

• Compared with sd-chip-calendar (closest), sd-date and sd-select.
• Checked: input/output names and aliases, types, defaults, two-way binding, public members, CSS classes, tokens, i18n keys, autoIds and exports.
• Removed members are breaking and listed in CHANGELOG with a migration diff: onSelect, selectable, separatorKeysCodes, SdRemovableChipPipe, ngAfterViewInit / ngOnDestroy.
• Type change: isFocused goes from boolean to Signal<boolean>. sd-chip-calendar still has a plain isFocused field, so the two differ here. Changing sd-chip-calendar is outside CH3.
• New public members, named after sd-chip-calendar:
  • iconSizes: same name, but no open entry, because sd-chip has no calendar button.
  • lockedLabel: same name and key pattern (core.form.chip.locked, which CH2 added).
  • chipLabel(item): same name. It returns null for a removable chip, so the chip keeps its own text as its name, while sd-chip-calendar always returns the full date.
• CSS classes follow the sd-chip-calendar BEM pattern: sd-chip-field, sd-chip__chip, sd-chip__chip--locked, sd-chip__lock, sd-chip__suffix, sd-chip-field--folded.
• Tokens: the new tokens are shared rather than per component; the calendar names stay as aliases, so nothing that sets them breaks.
• i18n: no new keys. The separate core.form.chip.* and core.form.chip-calendar.* keys stay as they are.
• Inputs and outputs: unchanged.
• v19–v22: rolled out with npm run sync. npm run check:sync is green on the committed tree.
• Independent review: pending.

Deviations from chip.md

1. Where the mixin lives: it is included in the global core/form.scss, not in each component's SCSS. From a component, reaching the inside of Material's chip and form field needs ::ng-deep, which the handoff forbids, and @use-ing form.scss from a component would copy the global CSS.
2. Icon size: ✕ and lock are 12 / 14 / 16px, not 14 / 16 / 18px, following the sd-chip-calendar decision of 2026-10-23.
3. Locked background: a 55% mix like sd-chip-calendar, not plain --sd-surface-muted.
4. Added beyond the md: the 80px minimum typing area and the folded-field behaviour. Without them md / lg wrapped to two lines and a size="sm" table cell was 56px tall.
5. 240px chip text: stays in sd-chip's SCSS, next to the tooltip logic for cut chips.
6. Label slot: documented as labelPlacement="top" only, like sd-date and sd-select.

Verification

All of this ran locally on exact Node 24.22.1:

• Karma v19 with coverage: npx ng test sdcorejs-angular --watch=false --browsers=ChromeHeadlessCI --code-coverage passes 7947/7947. Statements 90.03%, Branches 79.35%, Functions 90.64%, Lines 92.46%.
• v22: the chip, chip-calendar and form-generic specs pass 724/724.
• Other checks, all green:
  • npm run lint
  • npx ng build sdcorejs-angular
  • check:i18n, check:i18n-parity
  • npm run test:theme (53/53), test:theme-token-list (3/3), npm run check:scss-hex (0 findings), npm run test:showcase-examples (17/17)
  • npm run sync + npm run check:sync
• New specs: 21 cases in chip.visual.spec.ts (with the global theme loaded through LayoutTestTheme) and 3 sd-chip-calendar clear-button cases. Of the first 17 visual cases, 16 failed before the code. The 4 added later came from layout problems found on the showcase (the two-line md / lg field and the 56px folded cell).
• Showcase (800px pane, measured in the DOM):
  • sm 32 / 20px, md 40 / 24px, lg 48 / 28px, each on one line.
  • The locked chip has its background and the name “Quản trị, Không xoá được”.
  • The size="sm" table cell with [maxVisible]="2" is 32px: 2 chips, “+3”, no placeholder.

Not verified: final screenshots (the preview pane does not paint while hidden), 1280px and 768px widths, dark mode in the UI (the tokens have dark values and pass the contrast test), forced-colors mode and a real screen reader. The sd-chip-calendar showcase page was not loaded; it is covered by the geometry specs. v20 and v21 run in CI.

🤖 Generated with Claude Code