样式

混入与样式

Override any of the `--hub-file-input-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).

Theming with hub-segmented-theme

View

The selected pill follows the themed accent and radius.

Full name

Focus me to see the themed focus ring.

Theming with hub-file-input-theme

混入	参数	描述
Theming
`hub-file-input-theme()`	`$bg--hub-file-input-bg` `$color--hub-file-input-color` `$border-width--hub-file-input-border-width` `$border-style--hub-file-input-border-style` `$border-color--hub-file-input-border-color` `$border-radius--hub-file-input-border-radius` `$padding-x--hub-file-input-padding-x` `$padding-y--hub-file-input-padding-y` `$min-height--hub-file-input-min-height` `$gap--hub-file-input-gap` `$hover-bg--hub-file-input-hover-bg` `$hover-border-color--hub-file-input-hover-border-color` `$dragover-bg--hub-file-input-dragover-bg` `$dragover-border-color--hub-file-input-dragover-border-color` `$prompt-color--hub-file-input-prompt-color` `$browse-color--hub-file-input-browse-color` `$hint-color--hub-file-input-hint-color` `$icon--hub-file-input-icon` `$icon-size--hub-file-input-icon-size` `$icon-color--hub-file-input-icon-color` `$file-icon--hub-file-input-file-icon` `$file-icon-color--hub-file-input-file-icon-color` `$remove-icon--hub-file-input-remove-icon` `$cancel-icon--hub-file-input-cancel-icon` `$retry-icon--hub-file-input-retry-icon` `$done-icon--hub-file-input-done-icon` `$done-color--hub-file-input-done-color` `$item-bg--hub-file-input-item-bg` `$item-border-color--hub-file-input-item-border-color` `$item-border-radius--hub-file-input-item-border-radius` `$thumb-size--hub-file-input-thumb-size` `$grid-min-width--hub-file-input-grid-min-width` `$grid-thumb-height--hub-file-input-grid-thumb-height` `$progress-height--hub-file-input-progress-height` `$progress-track-bg--hub-file-input-progress-track-bg` `$progress-bar-bg--hub-file-input-progress-bar-bg`	One-call theming for `<hub-file-input>`
`hub-forms-theme()`	`$focus-ring-color--hub-form-focus-ring-color` `$focus-ring-width--hub-form-focus-ring-width` `$invalid-color--hub-form-invalid-color--hub-form-invalid-border-color` `$valid-color--hub-form-valid-color--hub-form-valid-border-color` `$disabled-opacity--hub-form-disabled-opacity` `$transition--hub-form-transition`	One-call theming for the shared `ng-hub-ui-forms` chrome
`hub-segmented-theme()`	`$bg--hub-segmented-bg` `$selected-bg--hub-segmented-selected-bg` `$selected-color--hub-segmented-selected-color` `$radius--hub-segmented-radius` `$gap--hub-segmented-gap` `$padding-x--hub-segmented-padding-x` `$padding-y--hub-segmented-padding-y`	One-call theming for `<hub-segmented>`

CSS 变量

用 396 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。

Form

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-form-fieldset-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Form fieldset border color
`--hub-form-fieldset-border-radius`	`var(--hub-ref-radius-md, 0.375rem)`	length	Form fieldset border radius
`--hub-form-fieldset-border-width`	`var(--hub-ref-border-width, 1px)`	length	Form fieldset border width
`--hub-form-fieldset-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Fieldset horizontal padding
`--hub-form-fieldset-padding-y`	`var(--hub-ref-space-3, 1rem)`	length	Fieldset vertical padding
`--hub-form-focus-ring-color`	`var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25))`	color	Form focus ring color
`--hub-form-focus-ring-width`	`var(--hub-sys-focus-ring-width, 0.25rem)`	length	Form focus ring width
`--hub-form-feedback-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Form feedback font size
`--hub-form-feedback-margin-top`	`var(--hub-ref-space-1, 0.25rem)`	length	Form feedback margin top
`--hub-form-invalid-border-color`	`var(--hub-sys-color-danger, #dc3545)`	color	Form invalid border color
`--hub-form-invalid-color`	`var(--hub-sys-color-danger, #dc3545)`	color	Form invalid color
`--hub-form-text-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Form text color
`--hub-form-text-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Form text font size
`--hub-form-text-margin-top`	`var(--hub-ref-space-1, 0.25rem)`	length	Form text margin top
`--hub-form-disabled-opacity`	`var(--hub-sys-opacity-disabled, 0.65)`	number	Disabled field opacity
`--hub-form-feedback-color`	`var(--hub-form-invalid-color)`	color	Validation feedback text color
`--hub-form-field-gap`	`var(--hub-ref-space-1, 0.25rem)`	length	Gap between label and control
`--hub-field-stack-gap`	`0`	length	Space a field leaves under itself when fields are stacked one under another. Zero by default — the gap has always been the container's to give — so nothing moves for an existing form; set it to hand that job to the fields instead. hubFormControlAdapter zeroes it on every control it builds, so a field created into another component's chrome never reserves room below itself. The default is the fallback of the rule that reads it, not a :root declaration: a declaration ties with a consumer's own and the winner is decided by import order alone
`--hub-field-floating-inset`	`1.125rem`	length	Room a floating label needs above the value: added to the field's top padding and to its minimum height, so the label lifts into space that already exists instead of over the text. Shared by every field type — an input, a select and a datepicker with a floating label are the same height because they read this same value
`--hub-field-floating-travel`	`0.375rem`	length	How far the label rises when the field is focused or filled. Applied as a translateY after the scale, so it is measured in the shrunk label's own units, not the field's
`--hub-field-floating-scale`	`0.75`	string	How much the label shrinks once lifted. Three quarters of the 16px base is the 12px Material settles on; anything closer to 1 leaves the label still reading as a placeholder, which defeats lifting it
`--hub-field-floating-raised-color`	`var(--hub-label-color)`	color	Colour a floating label takes once it is lifted. At rest the label is the placeholder and is painted as one; lifted it becomes the field's name, the only thing left saying what the value means, so it stops dressing as a placeholder
`--hub-form-invalid-focus-ring-color`	`var(--hub-sys-color-danger-subtle, rgba(220, 53, 69, 0.25))`	color	Invalid field focus ring color
`--hub-form-valid-color`	`var(--hub-sys-color-success, #198754)`	color	Valid (success) field accent color — opt-in via showValid
`--hub-form-valid-border-color`	`var(--hub-sys-color-success, #198754)`	color	Valid field border color (opt-in)
`--hub-form-valid-focus-ring-color`	`var(--hub-sys-color-success-subtle, rgba(25, 135, 84, 0.25))`	color	Valid field focus ring color (opt-in)
`--hub-form-valid-feedback-color`	`var(--hub-form-valid-color)`	color	Valid (success) feedback text color
`--hub-form-label-horizontal-max-width`	`12rem`	length	Horizontal label max width
`--hub-field-control-min-height`	`calc( var(--hub-input-line-height) * var(--hub-input-font-size) + 2 * var(--hub-input-padding-y) + 2 * var(--hub-input-border-width) )`	length	The height every control in a form row stands at, written as the arithmetic an <input> reaches by construction. Controls built out of divs — the select, the segmented bar — read it instead of each guessing, which is what left a row of fields whose tops and bottoms never met
`--hub-form-required-color`	`var(--hub-sys-color-danger, #dc3545)`	color	Required field marker color
`--hub-form-hint-size`	`1.15em`	length	Diameter of the question mark that carries formTextType="tooltip" helper text. In em on purpose, so it scales with the label beside it rather than staying a fixed circle that grows relative to the words as a form scales its type down
`--hub-form-hint-font-size`	`var(--hub-ref-font-size-xs, 0.75rem)`	length	Size of the ? inside the mark
`--hub-form-hint-font-weight`	`var(--hub-ref-font-weight-bold, 700)`	number	Weight of the ? inside the mark — bold because at this diameter a regular glyph reads as a smudge
`--hub-form-hint-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Colour of the mark at rest. Muted: it is an offer, not an instruction, and a form of them should not read as a row of alerts
`--hub-form-hint-bg`	`transparent`	color	Background of the mark at rest
`--hub-form-hint-border-width`	`1px`	length	Border width of the mark
`--hub-form-hint-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Border colour of the mark at rest
`--hub-form-hint-hover-color`	`var(--hub-sys-text-primary, #212529)`	color	Colour of the mark under the pointer or with focus
`--hub-form-hint-hover-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Background of the mark under the pointer or with focus
`--hub-form-hint-hover-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Border colour of the mark under the pointer or with focus
`--hub-form-row-gap`	`var(--hub-ref-space-3, 1rem)`	length	Horizontal label gutter gap
`--hub-form-transition`	`border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out`	transition	Shared field transition

Input

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-input-bg`	`var(--hub-sys-surface-page, #fff)`	color	控件背景。
`--hub-input-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	控件边框颜色。
`--hub-input-border-radius`	`var(--hub-ref-radius-md, 0.375rem)`	length	控件边框半径。
`--hub-input-border-width`	`var(--hub-ref-border-width, 1px)`	length	Input border width
`--hub-input-color`	`var(--hub-sys-text-primary, #212529)`	color	Input color
`--hub-input-focus-border-color`	`var(--hub-sys-color-primary, #0d6efd)`	color	聚焦时的边框颜色。
`--hub-input-focus-box-shadow`	`0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)`	shadow	Input focus box shadow
`--hub-input-font-family`	`var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)`	string	Input font family
`--hub-input-font-size`	`var(--hub-ref-font-size-base, 1rem)`	length	Input font size
`--hub-input-font-weight`	`var(--hub-ref-font-weight-base, 400)`	number	Input font weight
`--hub-input-group-action-bg`	`var(--hub-sys-color-secondary-subtle, #e9ecef)`	color	Fill of attached content that can be operated ([hubPrepend]/[hubAppend] buttons); static addons take the field surface instead
`--hub-input-group-action-color`	`var(--hub-sys-color-secondary-emphasis, #41464b)`	color	Ink of attached content that can be operated
`--hub-input-group-attached-radius`	`0`	length	Radius of the corners a group shares — the control's and the attached strip's. Zero welds them into one line; set it to the field radius to unweld the group, which is what a field drawn without a box wants
`--hub-input-group-attached-gap`	`0`	length	Space between the elements a slot projects. Zero makes a run of actions read as one strip
`--hub-input-group-attached-border-width`	`var(--hub-input-border-width)`	length	Border of attached content, kept apart from the field's own so a field can drop its box without erasing the outline of the buttons beside it
`--hub-input-group-attached-border-color`	`var(--hub-input-border-color)`	color	Colour of that border. currentColor lets each action keep its own — a destructive one stays red instead of being repainted the field's grey
`--hub-input-group-addon-bg`	`var(--hub-input-bg)`	color	Input group addon bg
`--hub-input-group-addon-border-color`	`var( --hub-input-border-color )`	color	Input group addon border color
`--hub-input-group-addon-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Input group addon color
`--hub-input-line-height`	`var(--hub-ref-line-height-base, 1.5)`	number	Input line height
`--hub-input-padding-x`	`0.75rem`	length	控件水平内边距。
`--hub-input-padding-y`	`0.375rem`	length	控件垂直内边距。
`--hub-input-placeholder-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Input placeholder color
`--hub-input-readonly-bg`	`transparent`	color	Read-only field background
`--hub-input-readonly-border-color`	`transparent`	color	Read-only field border color
`--hub-input-readonly-color`	`var(--hub-input-color)`	color	Read-only field text color — full contrast, the value is there to be read
`--hub-input-readonly-cursor`	`default`	string	Read-only field cursor
`--hub-input-plaintext-color`	`var(--hub-ref-color-gray-700, #495057)`	color	Value colour on a plaintext field — a shade lighter than an editable field's. The label is deliberately left alone, on the same tokens as every other field's, because a form's labels have to keep one rhythm whatever state each field is in. Inside a box the box separates label from value; with no box the value carries the signal on its own, and a touch lighter says it is not being edited without breaking the column
`--hub-input-plaintext-padding-block`	`0 calc(var(--hub-input-padding-y) * 2)`	length	Vertical padding a plaintext control keeps, doing two jobs at once. None above puts the value directly under its label, because a label and its value are one thing and should read as a pair; twice the field's own padding below holds the control at exactly an editable field's height, so a grid mixing the two lines up. Written as a calc() of that padding rather than a literal so it cannot drift if the field's padding moves — replace it with a single value and you give up one of the two
`--hub-input-plaintext-font-weight`	`300`	number	Weight of a plaintext value. A value nobody is typing is being read rather than filled, and at one step lighter than an editable field's it stops competing with its own label — which keeps the weight every other field's label has. Verify it against your own font: a family with no light face will synthesise or ignore it
`--hub-input-transition`	`var(--hub-form-transition)`	transition	Input transition
`--hub-input-wrapper-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Input wrapper gap
`--hub-textarea-border-radius`	`var( --hub-input-border-radius )`	length	Textarea border radius
`--hub-textarea-min-height`	`4.5rem`	length	Textarea min height
`--hub-textarea-padding-x`	`var(--hub-input-padding-x)`	length	Textarea padding x
`--hub-textarea-padding-y`	`var(--hub-input-padding-y)`	length	Textarea padding y
`--hub-input-color-size`	`calc(var(--hub-input-line-height) * var(--hub-input-font-size) + 2 * var(--hub-input-padding-y))`	color	Width of the colour square at the start of the classic colour field (no palette). Its height is always the field height, so the default, the field inner height, keeps it square. Up to 22.34.0 it sized the native colour button, 2.5rem
`--hub-input-swatch-size`	`calc(var(--hub-input-line-height) * var(--hub-input-font-size))`	length	Height of one row of the colour swatch grid: one line of text, so a single row framed by the field padding and border is as tall as any other input
`--hub-input-swatch-min-width`	`2rem`	length	Narrowest a swatch cell gets before the grid opens another row; above it the cells share the row width
`--hub-input-swatch-gap`	`var(--hub-input-padding-y)`	length	Gap between swatch cells; follows the field block padding
`--hub-input-swatch-radius`	`var(--hub-ref-radius-sm, 0.25rem)`	length	Swatch cell corner radius
`--hub-input-swatch-border-color`	`color-mix(in oklch, var(--hub-sys-text-primary, #212529) 20%, transparent)`	color	Hairline inside every swatch, so a swatch the colour of the field still has an edge. Also the line between the classic field colour square and its hex text
`--hub-input-swatch-wrapped-border-color`	`transparent`	color	Field border once the swatches wrap onto several rows. Transparent drops the box, because a tall bordered block reads as a text area; set it to var(--hub-input-border-color) to keep it
`--hub-input-swatch-wrapped-bg`	`transparent`	color	Field background once the swatches wrap onto several rows; transparent by default, like the border
`--hub-input-swatch-ring-width`	`2px`	length	Width of the ring around the selected or focused swatch, and of the focus ring of the classic field colour square
`--hub-input-swatch-ring-offset`	`2px`	length	Gap of field background between a swatch and its selection ring
`--hub-input-swatch-ring-color`	`var(--hub-sys-text-primary, #212529)`	color	Selection ring colour
`--hub-input-swatch-focus-ring-color`	`var(--hub-input-focus-border-color)`	color	Ring colour of the swatch under keyboard focus, and of the classic field colour square
`--hub-input-swatch-mark-icon`	`url("data:image/svg+xml,…")`	url	Check mark on the selected swatch, as a mask image
`--hub-input-swatch-mark-size`	`calc(var(--hub-input-swatch-size) * 0.625)`	length	Check mark size. A length rather than a percentage, because cells stretch wide
`--hub-input-swatch-custom-bg`	`conic-gradient(from 90deg, #f44336, #ffeb3b, #4caf50, #00bcd4, #3f51b5, #e91e63, #f44336)`	color	Spectrum shown by the custom-colour cell until it holds a colour, and by the classic field square while the field is empty
`--hub-input-swatch-mark-color`	`unset (the per-swatch ink)`	color	Consumed-only hook. Set it to force one colour for the check mark on every swatch; unset, each swatch gets black or white, whichever reads on it
`--hub-input-counter-button-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Counter stepper button background
`--hub-input-counter-button-color`	`var(--hub-sys-text-primary, #212529)`	color	Counter stepper button color
`--hub-input-counter-button-width`	`2.5rem`	length	Counter stepper button width
`--hub-input-eye-mask`	`url("data:image/svg+xml,…")`	url	Password visibility toggle eye icon
`--hub-input-icon-color`	`var(--hub-sys-text-muted, #6c757d)`	color	字段内图标词缀的颜色。
`--hub-input-icon-size`	`var(--hub-ref-font-size-base, 1rem)`	length	字段内图标词缀的大小。
`--hub-input-affix-inset`	`var(--hub-input-padding-x)`	length	Affix inset from the field edge
`--hub-input-affix-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gap between the affix and the control text
`--hub-input-clear-icon`	`url("data:image/svg+xml,…")`	url	✕（清除）按钮字形，作为遮罩图像 —— 替换它即可自定义图标。
`--hub-input-clear-size`	`var(--hub-ref-font-size-base, 1rem)`	length	Clear button size
`--hub-input-clear-color`	`var(--hub-sys-text-muted, #6c757d)`	color	清除按钮的颜色。
`--hub-input-clear-hover-color`	`var(--hub-sys-color-danger, #dc3545)`	color	悬停 / 聚焦时清除按钮的颜色。
`--hub-input-password-toggle-width`	`2.5rem`	length	Password reveal toggle addon width
`--hub-input-capslock-color`	`var(--hub-sys-color-warning, #997404)`	color	Caps Lock hint text color
`--hub-input-strength-height`	`0.25rem`	length	Strength meter segment height
`--hub-input-strength-gap`	`0.25rem`	length	Gap between strength meter segments
`--hub-input-strength-track`	`var(--hub-input-border-color)`	string	Strength meter inactive segment (track) color
`--hub-input-strength-1`	`var(--hub-sys-color-danger, #dc3545)`	color	Strength meter color at level 1 (weak)
`--hub-input-strength-2`	`var(--hub-sys-color-warning, #ffc107)`	color	Strength meter color at level 2 (fair)
`--hub-input-strength-3`	`var(--hub-sys-color-info, #0dcaf0)`	color	Strength meter color at level 3 (good)
`--hub-input-strength-4`	`var(--hub-sys-color-success, #198754)`	color	Strength meter color at level 4 (strong)
`--hub-input-strength-color`	`var(--hub-input-strength-1)`	color	Active strength-segment color, cascaded per level from the tokens above

File input

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-file-input-bg`	`var(--hub-sys-surface-page, #fff)`	color	Dropzone background
`--hub-file-input-color`	`var(--hub-sys-text-primary, #212529)`	color	Dropzone text color
`--hub-file-input-border-width`	`var(--hub-ref-border-width, 1px)`	length	Dropzone border width
`--hub-file-input-border-style`	`dashed`	border	Dropzone border style
`--hub-file-input-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Dropzone border color at rest
`--hub-file-input-border-radius`	`var(--hub-input-border-radius)`	length	Dropzone corner radius
`--hub-file-input-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Dropzone horizontal padding
`--hub-file-input-padding-y`	`var(--hub-ref-space-4, 1.5rem)`	length	Dropzone vertical padding
`--hub-file-input-min-height`	`7rem`	length	Dropzone minimum height
`--hub-file-input-compact-min-height`	`var(--hub-field-control-min-height)`	length	Height of appearance="compact": the shared control height, so a logo field lines up with the text inputs beside it instead of towering over them
`--hub-file-input-compact-padding-x`	`var(--hub-input-padding-x)`	length	Horizontal padding of the compact row — the input's own, not the panel's
`--hub-file-input-compact-padding-y`	`var(--hub-input-padding-y)`	length	Vertical padding of the compact row
`--hub-file-input-compact-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gutter between the browse control and the constraints on the compact row
`--hub-file-input-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gutter between dropzone icon, prompt and hint
`--hub-file-input-transition`	`var(--hub-form-transition)`	transition	Dropzone and action-button transition
`--hub-file-input-hover-border-color`	`var(--hub-sys-color-primary, #0d6efd)`	color	Dropzone border color on hover
`--hub-file-input-hover-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Dropzone background on hover
`--hub-file-input-dragover-bg`	`color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 8%, transparent)`	color	Dropzone background while a drag hovers it
`--hub-file-input-dragover-border-color`	`var(--hub-sys-color-primary, #0d6efd)`	color	Dropzone border color while a drag hovers it
`--hub-file-input-focus-border-color`	`var(--hub-input-focus-border-color)`	color	Dropzone border color on keyboard focus
`--hub-file-input-focus-box-shadow`	`var(--hub-input-focus-box-shadow)`	shadow	Dropzone focus ring
`--hub-file-input-prompt-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Drop-invitation text color
`--hub-file-input-prompt-font-size`	`var(--hub-ref-font-size-base, 1rem)`	length	Drop-invitation font size
`--hub-file-input-browse-color`	`var(--hub-sys-color-primary, #0d6efd)`	color	Browse-action text color
`--hub-file-input-browse-font-weight`	`var(--hub-ref-font-weight-medium, 500)`	number	Browse-action font weight
`--hub-file-input-hint-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Constraints-hint text color
`--hub-file-input-hint-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Constraints-hint font size
`--hub-file-input-icon`	`url("data:image/svg+xml,…")`	url	Upload glyph of the dropzone as a mask image
`--hub-file-input-icon-size`	`2rem`	length	Upload glyph size
`--hub-file-input-icon-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Upload glyph tint
`--hub-file-input-file-icon`	`url("data:image/svg+xml,…")`	url	Per-file glyph (files with no thumbnail) as a mask image
`--hub-file-input-file-icon-size`	`1.5rem`	length	Per-file glyph size
`--hub-file-input-file-icon-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Per-file glyph tint
`--hub-file-input-remove-icon`	`url("data:image/svg+xml,…")`	url	Remove-file button glyph as a mask image
`--hub-file-input-cancel-icon`	`url("data:image/svg+xml,…")`	url	Cancel-upload button glyph as a mask image
`--hub-file-input-retry-icon`	`url("data:image/svg+xml,…")`	url	Retry-upload button glyph as a mask image
`--hub-file-input-done-icon`	`url("data:image/svg+xml,…")`	url	Finished-upload tick as a mask image
`--hub-file-input-done-color`	`var(--hub-sys-color-success, #198754)`	color	Finished-upload tick and item border color
`--hub-file-input-action-size`	`1rem`	length	Per-file action button size
`--hub-file-input-action-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Per-file action button tint
`--hub-file-input-action-hover-color`	`var(--hub-sys-text-primary, #212529)`	color	Per-file action button tint on hover
`--hub-file-input-remove-hover-color`	`var(--hub-sys-color-danger, #dc3545)`	color	Remove button tint on hover
`--hub-file-input-list-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gutter between file rows
`--hub-file-input-list-margin-top`	`var(--hub-ref-space-2, 0.5rem)`	length	Space between the dropzone and the file list
`--hub-file-input-item-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	File row/tile background
`--hub-file-input-item-color`	`var(--hub-sys-text-primary, #212529)`	color	File row/tile text color
`--hub-file-input-item-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	File row/tile border color
`--hub-file-input-item-border-radius`	`var(--hub-ref-radius-sm, 0.25rem)`	length	File row/tile corner radius
`--hub-file-input-item-padding-x`	`var(--hub-ref-space-2, 0.5rem)`	length	File row/tile horizontal padding
`--hub-file-input-item-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	File row/tile vertical padding
`--hub-file-input-item-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gutter between thumbnail, metadata and actions
`--hub-file-input-name-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	File name font size
`--hub-file-input-size-color`	`var(--hub-sys-text-muted, #6c757d)`	color	File size text color
`--hub-file-input-size-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	File size font size
`--hub-file-input-error-color`	`var(--hub-sys-color-danger, #dc3545)`	color	Failed-upload message and item border color
`--hub-file-input-error-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Failed-upload message font size
`--hub-file-input-clear-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Remove-all button text color
`--hub-file-input-clear-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Remove-all button font size
`--hub-file-input-thumb-size`	`2.5rem`	length	Thumbnail size in list preview
`--hub-file-input-thumb-radius`	`var(--hub-ref-radius-sm, 0.25rem)`	length	Thumbnail corner radius
`--hub-file-input-thumb-bg`	`var(--hub-sys-surface-page, #fff)`	color	Thumbnail background behind a transparent image
`--hub-file-input-grid-min-width`	`8rem`	length	Minimum tile width in grid preview
`--hub-file-input-grid-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gutter between tiles in grid preview
`--hub-file-input-grid-thumb-height`	`6rem`	length	Tile height in preview="grid" and in an inline grid (preview="inline" with multiple). Up to 22.34.0 it was the thumbnail height of the grid preview
`--hub-file-input-inline-width`	`100%`	length	Width of the single inline field (preview="inline" without multiple). Applies empty and filled alike, so the field keeps its size when a file lands
`--hub-file-input-inline-min-height`	`var(--hub-file-input-min-height)`	length	Minimum height of the single inline field
`--hub-file-input-inline-aspect-ratio`	`auto`	string	Aspect ratio of the single inline field. With -inline-width: 8rem, 1 gives an avatar
`--hub-file-input-tile-radius`	`var(--hub-file-input-border-radius)`	length	Tile corner radius, in inline and grid alike. 50% makes a round avatar
`--hub-file-input-tile-padding`	`var(--hub-ref-space-2, 0.5rem)`	length	Space between the tile edge and its image or icon; 0 lets the image run to the edge
`--hub-file-input-tile-fit`	`contain`	string	object-fit of the tile image: contain shows all of it, cover fills the tile
`--hub-file-input-tile-bg`	`var(--hub-file-input-bg)`	color	Tile background
`--hub-file-input-tile-border-style`	`solid`	border	Border style of a tile that holds a file. Solid, where the empty dropzone is dashed: a cue that does not rely on colour
`--hub-file-input-tile-border-color`	`var(--hub-file-input-border-color)`	color	Tile border colour
`--hub-file-input-tile-name-color`	`var(--hub-file-input-color)`	color	File name colour on a tile drawn as an icon
`--hub-file-input-tile-name-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	File name font size on a tile
`--hub-file-input-tile-error-bg`	`var(--hub-sys-surface-page, #fff)`	color	Surface behind the message on a tile whose upload failed
`--hub-file-input-tile-veil-bg`	`color-mix(in oklch, var(--hub-sys-surface-page, #fff) 60%, transparent)`	color	Veil over the tile content while the Replace layer shows (hover, keyboard focus, drag-over): the page surface at 60 %
`--hub-file-input-tile-replace-bg`	`var(--hub-sys-surface-page, #fff)`	color	Replace pill background, a solid surface so its contrast never depends on the image behind
`--hub-file-input-tile-replace-color`	`var(--hub-sys-text-primary, #212529)`	color	Replace pill text colour
`--hub-file-input-tile-replace-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Replace pill border colour
`--hub-file-input-tile-replace-radius`	`var(--hub-ref-radius-pill, 50rem)`	length	Replace pill corner radius
`--hub-file-input-tile-replace-padding-x`	`0.75rem`	length	Replace pill horizontal padding
`--hub-file-input-tile-replace-padding-y`	`0.375rem`	length	Replace pill vertical padding
`--hub-file-input-tile-replace-gap`	`0.375rem`	length	Gap between the Replace pill glyph and its text
`--hub-file-input-tile-replace-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Replace pill font size
`--hub-file-input-tile-replace-shadow`	`0 0.125rem 0.5rem color-mix(in oklch, var(--hub-sys-text-primary, #212529) 20%, transparent)`	shadow	Replace pill shadow
`--hub-file-input-tile-replace-icon`	`var(--hub-file-input-icon)`	string	Replace pill glyph as a mask image; the dropzone upload glyph by default
`--hub-file-input-tile-replace-icon-size`	`1rem`	length	Replace pill glyph size
`--hub-file-input-tile-action-size`	`1.75rem`	length	Size of the corner buttons on a tile (remove, cancel, retry) and of the image viewer close button
`--hub-file-input-tile-action-inset`	`var(--hub-ref-space-2, 0.5rem)`	length	Distance from the tile corner to its buttons
`--hub-file-input-tile-action-gap`	`var(--hub-ref-space-1, 0.25rem)`	length	Gap between the corner buttons of one tile
`--hub-file-input-tile-action-icon-size`	`1rem`	length	Corner button glyph size
`--hub-file-input-tile-action-radius`	`var(--hub-ref-radius-pill, 50rem)`	length	Corner button corner radius
`--hub-file-input-tile-action-bg`	`var(--hub-sys-surface-page, #fff)`	color	Corner button background, a surface of its own so the button stays visible over any image
`--hub-file-input-tile-action-color`	`var(--hub-sys-text-primary, #212529)`	color	Corner button glyph colour
`--hub-file-input-tile-action-hover-color`	`var(--hub-sys-color-primary, #0d6efd)`	color	Corner button glyph colour on hover
`--hub-file-input-tile-action-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Corner button border colour
`--hub-file-input-tile-action-shadow`	`0 0.125rem 0.25rem color-mix(in oklch, var(--hub-sys-text-primary, #212529) 15%, transparent)`	shadow	Corner button shadow
`--hub-file-input-tile-remove-hover-color`	`var(--hub-file-input-remove-hover-color)`	color	Remove button glyph colour on hover
`--hub-file-input-count-color`	`var(--hub-file-input-hint-color)`	color	Colour of the file counter ("3 of 5 files") under an inline grid with maxFiles
`--hub-file-input-count-font-size`	`var(--hub-file-input-hint-font-size)`	length	Font size of the file counter
`--hub-file-input-viewer-bg`	`var(--hub-sys-surface-page, #fff)`	color	Background of the image viewer, the native modal <dialog> a picked image opens in
`--hub-file-input-viewer-color`	`var(--hub-sys-text-primary, #212529)`	color	Image viewer text colour
`--hub-file-input-viewer-backdrop`	`color-mix(in oklch, var(--hub-ref-color-gray-900, #212529) 75%, transparent)`	color	Image viewer backdrop: a fixed dark grey in both themes
`--hub-file-input-viewer-radius`	`var(--hub-ref-radius-lg, 0.5rem)`	length	Image viewer corner radius
`--hub-file-input-viewer-padding`	`var(--hub-ref-space-3, 1rem)`	length	Image viewer padding
`--hub-file-input-viewer-max-width`	`min(90vw, 64rem)`	length	Image viewer maximum width
`--hub-file-input-viewer-max-height`	`85vh`	length	Image viewer maximum height
`--hub-file-input-viewer-caption-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Font size of the file name under the enlarged image
`--hub-file-input-kind-icon-size`	`2.5rem`	length	Size of the file-kind icon a tile draws when it cannot show the file as an image
`--hub-file-input-kind-icon-color`	`var(--hub-file-input-icon-color)`	color	File-kind icon colour. Scope it per kind with .hub-file-input__tile[data-file-kind="pdf"]
`--hub-file-input-kind-pdf-icon`	`url("data:image/svg+xml,…")`	url	File-kind icon for PDF files (Bootstrap Icons file-earmark-pdf), as a mask image
`--hub-file-input-kind-document-icon`	`url("data:image/svg+xml,…")`	url	File-kind icon for text documents: Word, OpenDocument text, RTF, plain text, Markdown (file-earmark-text), as a mask image
`--hub-file-input-kind-spreadsheet-icon`	`url("data:image/svg+xml,…")`	url	File-kind icon for spreadsheets and CSV/TSV (file-earmark-spreadsheet), as a mask image
`--hub-file-input-kind-presentation-icon`	`url("data:image/svg+xml,…")`	url	File-kind icon for presentations (file-earmark-slides), as a mask image
`--hub-file-input-kind-archive-icon`	`url("data:image/svg+xml,…")`	url	File-kind icon for archives: zip, rar, 7z, tar, gzip… (file-earmark-zip), as a mask image
`--hub-file-input-kind-audio-icon`	`url("data:image/svg+xml,…")`	url	File-kind icon for audio files (file-earmark-music), as a mask image
`--hub-file-input-kind-video-icon`	`url("data:image/svg+xml,…")`	url	File-kind icon for video files (file-earmark-play), as a mask image
`--hub-file-input-kind-code-icon`	`url("data:image/svg+xml,…")`	url	File-kind icon for code and structured text: JSON, XML, HTML, CSS, scripts… (file-earmark-code), as a mask image
`--hub-file-input-kind-image-icon`	`url("data:image/svg+xml,…")`	url	File-kind icon for images the browser cannot paint (HEIC, TIFF, PSD…) or any image when imagePreview is off (file-earmark-image), as a mask image
`--hub-file-input-kind-generic-icon`	`url("data:image/svg+xml,…")`	url	File-kind icon for any file that fits no other family (file-earmark), as a mask image
`--hub-file-input-progress-height`	`0.25rem`	length	Upload progress bar thickness
`--hub-file-input-progress-radius`	`var(--hub-ref-radius-pill, 50rem)`	length	Upload progress bar corner radius
`--hub-file-input-progress-track-bg`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Upload progress bar track color
`--hub-file-input-progress-bar-bg`	`var(--hub-sys-color-primary, #0d6efd)`	color	Upload progress bar fill color
`--hub-file-input-progress-indeterminate-duration`	`1.2s`	transition	Sweep duration when the upload total is unknown
`--hub-file-input-prompt-direction`	`row`	string	Flex direction of the dropzone prompt (row, or column to stack the invitation over the browse action)
`--hub-file-input-prompt-align`	`baseline`	string	Cross-axis alignment of the dropzone prompt
`--hub-file-input-prompt-gap`	`0.25em`	length	Gutter between the invitation and the browse action
`--hub-file-input-drop-text-color`	`inherit`	color	Invitation line colour
`--hub-file-input-drop-text-font-size`	`inherit`	length	Invitation line font size
`--hub-file-input-drop-text-font-weight`	`inherit`	number	Invitation line font weight
`--hub-file-input-drop-subtext-color`	`var(--hub-file-input-hint-color)`	color	Second invitation line colour
`--hub-file-input-drop-subtext-font-size`	`var(--hub-file-input-hint-font-size)`	length	Second invitation line font size
`--hub-file-input-browse-font-size`	`inherit`	length	Browse-action font size
`--hub-file-input-browse-text-decoration`	`underline`	string	Browse-action text decoration
`--hub-file-input-browse-bg`	`transparent`	color	Browse-action background (set it to render the affordance as a button)
`--hub-file-input-browse-hover-bg`	`var(--hub-file-input-browse-bg)`	color	Browse-action background on hover
`--hub-file-input-browse-padding-x`	`0`	length	Browse-action horizontal padding
`--hub-file-input-browse-padding-y`	`0`	length	Browse-action vertical padding
`--hub-file-input-browse-radius`	`0`	length	Browse-action corner radius
`--hub-file-input-browse-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gutter between the browse-action glyph and its label
`--hub-file-input-browse-icon`	`none`	string	Optional leading glyph of the browse action, as a mask image
`--hub-file-input-browse-icon-display`	`none`	string	Display of the browse-action glyph; none keeps it off
`--hub-file-input-browse-icon-size`	`1.125em`	length	Browse-action glyph size
`--hub-file-input-icon-bg`	`transparent`	color	Medallion surface behind the dropzone glyph; transparent keeps it off
`--hub-file-input-icon-chip-size`	`var(--hub-file-input-icon-size)`	length	Medallion size behind the dropzone glyph
`--hub-file-input-icon-chip-radius`	`0`	length	Medallion corner radius behind the dropzone glyph
`--hub-file-input-browse-margin-top`	`0`	length	Space above the browse action when the prompt is stacked into a column

Select

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-select-arrow-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Select arrow color
`--hub-select-arrow-size`	`5px`	length	Border of the caret's CSS triangle (its width is 2×, its height 1×); tune to follow a denser field scale
`--hub-select-arrow-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Inline clearance of the caret wrapper — separation from the value and from the field edge
`--hub-select-bg`	`var(--hub-input-bg)`	color	Select bg
`--hub-select-border-color`	`var( --hub-input-border-color )`	color	Select border color
`--hub-select-border-radius`	`var( --hub-input-border-radius )`	length	Select border radius
`--hub-select-border-width`	`var( --hub-input-border-width )`	length	Select border width
`--hub-select-clear-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Select clear color
`--hub-select-clear-hover-color`	`var(--hub-sys-color-danger, #dc3545)`	color	Select clear hover color
`--hub-select-color`	`var(--hub-input-color)`	color	Select color
`--hub-select-dropdown-bg`	`var(--hub-sys-surface-page, #fff)`	color	Select dropdown bg
`--hub-select-dropdown-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Select dropdown border color
`--hub-select-dropdown-border-radius`	`var(--hub-ref-radius-md, 0.375rem)`	length	Select dropdown border radius
`--hub-select-dropdown-box-shadow`	`var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))`	shadow	Select dropdown box shadow
`--hub-select-focus-border-color`	`var( --hub-input-focus-border-color )`	color	Select focus border color
`--hub-select-focus-box-shadow`	`var( --hub-input-focus-box-shadow )`	shadow	Select focus box shadow
`--hub-select-font-size`	`var(--hub-input-font-size)`	length	Select font size
`--hub-select-option-color`	`var(--hub-sys-text-primary, #212529)`	color	Select option color
`--hub-select-option-marked-bg`	`color-mix(in oklch, var(--hub-select-option-color) 8%, var(--hub-select-dropdown-bg))`	color	Select option marked bg
`--hub-select-option-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Select option padding x
`--hub-select-option-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Select option padding y
`--hub-select-option-selected-bg`	`var(--hub-sys-color-primary, #0d6efd)`	color	选中的下拉选项背景。
`--hub-select-option-selected-color`	`var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff))`	color	Select option selected color
`--hub-select-padding-x`	`var(--hub-input-padding-x)`	length	Select padding x
`--hub-select-group-action-bg`	`var(--hub-input-group-action-bg)`	color	Select attached-action fill
`--hub-select-group-action-color`	`var(--hub-input-group-action-color)`	color	Select attached-action ink
`--hub-select-group-attached-radius`	`var(--hub-input-group-attached-radius)`	length	Select group seam radius
`--hub-select-group-attached-gap`	`var(--hub-input-group-attached-gap)`	length	Select attached-content gap
`--hub-select-group-attached-border-width`	`var(--hub-select-border-width)`	length	Select attached-content border width
`--hub-select-group-attached-border-color`	`var(--hub-select-border-color)`	color	Select attached-content border colour
`--hub-select-group-addon-bg`	`var(--hub-input-group-addon-bg)`	color	Select group addon bg (prepend/append)
`--hub-select-group-addon-border-color`	`var(--hub-input-group-addon-border-color)`	color	Select group addon border color (prepend/append)
`--hub-select-group-addon-color`	`var(--hub-input-group-addon-color)`	color	Select group addon color (prepend/append)
`--hub-select-placeholder-color`	`var( --hub-input-placeholder-color )`	color	Select placeholder color
`--hub-select-value-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	多选标签的背景。
`--hub-select-value-border-radius`	`var(--hub-ref-radius-sm, 0.25rem)`	length	Select value border radius
`--hub-select-value-color`	`var(--hub-sys-text-primary, #212529)`	color	Select value color
`--hub-select-value-remove-order`	`1`	number	Where the remove cross sits inside a multi-selection chip, as its flex order against the label's 0: 1 after the label, -1 in front
`--hub-select-button-bg`	`var(--hub-sys-surface-page, #fff)`	color	Segmented select button background
`--hub-select-button-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Segmented select button border color
`--hub-select-button-color`	`var(--hub-sys-text-primary, #212529)`	color	Segmented select button text color
`--hub-select-button-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Segmented select button gap
`--hub-select-button-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Segmented select button horizontal padding
`--hub-select-button-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Segmented select button vertical padding
`--hub-select-button-selected-bg`	`var(--hub-sys-color-primary, #0d6efd)`	color	Selected segmented button background
`--hub-select-button-selected-border-color`	`var(--hub-sys-color-primary, #0d6efd)`	color	Selected segmented button border color
`--hub-select-button-selected-color`	`var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff))`	color	Selected segmented button text color
`--hub-select-min-height`	`var(--hub-field-control-min-height)`	length	Minimum height of the select control. Derived rather than declared: it spells out the height an input reaches by construction — one line of text between two paddings and two borders — because a select is a div and inherits none of it. Held as a number it drifted, and the select stood 2px taller than every other field
`--hub-select-optgroup-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Select option group label color
`--hub-select-dropdown-zindex`	`var(--hub-select-dropdown-z-index, calc(var(--hub-sys-zindex-modal, 1055) + 5))`	number	Stacking of the ng-select dropdown panel (canonical zindex spelling); sits above HubModal so a select inside a modal is not clipped
`--hub-select-dropdown-z-index`	`calc(var(--hub-sys-zindex-modal, 1055) + 5)`	number	Deprecated spelling — default carrier and override bridge for --hub-select-dropdown-zindex; scheduled for removal after one release cycle

Check & radio

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-check-input-bg`	`var(--hub-input-bg)`	color	Check input bg
`--hub-check-input-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Check input border color
`--hub-check-input-border-radius`	`var(--hub-ref-radius-sm, 0.25rem)`	length	Check input border radius
`--hub-check-input-border-width`	`var(--hub-input-border-width)`	length	Check input border width
`--hub-check-input-checked-bg`	`var(--hub-sys-color-primary, #0d6efd)`	color	Check input checked bg
`--hub-check-input-checked-border-color`	`var(--hub-sys-color-primary, #0d6efd)`	color	Check input checked border color
`--hub-check-input-checked-icon`	`url("data:image/svg+xml,…")`	url	Check input checked icon
`--hub-check-input-indeterminate-bg`	`var(--hub-sys-color-primary, #0d6efd)`	color	Check input background in the mixed state
`--hub-check-input-indeterminate-border-color`	`var(--hub-sys-color-primary, #0d6efd)`	color	Check input border colour in the mixed state
`--hub-check-input-indeterminate-icon`	`url("data:image/svg+xml,…")`	url	Check input mixed-state icon (a dash)
`--hub-check-input-height`	`1.15rem`	length	Check input height
`--hub-check-input-width`	`1.15rem`	length	Check input width
`--hub-check-radio-border-radius`	`50%`	length	Check radio border radius
`--hub-check-label-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gap between check control and label

Datepicker

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-datepicker-icon`	`url("data:image/svg+xml,…")`	url	Datepicker icon
`--hub-datepicker-icon-size`	`1rem`	length	Datepicker icon size
`--hub-timepicker-width`	`fit-content`	length	Width of the time field. Sized to its content by default, because an HH:MM control that stretches across a form row reads as if it expected more than four digits
`--hub-timepicker-min-width`	`8rem`	length	Floor for that width, so the native stepper and the AM/PM segment still fit where a locale shows them
`--hub-timepicker-indicator-opacity`	`0.6`	number	Opacity of the browser's own clock indicator, dimmed so it sits with the field's chrome instead of competing with it
`--hub-datepicker-icon-width`	`2.5rem`	length	Datepicker icon width
`--hub-datepicker-overlay-zindex`	`calc(var(--hub-sys-zindex-modal, 1055) + 5)`	number	Stacking of the calendar overlay, and of its backdrop one layer below it. Sits above HubModal so a datepicker opened inside a dialog draws its calendar over the dialog instead of behind it — the counterpart of --hub-select-dropdown-zindex. Read through its var() fallback and never declared, so setting it anywhere in the cascade wins
`--hub-daterangepicker-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Calendar panel horizontal padding
`--hub-daterangepicker-padding-y`	`var(--hub-ref-space-3, 1rem)`	length	Calendar panel vertical padding

Date range picker

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-daterangepicker-active-bg`	`var(--hub-sys-color-primary, #0d6efd)`	color	选中的日历日期背景。
`--hub-daterangepicker-active-color`	`var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff))`	color	Daterangepicker active color
`--hub-daterangepicker-bg`	`var(--hub-sys-surface-page, #fff)`	color	Daterangepicker bg
`--hub-daterangepicker-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Daterangepicker border color
`--hub-daterangepicker-border-radius`	`var(--hub-ref-radius-md, 0.375rem)`	length	Daterangepicker border radius
`--hub-daterangepicker-box-shadow`	`var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))`	shadow	Daterangepicker box shadow
`--hub-daterangepicker-cell-border-radius`	`var(--hub-ref-radius-sm, 0.25rem)`	length	Daterangepicker cell border radius
`--hub-daterangepicker-cell-color`	`var(--hub-sys-text-primary, #212529)`	color	Daterangepicker cell color
`--hub-daterangepicker-cell-hover-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Daterangepicker cell hover bg
`--hub-daterangepicker-cell-size`	`2rem`	length	Daterangepicker cell size
`--hub-datepicker-grid-gap`	`0.125rem`	length	Gap between the calendar's day cells. Read twice on purpose — the grid lays itself out with it and the panel measures its own width from it — because the panel is exactly seven cells and the six gaps between them, and two literals would drift the first time either was tuned. Widening it widens the panel, which is what makes room for monthFormat="long"
`--hub-daterangepicker-color`	`var(--hub-sys-text-primary, #212529)`	color	Daterangepicker color
`--hub-daterangepicker-in-range-bg`	`color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 14%, transparent)`	color	范围内日历日期的背景。
`--hub-daterangepicker-nav-arrow-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Daterangepicker nav arrow color
`--hub-daterangepicker-nav-arrow-hover-color`	`var(--hub-sys-text-primary, #212529)`	color	Daterangepicker nav arrow hover color
`--hub-daterangepicker-off-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Daterangepicker off color
`--hub-daterangepicker-preview-bg`	`color-mix(in oklch, var(--hub-daterangepicker-in-range-bg) 50%, transparent)`	color	选择结束日期时预览的临时范围背景。

Label

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-label-color`	`var(--hub-sys-text-primary, #212529)`	color	Label color
`--hub-label-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Label font size
`--hub-label-font-weight`	`var(--hub-ref-font-weight-medium, 500)`	number	字段标签的字重。
`--hub-label-margin-bottom`	`0`	length	Label margin bottom

Slider

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-slider-thumb-bg`	`var(--hub-sys-color-primary, #0d6efd)`	color	slider 滑块的颜色。
`--hub-slider-thumb-border`	`2px solid var(--hub-sys-surface-page, #fff)`	border	Slider thumb border
`--hub-slider-thumb-border-radius`	`50%`	length	Slider thumb border radius
`--hub-slider-thumb-height`	`1.1rem`	length	Slider thumb height
`--hub-slider-thumb-width`	`1.1rem`	length	Slider thumb width
`--hub-slider-tooltip-bg`	`var(--hub-sys-text-primary, #212529)`	color	Slider tooltip bg
`--hub-slider-tooltip-border-radius`	`var(--hub-ref-radius-sm, 0.25rem)`	length	Slider tooltip border radius
`--hub-slider-tooltip-color`	`var(--hub-sys-surface-page, #fff)`	color	Slider tooltip color
`--hub-slider-track-bg`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Slider track bg
`--hub-slider-track-border-radius`	`var(--hub-ref-radius-pill, 50rem)`	length	Slider track border radius
`--hub-slider-track-height`	`0.375rem`	length	Slider track height
`--hub-slider-track-width`	`100%`	length	Slider track width
`--hub-slider-thumb-shadow`	`0 0 0 1px var(--hub-sys-border-color-default, #dee2e6)`	shadow	Slider thumb shadow ring
`--hub-slider-track-fill-bg`	`var(--hub-sys-color-primary, #0d6efd)`	color	slider 轨道的已填充部分。
`--hub-slider-track-fill`	`linear-gradient(var(--hub-slider-track-fill-bg), var(--hub-slider-track-fill-bg))`	color	Gradient-capable fill background image for the slider track (clipped to the current percentage)
`--hub-slider-value-space`	`0`	string	Vertical headroom above the rail for the value bubble; collapsed to 0 by the flush (labelless) modifier
`--hub-segmented-padding-y`	`var(--hub-ref-space-1, 0.25rem)`	length	Vertical padding of each segment (md)
`--hub-segmented-min-height`	`var(--hub-field-control-min-height)`	length	Height of the segmented bar. It reads the shared control height because a segmented control lives beside a select, and it measured 43px against the select's 38
`--hub-segmented-size-step`	`var(--hub-ref-space-2, 0.5rem)`	length	How far size="sm" and size="lg" step either side of the field height, so the three sizes stay a scale
`--hub-segmented-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Horizontal padding of each segment (md)
`--hub-segmented-gap`	`0.25rem`	length	Gap between segments and inner track padding
`--hub-segmented-radius`	`var(--hub-ref-radius-md, 0.375rem)`	length	Corner radius of the hub-segmented track
`--hub-segmented-selected-color`	`var(--hub-sys-text-primary, #212529)`	color	Selected segment text colour
`--hub-segmented-selected-bg`	`var(--hub-sys-surface-page, #fff)`	color	Selected segment background
`--hub-segmented-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Track background of the hub-segmented bar
`--hub-segmented-indicator-transition`	`0.2s ease`	transition	Duration/easing of the single-mode sliding indicator as it moves between options

Switch

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-switch-height`	`1.25rem`	length	Switch height
`--hub-switch-width`	`2.25rem`	length	Switch width
`--hub-switch-thumb`	`var(--hub-sys-surface-page, #fff)`	string	Switch thumb color
`--hub-switch-track-off`	`var(--hub-sys-border-color-default, #dee2e6)`	string	Switch off-state track color
`--hub-switch-track-on`	`var(--hub-sys-color-primary, #0d6efd)`	color	Switch on-state track color

OTP input

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

变量	默认值	类型	描述
`--hub-otp-cell-font-size`	`1.25rem`	length	OTP cell font size
`--hub-otp-cell-radius`	`var(--hub-input-border-radius)`	length	OTP cell border radius
`--hub-otp-cell-size`	`2.75rem`	length	OTP cell size
`--hub-otp-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gap between OTP cells
`--hub-otp-separator-color`	`var(--hub-sys-text-muted, #6c757d)`	color	OTP separator color