@karmo-co/drift-kit-reference 23.14.3 → 23.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/manifest/components/select.md +5 -3
- package/manifest/index.json +22 -2
- package/manifest/setup.md +14 -14
- package/package.json +1 -1
|
@@ -35,6 +35,8 @@ div.dk-component-select[data-size][data-open][data-selected][data-menu-tone="inv
|
|
|
35
35
|
span.dk-component-select__option-desc (optional)
|
|
36
36
|
svg.dk-component-select__check
|
|
37
37
|
p.dk-component-select__empty (optional)
|
|
38
|
+
div.dk-component-select__filters (built by the behaviour, data-layout="icons" + [data-search])
|
|
39
|
+
button.dk-component-select__filter (aria-pressed; All, then each category)
|
|
38
40
|
p.dk-component-select__caption (optional)
|
|
39
41
|
p.dk-component-select__error (optional)
|
|
40
42
|
```
|
|
@@ -48,7 +50,7 @@ div.dk-component-select[data-size][data-open][data-selected][data-menu-tone="inv
|
|
|
48
50
|
| `data-clearable` | (present or absent) |
|
|
49
51
|
| `data-closing` | (present or absent) |
|
|
50
52
|
| `data-empty` | (present or absent) |
|
|
51
|
-
| `data-layout` | `grid` |
|
|
53
|
+
| `data-layout` | `grid`, `icons` |
|
|
52
54
|
| `data-loading` | (present or absent) |
|
|
53
55
|
| `data-multiple` | (present or absent) |
|
|
54
56
|
| `data-nav` | `keyboard` |
|
|
@@ -91,7 +93,7 @@ import { Select } from '@karmo-co/drift-kit/react';
|
|
|
91
93
|
| `variant` | `'plain' \| 'raised' \| 'inset' \| 'default'` | How the trigger separates from the surface, as Input's and Glider's do: plain (the default) sits flush with an edge, raised lifts it on a shadow, inset sinks it into the nested fill with no edge. 'default' is the old name for plain and still renders as it. |
|
|
92
94
|
| `sheet` | `'auto' \| 'always' \| 'never'` | How the menu presents itself on a phone. 'auto', the default, is a bottom sheet below the kit's mobile breakpoint and a dropdown above it. 'never' opts out, for a select inside something that is already a sheet or a full-screen modal. 'always' forces the sheet at any width, which is how the documentation shows it on a desktop. |
|
|
93
95
|
| `menuTone` | `'inverse'` | The menu takes the page's theme, whatever the trigger sits on: an inverse trigger opens a light menu on a light page. 'inverse' asks for an inverse menu. |
|
|
94
|
-
| `layout` | `'list' \| 'grid'` | 'grid' lays the options out as cards in a wider popup, for options that are pictures (VehicleSelect). Up and down move a row, left and right a card. |
|
|
96
|
+
| `layout` | `'list' \| 'grid' \| 'icons'` | 'grid' lays the options out as cards in a wider popup, for options that are pictures (VehicleSelect). Up and down move a row, left and right a card. 'icons' is a grid of square glyph cells, nine to a row, the closest names first when searching and chips by category (IconSelect). |
|
|
95
97
|
| `appearance` | `'field' \| 'sentence'` | 'sentence' sets the trigger inside a line of text, the value in bold primary ("Every [Monday] of each week"). Name it with label (kept, not shown) or aria-label. |
|
|
96
98
|
| `align` | `'start' \| 'end'` | Which edge of the trigger the menu lines up with. |
|
|
97
99
|
| `menuMinWidth` | `number` | A floor for the menu's width, in px, beside the trigger's own width: the menu is as wide as the wider of the two, or its content. |
|
|
@@ -108,4 +110,4 @@ import { Select } from '@karmo-co/drift-kit/react';
|
|
|
108
110
|
|
|
109
111
|
## Component tokens
|
|
110
112
|
|
|
111
|
-
`--dk-component-select-small-padding-y`, `--dk-component-select-padding-y`, `--dk-component-select-large-padding-y`, `--dk-component-select-small-height`, `--dk-component-select-height`, `--dk-component-select-large-height`, `--dk-component-select-padding-inline`, `--dk-component-select-radius`, `--dk-component-select-border-width`, `--dk-component-select-focus-ring-width`, `--dk-component-select-gap`, `--dk-component-select-slot-gap`, `--dk-component-select-leading-divider`, `--dk-component-select-leading-divider-hover`, `--dk-component-select-leading-divider-active`, `--dk-component-select-leading-divider-inverse`, `--dk-component-select-leading-divider-inverse-hover`, `--dk-component-select-leading-divider-inverse-active`, `--dk-component-select-leading-divider-width`, `--dk-component-select-leading-color`, `--dk-component-select-leading-color-hover`, `--dk-component-select-leading-color-active`, `--dk-component-select-leading-after`, `--dk-component-select-chevron-size`, `--dk-component-select-sentence-border`, `--dk-component-select-sentence-surface`, `--dk-component-select-sentence-text`, `--dk-component-select-sentence-font-weight`, `--dk-component-select-sentence-font-size`, `--dk-component-select-sentence-line-height`, `--dk-component-select-sentence-small-font-size`, `--dk-component-select-sentence-small-line-height`, `--dk-component-select-sentence-large-font-size`, `--dk-component-select-sentence-large-line-height`, `--dk-component-select-sentence-padding-inline`, `--dk-component-select-sentence-chevron-size`, `--dk-component-select-sentence-value-min-width`, `--dk-component-select-sentence-margin-inline`, `--dk-component-select-font-family`, `--dk-component-select-font-size`, `--dk-component-select-line-height`, `--dk-component-select-small-font-size`, `--dk-component-select-small-line-height`, `--dk-component-select-large-font-size`, `--dk-component-select-large-line-height`, `--dk-component-select-value-font-weight`, `--dk-component-select-placeholder-font-weight`, `--dk-component-select-label-font-family`, `--dk-component-select-label-font-size`, `--dk-component-select-label-line-height`, `--dk-component-select-label-letter-spacing`, `--dk-component-select-label-font-weight`, `--dk-component-select-label-color`, `--dk-component-select-caption-font-size`, `--dk-component-select-caption-line-height`, `--dk-component-select-caption-color`, `--dk-component-select-error-color`, `--dk-component-select-required-color`, `--dk-component-select-surface-default`, `--dk-component-select-surface-hover`, `--dk-component-select-surface-active`, `--dk-component-select-inset-surface`, `--dk-component-select-inset-surface-hover`, `--dk-component-select-inset-surface-active`, `--dk-component-select-inset-border`, `--dk-component-select-inset-value-color`, `--dk-component-select-inset-placeholder-color`, `--dk-component-select-inset-chevron-color`, `--dk-component-select-inset-chevron-primary`, `--dk-component-select-inset-chevron-success`, `--dk-component-select-inset-chevron-error`, `--dk-component-select-inset-chevron-warning`, `--dk-component-select-inset-chevron-information`, `--dk-component-select-border-default`, `--dk-component-select-border-hover`, `--dk-component-select-border-focus`, `--dk-component-select-ring`, `--dk-component-select-value-color`, `--dk-component-select-placeholder-color`, `--dk-component-select-chevron-color`, `--dk-component-select-chevron-color-hover`, `--dk-component-select-value-icon-color`, `--dk-component-select-raised-shadow`, `--dk-component-select-raised-shadow-hover`, `--dk-component-select-raised-border-default`, `--dk-component-select-raised-border-hover`, `--dk-component-select-raised-border-focus`, `--dk-component-select-error-border-default`, `--dk-component-select-error-border-focus`, `--dk-component-select-error-ring`, `--dk-component-select-disabled-surface`, `--dk-component-select-disabled-border`, `--dk-component-select-disabled-value-color`, `--dk-component-select-disabled-icon-color`, `--dk-component-select-disabled-label-color`, `--dk-component-menu-surface`, `--dk-component-menu-border`, `--dk-component-menu-border-width`, `--dk-component-menu-radius`, `--dk-component-menu-shadow`, `--dk-component-menu-padding-block`, `--dk-component-menu-padding-inline`, `--dk-component-menu-max-height`, `--dk-component-menu-max-width`, `--dk-component-menu-viewport-gap`, `--dk-component-menu-sheet-max-height`, `--dk-component-menu-sheet-radius`, `--dk-component-menu-sheet-padding-block`, `--dk-component-menu-scrim`, `--dk-component-menu-scrim-duration`, `--dk-component-menu-scrim-easing`, `--dk-component-menu-sheet-enter-delay`, `--dk-component-menu-sheet-exit-duration`, `--dk-component-menu-sheet-exit-easing`, `--dk-component-menu-enter-duration`, `--dk-component-menu-enter-easing`, `--dk-component-menu-exit-duration`, `--dk-component-menu-exit-easing`, `--dk-component-menu-motion-offset`, `--dk-component-select-option-touch-height`, `--dk-component-select-sheet-title-color`, `--dk-component-menu-scrollbar-thumb`, `--dk-component-menu-scrollbar-thumb-hover`, `--dk-component-select-chip-gap`, `--dk-component-select-chip-padding-block`, `--dk-component-select-chip-padding-inline`, `--dk-component-select-chip-radius`, `--dk-component-select-chip-surface`, `--dk-component-select-chip-shadow`, `--dk-component-select-chip-surface-hover`, `--dk-component-select-chip-color`, `--dk-component-select-chip-font-size`, `--dk-component-select-chip-line-height`, `--dk-component-select-small-chip-font-size`, `--dk-component-select-small-chip-line-height`, `--dk-component-select-large-chip-font-size`, `--dk-component-select-large-chip-line-height`, `--dk-component-select-chip-remove-size`, `--dk-component-select-chip-remove-icon-size`, `--dk-component-select-chip-remove-radius`, `--dk-component-select-chip-remove-surface`, `--dk-component-select-chip-remove-surface-hover`, `--dk-component-select-chip-remove-surface-active`, `--dk-component-select-chip-remove-color`, `--dk-component-select-chip-remove-color-hover`, `--dk-component-select-chip-remove-color-active`, `--dk-component-select-chip-remove-transform-scale-active`, `--dk-component-select-chips-padding-block`, `--dk-component-select-option-padding-block`, `--dk-component-select-option-padding-inline`, `--dk-component-select-option-radius`, `--dk-component-select-option-gap`, `--dk-component-select-option-transform-scale-active`, `--dk-component-select-option-font-size`, `--dk-component-select-option-line-height`, `--dk-component-select-small-option-font-size`, `--dk-component-select-small-option-line-height`, `--dk-component-select-large-option-font-size`, `--dk-component-select-large-option-line-height`, `--dk-component-select-option-font-weight`, `--dk-component-select-option-color`, `--dk-component-select-option-color-active`, `--dk-component-select-option-color-hover`, `--dk-component-select-option-icon-size`, `--dk-component-select-option-media-width`, `--dk-component-select-value-media-height`, `--dk-component-select-grid-menu-width`, `--dk-component-select-grid-menu-max-height`, `--dk-component-select-grid-card-min`, `--dk-component-select-grid-media-width`, `--dk-component-select-grid-desc-font-size`, `--dk-component-select-grid-desc-line-height`, `--dk-component-select-grid-gap`, `--dk-component-select-grid-card-padding`, `--dk-component-select-grid-card-radius`, `--dk-component-select-grid-card-selected-surface`, `--dk-component-select-grid-card-selected-surface-hover`, `--dk-component-select-grid-card-selected-border`, `--dk-component-select-grid-label-font-size`, `--dk-component-select-grid-label-line-height`, `--dk-component-select-grid-card-selected-width`, `--dk-component-select-option-icon-color`, `--dk-component-select-option-icon-color-hover`, `--dk-component-select-check-size`, `--dk-component-select-check-color`, `--dk-component-select-option-surface-selected`, `--dk-component-select-check-color-selected`, `--dk-component-select-check-stroke-width`, `--dk-component-select-option-surface-hover`, `--dk-component-select-option-surface-active`, `--dk-component-select-option-disabled-color`, `--dk-component-select-option-disabled-icon-color`, `--dk-component-select-option-desc-color`, `--dk-component-select-option-desc-font-weight`, `--dk-component-select-option-desc-gap`, `--dk-component-select-group-font-size`, `--dk-component-select-group-line-height`, `--dk-component-select-group-letter-spacing`, `--dk-component-select-group-font-weight`, `--dk-component-select-group-color`, `--dk-component-select-group-padding-block`, `--dk-component-select-group-gap`, `--dk-component-select-search-padding-block`, `--dk-component-select-search-gap`, `--dk-component-select-search-font-size`, `--dk-component-select-search-line-height`, `--dk-component-select-small-search-font-size`, `--dk-component-select-small-search-line-height`, `--dk-component-select-large-search-font-size`, `--dk-component-select-large-search-line-height`, `--dk-component-select-search-color`, `--dk-component-select-search-placeholder-color`, `--dk-component-select-search-icon-size`, `--dk-component-select-search-icon-color`, `--dk-component-select-search-border`, `--dk-component-select-search-border-width`, `--dk-component-select-search-focus-border`, `--dk-component-select-search-focus-width`, `--dk-component-select-search-focus-icon-color`, `--dk-component-select-sheet-search-padding-block`, `--dk-component-select-loading-color`, `--dk-component-select-loading-spinner-size`, `--dk-component-select-loading-spinner-track`, `--dk-component-select-loading-spinner-head`, `--dk-component-select-loading-duration`, `--dk-component-select-clear-size`, `--dk-component-select-clear-icon-size`, `--dk-component-select-clear-radius`, `--dk-component-select-clear-surface-hover`, `--dk-component-select-clear-surface-active`, `--dk-component-select-clear-color`, `--dk-component-select-clear-color-hover`, `--dk-component-select-clear-color-active`, `--dk-component-select-clear-transform-scale-active`, `--dk-component-select-option-meta-color`, `--dk-component-select-empty-color`, `--dk-component-select-duration`, `--dk-component-select-duration-fast`, `--dk-component-select-easing`
|
|
113
|
+
`--dk-component-select-small-padding-y`, `--dk-component-select-padding-y`, `--dk-component-select-large-padding-y`, `--dk-component-select-small-height`, `--dk-component-select-height`, `--dk-component-select-large-height`, `--dk-component-select-padding-inline`, `--dk-component-select-radius`, `--dk-component-select-border-width`, `--dk-component-select-focus-ring-width`, `--dk-component-select-gap`, `--dk-component-select-slot-gap`, `--dk-component-select-leading-divider`, `--dk-component-select-leading-divider-hover`, `--dk-component-select-leading-divider-active`, `--dk-component-select-leading-divider-inverse`, `--dk-component-select-leading-divider-inverse-hover`, `--dk-component-select-leading-divider-inverse-active`, `--dk-component-select-leading-divider-width`, `--dk-component-select-leading-color`, `--dk-component-select-leading-color-hover`, `--dk-component-select-leading-color-active`, `--dk-component-select-leading-after`, `--dk-component-select-chevron-size`, `--dk-component-select-sentence-border`, `--dk-component-select-sentence-surface`, `--dk-component-select-sentence-text`, `--dk-component-select-sentence-font-weight`, `--dk-component-select-sentence-font-size`, `--dk-component-select-sentence-line-height`, `--dk-component-select-sentence-small-font-size`, `--dk-component-select-sentence-small-line-height`, `--dk-component-select-sentence-large-font-size`, `--dk-component-select-sentence-large-line-height`, `--dk-component-select-sentence-padding-inline`, `--dk-component-select-sentence-chevron-size`, `--dk-component-select-sentence-value-min-width`, `--dk-component-select-sentence-margin-inline`, `--dk-component-select-font-family`, `--dk-component-select-font-size`, `--dk-component-select-line-height`, `--dk-component-select-small-font-size`, `--dk-component-select-small-line-height`, `--dk-component-select-large-font-size`, `--dk-component-select-large-line-height`, `--dk-component-select-value-font-weight`, `--dk-component-select-placeholder-font-weight`, `--dk-component-select-label-font-family`, `--dk-component-select-label-font-size`, `--dk-component-select-label-line-height`, `--dk-component-select-label-letter-spacing`, `--dk-component-select-label-font-weight`, `--dk-component-select-label-color`, `--dk-component-select-caption-font-size`, `--dk-component-select-caption-line-height`, `--dk-component-select-caption-color`, `--dk-component-select-error-color`, `--dk-component-select-required-color`, `--dk-component-select-surface-default`, `--dk-component-select-surface-hover`, `--dk-component-select-surface-active`, `--dk-component-select-inset-surface`, `--dk-component-select-inset-surface-hover`, `--dk-component-select-inset-surface-active`, `--dk-component-select-inset-border`, `--dk-component-select-inset-value-color`, `--dk-component-select-inset-placeholder-color`, `--dk-component-select-inset-chevron-color`, `--dk-component-select-inset-chevron-primary`, `--dk-component-select-inset-chevron-success`, `--dk-component-select-inset-chevron-error`, `--dk-component-select-inset-chevron-warning`, `--dk-component-select-inset-chevron-information`, `--dk-component-select-border-default`, `--dk-component-select-border-hover`, `--dk-component-select-border-focus`, `--dk-component-select-ring`, `--dk-component-select-value-color`, `--dk-component-select-placeholder-color`, `--dk-component-select-chevron-color`, `--dk-component-select-chevron-color-hover`, `--dk-component-select-value-icon-color`, `--dk-component-select-raised-shadow`, `--dk-component-select-raised-shadow-hover`, `--dk-component-select-raised-border-default`, `--dk-component-select-raised-border-hover`, `--dk-component-select-raised-border-focus`, `--dk-component-select-error-border-default`, `--dk-component-select-error-border-focus`, `--dk-component-select-error-ring`, `--dk-component-select-disabled-surface`, `--dk-component-select-disabled-border`, `--dk-component-select-disabled-value-color`, `--dk-component-select-disabled-icon-color`, `--dk-component-select-disabled-label-color`, `--dk-component-menu-surface`, `--dk-component-menu-border`, `--dk-component-menu-border-width`, `--dk-component-menu-radius`, `--dk-component-menu-shadow`, `--dk-component-menu-padding-block`, `--dk-component-menu-padding-inline`, `--dk-component-menu-max-height`, `--dk-component-menu-max-width`, `--dk-component-menu-viewport-gap`, `--dk-component-menu-sheet-max-height`, `--dk-component-menu-sheet-radius`, `--dk-component-menu-sheet-padding-block`, `--dk-component-menu-scrim`, `--dk-component-menu-scrim-duration`, `--dk-component-menu-scrim-easing`, `--dk-component-menu-sheet-enter-delay`, `--dk-component-menu-sheet-exit-duration`, `--dk-component-menu-sheet-exit-easing`, `--dk-component-menu-enter-duration`, `--dk-component-menu-enter-easing`, `--dk-component-menu-exit-duration`, `--dk-component-menu-exit-easing`, `--dk-component-menu-motion-offset`, `--dk-component-select-option-touch-height`, `--dk-component-select-sheet-title-color`, `--dk-component-menu-scrollbar-thumb`, `--dk-component-menu-scrollbar-thumb-hover`, `--dk-component-select-chip-gap`, `--dk-component-select-chip-padding-block`, `--dk-component-select-chip-padding-inline`, `--dk-component-select-chip-radius`, `--dk-component-select-chip-surface`, `--dk-component-select-chip-shadow`, `--dk-component-select-chip-surface-hover`, `--dk-component-select-chip-color`, `--dk-component-select-chip-font-size`, `--dk-component-select-chip-line-height`, `--dk-component-select-small-chip-font-size`, `--dk-component-select-small-chip-line-height`, `--dk-component-select-large-chip-font-size`, `--dk-component-select-large-chip-line-height`, `--dk-component-select-chip-remove-size`, `--dk-component-select-chip-remove-icon-size`, `--dk-component-select-chip-remove-radius`, `--dk-component-select-chip-remove-surface`, `--dk-component-select-chip-remove-surface-hover`, `--dk-component-select-chip-remove-surface-active`, `--dk-component-select-chip-remove-color`, `--dk-component-select-chip-remove-color-hover`, `--dk-component-select-chip-remove-color-active`, `--dk-component-select-chip-remove-transform-scale-active`, `--dk-component-select-chips-padding-block`, `--dk-component-select-option-padding-block`, `--dk-component-select-option-padding-inline`, `--dk-component-select-option-radius`, `--dk-component-select-option-gap`, `--dk-component-select-option-transform-scale-active`, `--dk-component-select-option-font-size`, `--dk-component-select-option-line-height`, `--dk-component-select-small-option-font-size`, `--dk-component-select-small-option-line-height`, `--dk-component-select-large-option-font-size`, `--dk-component-select-large-option-line-height`, `--dk-component-select-option-font-weight`, `--dk-component-select-option-color`, `--dk-component-select-option-color-active`, `--dk-component-select-option-color-hover`, `--dk-component-select-option-icon-size`, `--dk-component-select-option-media-width`, `--dk-component-select-value-media-height`, `--dk-component-select-grid-menu-width`, `--dk-component-select-grid-menu-max-height`, `--dk-component-select-grid-card-min`, `--dk-component-select-grid-media-width`, `--dk-component-select-grid-desc-font-size`, `--dk-component-select-grid-desc-line-height`, `--dk-component-select-grid-gap`, `--dk-component-select-grid-card-padding`, `--dk-component-select-grid-card-radius`, `--dk-component-select-grid-card-selected-surface`, `--dk-component-select-grid-card-selected-surface-hover`, `--dk-component-select-grid-card-selected-border`, `--dk-component-select-grid-label-font-size`, `--dk-component-select-grid-label-line-height`, `--dk-component-select-grid-card-selected-width`, `--dk-component-select-icons-menu-width`, `--dk-component-select-icons-menu-max-height`, `--dk-component-select-icons-columns`, `--dk-component-select-icons-gap`, `--dk-component-select-icons-cell-radius`, `--dk-component-select-icons-glyph-size`, `--dk-component-select-icons-glyph`, `--dk-component-select-icons-selected-surface`, `--dk-component-select-icons-selected-surface-hover`, `--dk-component-select-icons-selected-glyph`, `--dk-component-select-filters-gap`, `--dk-component-select-filters-padding-block`, `--dk-component-select-filter-padding-block`, `--dk-component-select-filter-padding-inline`, `--dk-component-select-filter-radius`, `--dk-component-select-filter-border-width`, `--dk-component-select-filter-font-size`, `--dk-component-select-filter-line-height`, `--dk-component-select-filter-font-weight`, `--dk-component-select-filter-surface`, `--dk-component-select-filter-surface-hover`, `--dk-component-select-filter-surface-active`, `--dk-component-select-filter-border`, `--dk-component-select-filter-border-hover`, `--dk-component-select-filter-text`, `--dk-component-select-filter-text-hover`, `--dk-component-select-filter-selected-surface`, `--dk-component-select-filter-selected-surface-hover`, `--dk-component-select-filter-selected-text`, `--dk-component-select-option-icon-color`, `--dk-component-select-option-icon-color-hover`, `--dk-component-select-check-size`, `--dk-component-select-check-color`, `--dk-component-select-option-surface-selected`, `--dk-component-select-check-color-selected`, `--dk-component-select-check-stroke-width`, `--dk-component-select-option-surface-hover`, `--dk-component-select-option-surface-active`, `--dk-component-select-option-disabled-color`, `--dk-component-select-option-disabled-icon-color`, `--dk-component-select-option-desc-color`, `--dk-component-select-option-desc-font-weight`, `--dk-component-select-option-desc-gap`, `--dk-component-select-group-font-size`, `--dk-component-select-group-line-height`, `--dk-component-select-group-letter-spacing`, `--dk-component-select-group-font-weight`, `--dk-component-select-group-color`, `--dk-component-select-group-padding-block`, `--dk-component-select-group-gap`, `--dk-component-select-search-padding-block`, `--dk-component-select-search-gap`, `--dk-component-select-search-font-size`, `--dk-component-select-search-line-height`, `--dk-component-select-small-search-font-size`, `--dk-component-select-small-search-line-height`, `--dk-component-select-large-search-font-size`, `--dk-component-select-large-search-line-height`, `--dk-component-select-search-color`, `--dk-component-select-search-placeholder-color`, `--dk-component-select-search-icon-size`, `--dk-component-select-search-icon-color`, `--dk-component-select-search-border`, `--dk-component-select-search-border-width`, `--dk-component-select-search-focus-border`, `--dk-component-select-search-focus-width`, `--dk-component-select-search-focus-icon-color`, `--dk-component-select-sheet-search-padding-block`, `--dk-component-select-loading-color`, `--dk-component-select-loading-spinner-size`, `--dk-component-select-loading-spinner-track`, `--dk-component-select-loading-spinner-head`, `--dk-component-select-loading-duration`, `--dk-component-select-clear-size`, `--dk-component-select-clear-icon-size`, `--dk-component-select-clear-radius`, `--dk-component-select-clear-surface-hover`, `--dk-component-select-clear-surface-active`, `--dk-component-select-clear-color`, `--dk-component-select-clear-color-hover`, `--dk-component-select-clear-color-active`, `--dk-component-select-clear-transform-scale-active`, `--dk-component-select-option-meta-color`, `--dk-component-select-empty-color`, `--dk-component-select-duration`, `--dk-component-select-duration-fast`, `--dk-component-select-easing`
|
package/manifest/index.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schema": 1,
|
|
3
|
-
"version": "23.
|
|
4
|
-
"built": "2026-10-
|
|
3
|
+
"version": "23.15.0",
|
|
4
|
+
"built": "2026-10-31",
|
|
5
5
|
"components": [
|
|
6
6
|
{
|
|
7
7
|
"id": "accordion",
|
|
@@ -1427,6 +1427,26 @@
|
|
|
1427
1427
|
"components": [],
|
|
1428
1428
|
"tokens": []
|
|
1429
1429
|
}
|
|
1430
|
+
},
|
|
1431
|
+
"23.14.4": {
|
|
1432
|
+
"added": {
|
|
1433
|
+
"components": [],
|
|
1434
|
+
"tokens": []
|
|
1435
|
+
},
|
|
1436
|
+
"removed": {
|
|
1437
|
+
"components": [],
|
|
1438
|
+
"tokens": []
|
|
1439
|
+
}
|
|
1440
|
+
},
|
|
1441
|
+
"23.15.0": {
|
|
1442
|
+
"added": {
|
|
1443
|
+
"components": [],
|
|
1444
|
+
"tokens": []
|
|
1445
|
+
},
|
|
1446
|
+
"removed": {
|
|
1447
|
+
"components": [],
|
|
1448
|
+
"tokens": []
|
|
1449
|
+
}
|
|
1430
1450
|
}
|
|
1431
1451
|
}
|
|
1432
1452
|
}
|
package/manifest/setup.md
CHANGED
|
@@ -54,23 +54,23 @@ A page with no npm install (a plain HTML prototype, a slide deck) links this ver
|
|
|
54
54
|
Both scripts are deferred, and an icon script goes after `components.js`, which replaces the icon registry when it runs: an icon script that runs first loses its set. Every tag carries its file's `integrity` from the table below and `crossorigin="anonymous"`, so a file whose bytes changed never loads. In this order:
|
|
55
55
|
|
|
56
56
|
```html
|
|
57
|
-
<link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.
|
|
58
|
-
<script src="https://storage.googleapis.com/drift-kit-public/23.
|
|
59
|
-
<script src="https://storage.googleapis.com/drift-kit-public/23.
|
|
57
|
+
<link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.15.0/drift-kit.css" integrity="sha384-Hu+rvOwyP5ZRWd2z1kqBF0c/gLLIDrY0ByQdsMcKz5+TFJe14PtTxmbO/7EJ16Mb" crossorigin="anonymous" />
|
|
58
|
+
<script src="https://storage.googleapis.com/drift-kit-public/23.15.0/components.js" integrity="sha384-11gnEDNpNAEnR0zK9xb5gZ5OpuyTfQTqpedTyjnsN5Y2ssWWWlHW9IkShk7gdxUy" crossorigin="anonymous" defer></script>
|
|
59
|
+
<script src="https://storage.googleapis.com/drift-kit-public/23.15.0/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
|
|
60
60
|
```
|
|
61
61
|
|
|
62
62
|
| File | Address | Integrity |
|
|
63
63
|
|---|---|---|
|
|
64
|
-
| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
65
|
-
| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
66
|
-
| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
67
|
-
| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
68
|
-
| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
69
|
-
| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
70
|
-
| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
71
|
-
| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
72
|
-
| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
73
|
-
| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
64
|
+
| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.15.0/drift-kit.css` | `sha384-Hu+rvOwyP5ZRWd2z1kqBF0c/gLLIDrY0ByQdsMcKz5+TFJe14PtTxmbO/7EJ16Mb` |
|
|
65
|
+
| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.15.0/drift-kit.min.css` | `sha384-zRseOjqteJqcJBottd2D3j5rZFu3/xtDWnuQEE7UwMjg4EheF8oX32zKpmWC3vQY` |
|
|
66
|
+
| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.15.0/components.js` | `sha384-11gnEDNpNAEnR0zK9xb5gZ5OpuyTfQTqpedTyjnsN5Y2ssWWWlHW9IkShk7gdxUy` |
|
|
67
|
+
| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.15.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
|
|
68
|
+
| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.15.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
|
|
69
|
+
| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.15.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
|
|
70
|
+
| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.15.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
|
|
71
|
+
| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.15.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
|
|
72
|
+
| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.15.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
|
|
73
|
+
| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.15.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
|
|
74
74
|
|
|
75
75
|
### Integrity for 23.4.0
|
|
76
76
|
|
|
@@ -98,5 +98,5 @@ The behaviour script initialises every component on the page when it loads. Mark
|
|
|
98
98
|
The kit class names the drift-critique capture script keys on, at this version. Pass them to it as `--kit '<this JSON>'` so its alignment and reduced-motion checks read this version's names.
|
|
99
99
|
|
|
100
100
|
```json
|
|
101
|
-
{"version":"23.
|
|
101
|
+
{"version":"23.15.0","field":".dk-component-input__field","trigger":".dk-component-select__trigger","button":".dk-component-button","iconButton":".dk-component-icon-button","spinners":[".dk-component-loading-spinner",".dk-component-button__spinner"],"componentPrefix":"dk-component-","fieldRoot":"dk-component-input"}
|
|
102
102
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@karmo-co/drift-kit-reference",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.15.0",
|
|
4
4
|
"description": "Reference documentation of Karmo's private Drift design system, for Karmo's Claude skills. Documentation only.",
|
|
5
5
|
"bin": {
|
|
6
6
|
"drift-kit-ref": "bin/drift-kit-ref.js"
|