@sebgroup/green-core 3.25.2 → 3.26.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/components/checkbox/checkbox-group/checkbox-group.component.js +4 -2
- package/components/checkbox/checkbox.component.js +11 -0
- package/components/datepicker/date-part-spinner.d.ts +4 -0
- package/components/datepicker/date-part-spinner.js +6 -0
- package/components/datepicker/datepicker.component.d.ts +1 -0
- package/components/datepicker/datepicker.component.js +92 -57
- package/components/datepicker/datepicker.styles.js +4 -0
- package/components/dropdown/dropdown.component.js +13 -1
- package/components/dropdown/option.component.js +1 -0
- package/components/filter-chips/filter-chips.component.js +1 -0
- package/components/form/form-control.d.ts +5 -0
- package/components/form/form-control.js +7 -0
- package/components/input/input.component.js +7 -2
- package/components/radio/radio-group/radio-group.component.js +8 -2
- package/components/radio/radio.component.d.ts +9 -0
- package/components/radio/radio.component.js +9 -3
- package/components/select/select.component.js +40 -13
- package/components/select/select.styles.js +4 -0
- package/components/switch/switch.component.js +22 -4
- package/components/switch/switch.styles.js +34 -0
- package/components/table/table.component.js +2 -1
- package/components/textarea/textarea.component.js +6 -1
- package/custom-elements.json +21811 -21306
- package/gds-element.js +1 -1
- package/generated/mcp/button/api.md +1 -0
- package/generated/mcp/checkbox/api.md +1 -0
- package/generated/mcp/checkbox-group/api.md +1 -0
- package/generated/mcp/components.json +1 -1
- package/generated/mcp/datepicker/api.md +1 -0
- package/generated/mcp/dropdown/api.md +1 -0
- package/generated/mcp/fab/api.md +1 -0
- package/generated/mcp/filter-chips/api.md +1 -0
- package/generated/mcp/icons.json +1 -1
- package/generated/mcp/index.json +1 -1
- package/generated/mcp/input/api.md +1 -0
- package/generated/mcp/radio/api.md +1 -0
- package/generated/mcp/radio-group/api.md +1 -0
- package/generated/mcp/switch/api.md +1 -0
- package/generated/mcp/textarea/api.md +1 -0
- package/generated/mcp/tokens.json +1 -1
- package/generated/react/alert/index.d.ts +2 -2
- package/generated/react/avatar/index.d.ts +2 -2
- package/generated/react/avatar-group/index.d.ts +2 -2
- package/generated/react/backdrop/index.d.ts +2 -2
- package/generated/react/badge/index.d.ts +2 -2
- package/generated/react/blur/index.d.ts +2 -2
- package/generated/react/breadcrumb/index.d.ts +2 -2
- package/generated/react/breadcrumbs/index.d.ts +2 -2
- package/generated/react/button/index.d.ts +3 -2
- package/generated/react/calendar/index.d.ts +2 -2
- package/generated/react/card/index.d.ts +2 -2
- package/generated/react/card-linked/index.d.ts +2 -2
- package/generated/react/card-pattern-01/index.d.ts +2 -2
- package/generated/react/checkbox/index.d.ts +3 -2
- package/generated/react/checkbox-group/index.d.ts +3 -2
- package/generated/react/coachmark/index.d.ts +2 -2
- package/generated/react/context-menu/index.d.ts +2 -2
- package/generated/react/datepicker/index.d.ts +3 -2
- package/generated/react/details/index.d.ts +2 -2
- package/generated/react/dialog/index.d.ts +2 -2
- package/generated/react/div/index.d.ts +2 -2
- package/generated/react/divider/index.d.ts +2 -2
- package/generated/react/dropdown/index.d.ts +3 -2
- package/generated/react/fab/index.d.ts +3 -2
- package/generated/react/filter-chip/index.d.ts +2 -2
- package/generated/react/filter-chips/index.d.ts +3 -2
- package/generated/react/flex/index.d.ts +2 -2
- package/generated/react/form-summary/index.d.ts +2 -2
- package/generated/react/formatted-account/index.d.ts +2 -2
- package/generated/react/formatted-date/index.d.ts +2 -2
- package/generated/react/formatted-number/index.d.ts +2 -2
- package/generated/react/grid/index.d.ts +2 -2
- package/generated/react/grouped-list/index.d.ts +2 -2
- package/generated/react/icons/icon-ai/index.d.ts +2 -2
- package/generated/react/icons/icon-airplane-up/index.d.ts +2 -2
- package/generated/react/icons/icon-archive/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-bottom-top/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-box-left/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-box-left-alt/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-box-right/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-down/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-inbox/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-left/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-left-right/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-out-of-box/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-right/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-right-circle/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-right-down-circle/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-right-up-circle/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-rotate-clockwise/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-rotate-counter-clockwise/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-rotate-left-right/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-rotate-right-left/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-share-left/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-share-right/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-split/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-up/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-wall-down/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-wall-left/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-wall-right/index.d.ts +2 -2
- package/generated/react/icons/icon-arrow-wall-up/index.d.ts +2 -2
- package/generated/react/icons/icon-arrows-repeat-right/index.d.ts +2 -2
- package/generated/react/icons/icon-asterisk/index.d.ts +2 -2
- package/generated/react/icons/icon-at/index.d.ts +2 -2
- package/generated/react/icons/icon-back/index.d.ts +2 -2
- package/generated/react/icons/icon-backward/index.d.ts +2 -2
- package/generated/react/icons/icon-bag/index.d.ts +2 -2
- package/generated/react/icons/icon-bank/index.d.ts +2 -2
- package/generated/react/icons/icon-banknote/index.d.ts +2 -2
- package/generated/react/icons/icon-banknote-2/index.d.ts +2 -2
- package/generated/react/icons/icon-barcode/index.d.ts +2 -2
- package/generated/react/icons/icon-bars-three/index.d.ts +2 -2
- package/generated/react/icons/icon-bars-two/index.d.ts +2 -2
- package/generated/react/icons/icon-basket/index.d.ts +2 -2
- package/generated/react/icons/icon-battery-loading/index.d.ts +2 -2
- package/generated/react/icons/icon-bell/index.d.ts +2 -2
- package/generated/react/icons/icon-block/index.d.ts +2 -2
- package/generated/react/icons/icon-book/index.d.ts +2 -2
- package/generated/react/icons/icon-bookmark/index.d.ts +2 -2
- package/generated/react/icons/icon-bookmark-check/index.d.ts +2 -2
- package/generated/react/icons/icon-bookmark-delete/index.d.ts +2 -2
- package/generated/react/icons/icon-bookmark-plus/index.d.ts +2 -2
- package/generated/react/icons/icon-bookmark-remove/index.d.ts +2 -2
- package/generated/react/icons/icon-books/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-app-store/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-apple-music/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-bankid/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-chrome/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-facebook/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-figma/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-firefox/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-github/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-green/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-instagram/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-linkedin/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-play-store/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-rss-feed/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-seb/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-spotify/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-storybook/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-swish-word/index.d.ts +2 -2
- package/generated/react/icons/icon-brand-x/index.d.ts +2 -2
- package/generated/react/icons/icon-brush/index.d.ts +2 -2
- package/generated/react/icons/icon-bubble-annotation/index.d.ts +2 -2
- package/generated/react/icons/icon-bubbles/index.d.ts +2 -2
- package/generated/react/icons/icon-buildings/index.d.ts +2 -2
- package/generated/react/icons/icon-bullet-list/index.d.ts +2 -2
- package/generated/react/icons/icon-calculator/index.d.ts +2 -2
- package/generated/react/icons/icon-calendar/index.d.ts +2 -2
- package/generated/react/icons/icon-calendar-check/index.d.ts +2 -2
- package/generated/react/icons/icon-calendar-repeat/index.d.ts +2 -2
- package/generated/react/icons/icon-calender-add/index.d.ts +2 -2
- package/generated/react/icons/icon-call/index.d.ts +2 -2
- package/generated/react/icons/icon-car/index.d.ts +2 -2
- package/generated/react/icons/icon-carussel/index.d.ts +2 -2
- package/generated/react/icons/icon-chain-link/index.d.ts +2 -2
- package/generated/react/icons/icon-chain-link-broken/index.d.ts +2 -2
- package/generated/react/icons/icon-chart-two/index.d.ts +2 -2
- package/generated/react/icons/icon-checklist/index.d.ts +2 -2
- package/generated/react/icons/icon-checkmark/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-bottom/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-double-down/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-double-left/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-double-right/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-double-up/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-down-small/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-grabber-vertical/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-grabber-vertical-reversed/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-left/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-left-small/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-right/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-right-small/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-top/index.d.ts +2 -2
- package/generated/react/icons/icon-chevron-top-small/index.d.ts +2 -2
- package/generated/react/icons/icon-circle-ban/index.d.ts +2 -2
- package/generated/react/icons/icon-circle-check/index.d.ts +2 -2
- package/generated/react/icons/icon-circle-dots/index.d.ts +2 -2
- package/generated/react/icons/icon-circle-info/index.d.ts +2 -2
- package/generated/react/icons/icon-circle-minus/index.d.ts +2 -2
- package/generated/react/icons/icon-circle-placeholder-on/index.d.ts +2 -2
- package/generated/react/icons/icon-circle-plus/index.d.ts +2 -2
- package/generated/react/icons/icon-circle-questionmark/index.d.ts +2 -2
- package/generated/react/icons/icon-circle-x/index.d.ts +2 -2
- package/generated/react/icons/icon-circles-three/index.d.ts +2 -2
- package/generated/react/icons/icon-clock/index.d.ts +2 -2
- package/generated/react/icons/icon-cloud-download/index.d.ts +2 -2
- package/generated/react/icons/icon-cloud-upload/index.d.ts +2 -2
- package/generated/react/icons/icon-cloudy-sun/index.d.ts +2 -2
- package/generated/react/icons/icon-code/index.d.ts +2 -2
- package/generated/react/icons/icon-code-brackets/index.d.ts +2 -2
- package/generated/react/icons/icon-compass-round/index.d.ts +2 -2
- package/generated/react/icons/icon-cookies/index.d.ts +2 -2
- package/generated/react/icons/icon-copy/index.d.ts +2 -2
- package/generated/react/icons/icon-credit-card/index.d.ts +2 -2
- package/generated/react/icons/icon-credit-card-add/index.d.ts +2 -2
- package/generated/react/icons/icon-cross-large/index.d.ts +2 -2
- package/generated/react/icons/icon-cross-small/index.d.ts +2 -2
- package/generated/react/icons/icon-cup-hot/index.d.ts +2 -2
- package/generated/react/icons/icon-cursor/index.d.ts +2 -2
- package/generated/react/icons/icon-details/index.d.ts +2 -2
- package/generated/react/icons/icon-devices/index.d.ts +2 -2
- package/generated/react/icons/icon-direction/index.d.ts +2 -2
- package/generated/react/icons/icon-dollar/index.d.ts +2 -2
- package/generated/react/icons/icon-dot-grid-one-horizontal/index.d.ts +2 -2
- package/generated/react/icons/icon-dot-grid-one-vertical/index.d.ts +2 -2
- package/generated/react/icons/icon-dot-grid-three/index.d.ts +2 -2
- package/generated/react/icons/icon-dot-grid-two/index.d.ts +2 -2
- package/generated/react/icons/icon-email/index.d.ts +2 -2
- package/generated/react/icons/icon-emoji-angry/index.d.ts +2 -2
- package/generated/react/icons/icon-emoji-neutral/index.d.ts +2 -2
- package/generated/react/icons/icon-emoji-sad/index.d.ts +2 -2
- package/generated/react/icons/icon-emoji-smile/index.d.ts +2 -2
- package/generated/react/icons/icon-emoji-smiley/index.d.ts +2 -2
- package/generated/react/icons/icon-euro/index.d.ts +2 -2
- package/generated/react/icons/icon-expand/index.d.ts +2 -2
- package/generated/react/icons/icon-eye-open/index.d.ts +2 -2
- package/generated/react/icons/icon-eye-slash/index.d.ts +2 -2
- package/generated/react/icons/icon-fashion/index.d.ts +2 -2
- package/generated/react/icons/icon-fast-forward/index.d.ts +2 -2
- package/generated/react/icons/icon-file-bend/index.d.ts +2 -2
- package/generated/react/icons/icon-file-chart/index.d.ts +2 -2
- package/generated/react/icons/icon-file-text/index.d.ts +2 -2
- package/generated/react/icons/icon-files/index.d.ts +2 -2
- package/generated/react/icons/icon-filter/index.d.ts +2 -2
- package/generated/react/icons/icon-flag/index.d.ts +2 -2
- package/generated/react/icons/icon-floppy-disk/index.d.ts +2 -2
- package/generated/react/icons/icon-focus/index.d.ts +2 -2
- package/generated/react/icons/icon-folder/index.d.ts +2 -2
- package/generated/react/icons/icon-folder-add-right/index.d.ts +2 -2
- package/generated/react/icons/icon-fullscreen/index.d.ts +2 -2
- package/generated/react/icons/icon-gift/index.d.ts +2 -2
- package/generated/react/icons/icon-globus/index.d.ts +2 -2
- package/generated/react/icons/icon-graduate-cap/index.d.ts +2 -2
- package/generated/react/icons/icon-green-power/index.d.ts +2 -2
- package/generated/react/icons/icon-group/index.d.ts +2 -2
- package/generated/react/icons/icon-growth/index.d.ts +2 -2
- package/generated/react/icons/icon-headphones/index.d.ts +2 -2
- package/generated/react/icons/icon-heart/index.d.ts +2 -2
- package/generated/react/icons/icon-heart-beat/index.d.ts +2 -2
- package/generated/react/icons/icon-history/index.d.ts +2 -2
- package/generated/react/icons/icon-home-energy-one/index.d.ts +2 -2
- package/generated/react/icons/icon-home-energy-two/index.d.ts +2 -2
- package/generated/react/icons/icon-home-open/index.d.ts +2 -2
- package/generated/react/icons/icon-home-roof/index.d.ts +2 -2
- package/generated/react/icons/icon-horizontal-alignment-bottom/index.d.ts +2 -2
- package/generated/react/icons/icon-hourglass/index.d.ts +2 -2
- package/generated/react/icons/icon-images/index.d.ts +2 -2
- package/generated/react/icons/icon-inbox-empty/index.d.ts +2 -2
- package/generated/react/icons/icon-industry/index.d.ts +2 -2
- package/generated/react/icons/icon-jpg/index.d.ts +2 -2
- package/generated/react/icons/icon-key/index.d.ts +2 -2
- package/generated/react/icons/icon-knife-spoon/index.d.ts +2 -2
- package/generated/react/icons/icon-lab/index.d.ts +2 -2
- package/generated/react/icons/icon-law/index.d.ts +2 -2
- package/generated/react/icons/icon-leisure/index.d.ts +2 -2
- package/generated/react/icons/icon-light-bulb-simple/index.d.ts +2 -2
- package/generated/react/icons/icon-lightning/index.d.ts +2 -2
- package/generated/react/icons/icon-line-chart-four/index.d.ts +2 -2
- package/generated/react/icons/icon-line-chart-one/index.d.ts +2 -2
- package/generated/react/icons/icon-line-chart-three/index.d.ts +2 -2
- package/generated/react/icons/icon-line-chart-two/index.d.ts +2 -2
- package/generated/react/icons/icon-lock/index.d.ts +2 -2
- package/generated/react/icons/icon-macbook-air/index.d.ts +2 -2
- package/generated/react/icons/icon-magnifying-glass/index.d.ts +2 -2
- package/generated/react/icons/icon-map-pin/index.d.ts +2 -2
- package/generated/react/icons/icon-megaphone/index.d.ts +2 -2
- package/generated/react/icons/icon-menu-sidebar/index.d.ts +2 -2
- package/generated/react/icons/icon-mic-off/index.d.ts +2 -2
- package/generated/react/icons/icon-mic-on/index.d.ts +2 -2
- package/generated/react/icons/icon-minimize/index.d.ts +2 -2
- package/generated/react/icons/icon-minus-large/index.d.ts +2 -2
- package/generated/react/icons/icon-minus-small/index.d.ts +2 -2
- package/generated/react/icons/icon-money-hand/index.d.ts +2 -2
- package/generated/react/icons/icon-moneybag/index.d.ts +2 -2
- package/generated/react/icons/icon-moon/index.d.ts +2 -2
- package/generated/react/icons/icon-mute/index.d.ts +2 -2
- package/generated/react/icons/icon-newspaper/index.d.ts +2 -2
- package/generated/react/icons/icon-office/index.d.ts +2 -2
- package/generated/react/icons/icon-page-add/index.d.ts +2 -2
- package/generated/react/icons/icon-paper-plane-top-right/index.d.ts +2 -2
- package/generated/react/icons/icon-paperclip/index.d.ts +2 -2
- package/generated/react/icons/icon-pause/index.d.ts +2 -2
- package/generated/react/icons/icon-pdf/index.d.ts +2 -2
- package/generated/react/icons/icon-pencil-sign/index.d.ts +2 -2
- package/generated/react/icons/icon-pencil-sparkle/index.d.ts +2 -2
- package/generated/react/icons/icon-pencil-wave/index.d.ts +2 -2
- package/generated/react/icons/icon-pension/index.d.ts +2 -2
- package/generated/react/icons/icon-people/index.d.ts +2 -2
- package/generated/react/icons/icon-people-a11y/index.d.ts +2 -2
- package/generated/react/icons/icon-people-add/index.d.ts +2 -2
- package/generated/react/icons/icon-people-added/index.d.ts +2 -2
- package/generated/react/icons/icon-people-circle/index.d.ts +2 -2
- package/generated/react/icons/icon-people-copy/index.d.ts +2 -2
- package/generated/react/icons/icon-people-profile/index.d.ts +2 -2
- package/generated/react/icons/icon-people-remove/index.d.ts +2 -2
- package/generated/react/icons/icon-percent/index.d.ts +2 -2
- package/generated/react/icons/icon-phone/index.d.ts +2 -2
- package/generated/react/icons/icon-pie-chart/index.d.ts +2 -2
- package/generated/react/icons/icon-piggy-bank/index.d.ts +2 -2
- package/generated/react/icons/icon-pin/index.d.ts +2 -2
- package/generated/react/icons/icon-pinch/index.d.ts +2 -2
- package/generated/react/icons/icon-play/index.d.ts +2 -2
- package/generated/react/icons/icon-play-circle/index.d.ts +2 -2
- package/generated/react/icons/icon-plus-large/index.d.ts +2 -2
- package/generated/react/icons/icon-plus-small/index.d.ts +2 -2
- package/generated/react/icons/icon-png/index.d.ts +2 -2
- package/generated/react/icons/icon-poop/index.d.ts +2 -2
- package/generated/react/icons/icon-postcard/index.d.ts +2 -2
- package/generated/react/icons/icon-pound/index.d.ts +2 -2
- package/generated/react/icons/icon-power/index.d.ts +2 -2
- package/generated/react/icons/icon-power-plant/index.d.ts +2 -2
- package/generated/react/icons/icon-printer/index.d.ts +2 -2
- package/generated/react/icons/icon-push/index.d.ts +2 -2
- package/generated/react/icons/icon-qr-code/index.d.ts +2 -2
- package/generated/react/icons/icon-rainy/index.d.ts +2 -2
- package/generated/react/icons/icon-raising-hand/index.d.ts +2 -2
- package/generated/react/icons/icon-reading-list/index.d.ts +2 -2
- package/generated/react/icons/icon-receipt-bill/index.d.ts +2 -2
- package/generated/react/icons/icon-receiption-bell/index.d.ts +2 -2
- package/generated/react/icons/icon-record/index.d.ts +2 -2
- package/generated/react/icons/icon-refund/index.d.ts +2 -2
- package/generated/react/icons/icon-robot/index.d.ts +2 -2
- package/generated/react/icons/icon-rocket/index.d.ts +2 -2
- package/generated/react/icons/icon-run-shortcut/index.d.ts +2 -2
- package/generated/react/icons/icon-safari/index.d.ts +2 -2
- package/generated/react/icons/icon-satellite/index.d.ts +2 -2
- package/generated/react/icons/icon-school/index.d.ts +2 -2
- package/generated/react/icons/icon-scissors/index.d.ts +2 -2
- package/generated/react/icons/icon-search-menu/index.d.ts +2 -2
- package/generated/react/icons/icon-settings-gear/index.d.ts +2 -2
- package/generated/react/icons/icon-settings-slider-hor/index.d.ts +2 -2
- package/generated/react/icons/icon-settings-slider-ver/index.d.ts +2 -2
- package/generated/react/icons/icon-shapes/index.d.ts +2 -2
- package/generated/react/icons/icon-share/index.d.ts +2 -2
- package/generated/react/icons/icon-shield/index.d.ts +2 -2
- package/generated/react/icons/icon-shield-checked/index.d.ts +2 -2
- package/generated/react/icons/icon-shield-crossed/index.d.ts +2 -2
- package/generated/react/icons/icon-shopping-bag/index.d.ts +2 -2
- package/generated/react/icons/icon-signature/index.d.ts +2 -2
- package/generated/react/icons/icon-smartwatch/index.d.ts +2 -2
- package/generated/react/icons/icon-solar/index.d.ts +2 -2
- package/generated/react/icons/icon-sort/index.d.ts +2 -2
- package/generated/react/icons/icon-sort-ascending/index.d.ts +2 -2
- package/generated/react/icons/icon-sort-descending/index.d.ts +2 -2
- package/generated/react/icons/icon-sort-down/index.d.ts +2 -2
- package/generated/react/icons/icon-sort-up/index.d.ts +2 -2
- package/generated/react/icons/icon-square-arrow-top-right/index.d.ts +2 -2
- package/generated/react/icons/icon-square-behind-square/index.d.ts +2 -2
- package/generated/react/icons/icon-square-grid-circle/index.d.ts +2 -2
- package/generated/react/icons/icon-square-placeholder/index.d.ts +2 -2
- package/generated/react/icons/icon-star/index.d.ts +2 -2
- package/generated/react/icons/icon-store/index.d.ts +2 -2
- package/generated/react/icons/icon-sun/index.d.ts +2 -2
- package/generated/react/icons/icon-sunset-arrow-down/index.d.ts +2 -2
- package/generated/react/icons/icon-tag/index.d.ts +2 -2
- package/generated/react/icons/icon-target-arrow/index.d.ts +2 -2
- package/generated/react/icons/icon-television/index.d.ts +2 -2
- package/generated/react/icons/icon-tennis/index.d.ts +2 -2
- package/generated/react/icons/icon-text-edit/index.d.ts +2 -2
- package/generated/react/icons/icon-thermostat/index.d.ts +2 -2
- package/generated/react/icons/icon-thumbs-down/index.d.ts +2 -2
- package/generated/react/icons/icon-thumbs-up/index.d.ts +2 -2
- package/generated/react/icons/icon-ticket/index.d.ts +2 -2
- package/generated/react/icons/icon-trading-view-candles/index.d.ts +2 -2
- package/generated/react/icons/icon-trash-can/index.d.ts +2 -2
- package/generated/react/icons/icon-tree/index.d.ts +2 -2
- package/generated/react/icons/icon-trending-five/index.d.ts +2 -2
- package/generated/react/icons/icon-trending-four/index.d.ts +2 -2
- package/generated/react/icons/icon-trending-one/index.d.ts +2 -2
- package/generated/react/icons/icon-trending-three/index.d.ts +2 -2
- package/generated/react/icons/icon-trending-two/index.d.ts +2 -2
- package/generated/react/icons/icon-triangle-exclamation/index.d.ts +2 -2
- package/generated/react/icons/icon-truck/index.d.ts +2 -2
- package/generated/react/icons/icon-umbrella-security/index.d.ts +2 -2
- package/generated/react/icons/icon-unlocked/index.d.ts +2 -2
- package/generated/react/icons/icon-volume-full/index.d.ts +2 -2
- package/generated/react/icons/icon-volume-half/index.d.ts +2 -2
- package/generated/react/icons/icon-volume-off/index.d.ts +2 -2
- package/generated/react/icons/icon-wallet/index.d.ts +2 -2
- package/generated/react/icons/icon-warning-sign/index.d.ts +2 -2
- package/generated/react/icons/icon-wifi-full/index.d.ts +2 -2
- package/generated/react/icons/icon-youtube/index.d.ts +2 -2
- package/generated/react/icons/icon-zap/index.d.ts +2 -2
- package/generated/react/icons/icon-zoom-in/index.d.ts +2 -2
- package/generated/react/icons/icon-zoom-out/index.d.ts +2 -2
- package/generated/react/img/index.d.ts +2 -2
- package/generated/react/index.d.ts +3 -3
- package/generated/react/index.js +3 -3
- package/generated/react/input/index.d.ts +3 -2
- package/generated/react/link/index.d.ts +2 -2
- package/generated/react/list/index.d.ts +2 -2
- package/generated/react/list-item/index.d.ts +2 -2
- package/generated/react/list-item-pattern-01/index.d.ts +2 -2
- package/generated/react/mask/index.d.ts +2 -2
- package/generated/react/menu-button/index.d.ts +2 -2
- package/generated/react/menu-heading/index.d.ts +2 -2
- package/generated/react/menu-item/index.d.ts +2 -2
- package/generated/react/option/index.d.ts +2 -2
- package/generated/react/pagination/index.d.ts +2 -2
- package/generated/react/popover/index.d.ts +2 -2
- package/generated/react/radio/index.d.ts +3 -2
- package/generated/react/radio-group/index.d.ts +3 -2
- package/generated/react/rich-text/index.d.ts +2 -2
- package/generated/react/segment/index.d.ts +2 -2
- package/generated/react/segmented-control/index.d.ts +2 -2
- package/generated/react/select/index.d.ts +3 -2
- package/generated/react/sensitive-account/index.d.ts +2 -2
- package/generated/react/sensitive-date/index.d.ts +2 -2
- package/generated/react/sensitive-number/index.d.ts +2 -2
- package/generated/react/signal/index.d.ts +2 -2
- package/generated/react/slider/index.d.ts +2 -2
- package/generated/react/spinner/index.d.ts +2 -2
- package/generated/react/switch/index.d.ts +3 -2
- package/generated/react/tab/index.d.ts +2 -2
- package/generated/react/tab-panel/index.d.ts +2 -2
- package/generated/react/table/index.d.ts +2 -2
- package/generated/react/tabs/index.d.ts +2 -2
- package/generated/react/text/index.d.ts +2 -2
- package/generated/react/textarea/index.d.ts +3 -2
- package/generated/react/theme/index.d.ts +2 -2
- package/generated/react/video/index.d.ts +2 -2
- package/package.json +1 -1
- package/patterns/list-item-pattern-01/list-item-pattern-01.component.js +1 -0
- package/primitives/field-base/field-base.component.d.ts +4 -0
- package/primitives/field-base/field-base.component.js +40 -8
- package/primitives/field-base/field-base.styles.js +6 -1
- package/primitives/field-base/field-base.trans.styles.scss.js +1 -1
- package/shared-styles/rbcb-toggle.style.js +25 -3
- package/shared-styles/rbcb-toggle.template.d.ts +1 -0
- package/shared-styles/rbcb-toggle.template.js +2 -1
- package/utils/helpers/custom-element-scoping.js +1 -1
|
@@ -454,7 +454,7 @@ export declare const GdsText: {
|
|
|
454
454
|
tabIndex?: number | undefined;
|
|
455
455
|
blur?: (() => void) | undefined;
|
|
456
456
|
focus?: ((options?: FocusOptions) => void) | undefined;
|
|
457
|
-
}, "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "role" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-label" | "property" | "content" | "color" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-
|
|
457
|
+
}, "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "role" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-label" | "property" | "content" | "color" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-readonly" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-setsize" | "aria-sort" | "aria-valuenow" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture">, "children"> & {
|
|
458
458
|
children?: React.ReactNode;
|
|
459
459
|
} & {
|
|
460
460
|
dir?: string | undefined | undefined;
|
|
@@ -496,6 +496,7 @@ export declare const GdsText: {
|
|
|
496
496
|
"aria-description"?: string | undefined | undefined;
|
|
497
497
|
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
|
|
498
498
|
"aria-describedby"?: string | undefined | undefined;
|
|
499
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
499
500
|
"aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
|
|
500
501
|
onToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
|
|
501
502
|
resource?: string | undefined | undefined;
|
|
@@ -553,7 +554,6 @@ export declare const GdsText: {
|
|
|
553
554
|
"aria-placeholder"?: string | undefined | undefined;
|
|
554
555
|
"aria-posinset"?: number | undefined | undefined;
|
|
555
556
|
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
556
|
-
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
557
557
|
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
|
|
558
558
|
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
559
559
|
"aria-roledescription"?: string | undefined | undefined;
|
|
@@ -74,6 +74,7 @@ export declare const GdsTextarea: {
|
|
|
74
74
|
value?: string | undefined;
|
|
75
75
|
name?: string;
|
|
76
76
|
disabled?: boolean;
|
|
77
|
+
readonly?: boolean;
|
|
77
78
|
readonly form?: HTMLFormElement | null | undefined;
|
|
78
79
|
readonly validity?: ValidityState | undefined;
|
|
79
80
|
readonly validationMessage?: string | undefined;
|
|
@@ -457,7 +458,7 @@ export declare const GdsTextarea: {
|
|
|
457
458
|
nonce?: string | undefined;
|
|
458
459
|
tabIndex?: number | undefined;
|
|
459
460
|
blur?: (() => void) | undefined;
|
|
460
|
-
}, "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "role" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-label" | "property" | "content" | "color" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-
|
|
461
|
+
}, "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "role" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-label" | "property" | "content" | "color" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-readonly" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-setsize" | "aria-sort" | "aria-valuenow" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture">, "children"> & {
|
|
461
462
|
children?: React.ReactNode;
|
|
462
463
|
} & {
|
|
463
464
|
dir?: string | undefined | undefined;
|
|
@@ -499,6 +500,7 @@ export declare const GdsTextarea: {
|
|
|
499
500
|
"aria-description"?: string | undefined | undefined;
|
|
500
501
|
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
|
|
501
502
|
"aria-describedby"?: string | undefined | undefined;
|
|
503
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
502
504
|
"aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
|
|
503
505
|
onToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
|
|
504
506
|
resource?: string | undefined | undefined;
|
|
@@ -556,7 +558,6 @@ export declare const GdsTextarea: {
|
|
|
556
558
|
"aria-placeholder"?: string | undefined | undefined;
|
|
557
559
|
"aria-posinset"?: number | undefined | undefined;
|
|
558
560
|
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
559
|
-
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
560
561
|
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
|
|
561
562
|
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
562
563
|
"aria-roledescription"?: string | undefined | undefined;
|
|
@@ -397,7 +397,7 @@ export declare const GdsTheme: {
|
|
|
397
397
|
tabIndex?: number | undefined;
|
|
398
398
|
blur?: (() => void) | undefined;
|
|
399
399
|
focus?: ((options?: FocusOptions) => void) | undefined;
|
|
400
|
-
}, "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "role" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-label" | "property" | "content" | "color" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-
|
|
400
|
+
}, "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "role" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-label" | "property" | "content" | "color" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-readonly" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-setsize" | "aria-sort" | "aria-valuenow" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture">, "children"> & {
|
|
401
401
|
children?: React.ReactNode;
|
|
402
402
|
} & {
|
|
403
403
|
dir?: string | undefined | undefined;
|
|
@@ -439,6 +439,7 @@ export declare const GdsTheme: {
|
|
|
439
439
|
"aria-description"?: string | undefined | undefined;
|
|
440
440
|
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
|
|
441
441
|
"aria-describedby"?: string | undefined | undefined;
|
|
442
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
442
443
|
"aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
|
|
443
444
|
onToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
|
|
444
445
|
resource?: string | undefined | undefined;
|
|
@@ -496,7 +497,6 @@ export declare const GdsTheme: {
|
|
|
496
497
|
"aria-placeholder"?: string | undefined | undefined;
|
|
497
498
|
"aria-posinset"?: number | undefined | undefined;
|
|
498
499
|
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
499
|
-
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
500
500
|
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
|
|
501
501
|
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
502
502
|
"aria-roledescription"?: string | undefined | undefined;
|
|
@@ -432,7 +432,7 @@ export declare const GdsVideo: {
|
|
|
432
432
|
tabIndex?: number | undefined;
|
|
433
433
|
blur?: (() => void) | undefined;
|
|
434
434
|
focus?: ((options?: FocusOptions) => void) | undefined;
|
|
435
|
-
}, "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "role" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-label" | "property" | "content" | "color" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-
|
|
435
|
+
}, "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "role" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-label" | "property" | "content" | "color" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-readonly" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-setsize" | "aria-sort" | "aria-valuenow" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture">, "children"> & {
|
|
436
436
|
children?: React.ReactNode;
|
|
437
437
|
} & {
|
|
438
438
|
dir?: string | undefined | undefined;
|
|
@@ -474,6 +474,7 @@ export declare const GdsVideo: {
|
|
|
474
474
|
"aria-description"?: string | undefined | undefined;
|
|
475
475
|
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
|
|
476
476
|
"aria-describedby"?: string | undefined | undefined;
|
|
477
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
477
478
|
"aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
|
|
478
479
|
onToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
|
|
479
480
|
resource?: string | undefined | undefined;
|
|
@@ -531,7 +532,6 @@ export declare const GdsVideo: {
|
|
|
531
532
|
"aria-placeholder"?: string | undefined | undefined;
|
|
532
533
|
"aria-posinset"?: number | undefined | undefined;
|
|
533
534
|
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
534
|
-
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
535
535
|
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
|
|
536
536
|
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
537
537
|
"aria-roledescription"?: string | undefined | undefined;
|
package/package.json
CHANGED
|
@@ -26,6 +26,10 @@ export declare class GdsFieldBase extends GdsElement {
|
|
|
26
26
|
* Whether the field is disabled.
|
|
27
27
|
*/
|
|
28
28
|
disabled: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Whether the field is read-only. Renders a distinct style and a solid lock icon.
|
|
31
|
+
*/
|
|
32
|
+
readonly: boolean;
|
|
29
33
|
/**
|
|
30
34
|
* Whether the field is invalid.
|
|
31
35
|
*/
|
|
@@ -4,10 +4,12 @@ import {
|
|
|
4
4
|
__privateGet,
|
|
5
5
|
__privateMethod
|
|
6
6
|
} from "../../chunks/chunk.H2T4A5YY.js";
|
|
7
|
-
var _handleSlotChange, _GdsFieldBase_instances, renderFieldContents_fn, renderSlotLead_fn, renderSlotMain_fn, renderSlotAction_fn, renderSlotTrail_fn;
|
|
7
|
+
var _handleSlotChange, _GdsFieldBase_instances, renderFieldContents_fn, renderRightSlots_fn, renderReadonlyIcon_fn, renderSlotLead_fn, renderSlotMain_fn, renderSlotAction_fn, renderSlotTrail_fn;
|
|
8
8
|
import { localized } from "@lit/localize";
|
|
9
9
|
import { property, query, state } from "lit/decorators.js";
|
|
10
10
|
import { classMap } from "lit/directives/class-map.js";
|
|
11
|
+
import { nothing } from "lit/html.js";
|
|
12
|
+
import { IconLock } from "../../components/icon/icons/lock.component.js";
|
|
11
13
|
import { GdsElement } from "../../gds-element.js";
|
|
12
14
|
import { gdsCustomElement, html } from "../../scoping.js";
|
|
13
15
|
import { TransitionalStyles } from "../../transitional-styles.js";
|
|
@@ -20,6 +22,7 @@ let GdsFieldBase = class extends GdsElement {
|
|
|
20
22
|
this.size = "large";
|
|
21
23
|
this.multiline = false;
|
|
22
24
|
this.disabled = false;
|
|
25
|
+
this.readonly = false;
|
|
23
26
|
this.invalid = false;
|
|
24
27
|
this._leadSlotOccupied = false;
|
|
25
28
|
this._leadHasBadge = false;
|
|
@@ -53,7 +56,8 @@ let GdsFieldBase = class extends GdsElement {
|
|
|
53
56
|
invalid: this.invalid ?? false,
|
|
54
57
|
multiline: this.multiline,
|
|
55
58
|
disabled: this.disabled,
|
|
56
|
-
|
|
59
|
+
readonly: this.readonly,
|
|
60
|
+
"lead-slot-occupied": this._leadSlotOccupied || this.readonly,
|
|
57
61
|
"lead-has-badge": this._leadHasBadge,
|
|
58
62
|
"trail-slot-occupied": this._trailSlotOccupied,
|
|
59
63
|
"action-slot-occupied": this._actionSlotOccupied,
|
|
@@ -76,22 +80,44 @@ let GdsFieldBase = class extends GdsElement {
|
|
|
76
80
|
_handleSlotChange = new WeakMap();
|
|
77
81
|
_GdsFieldBase_instances = new WeakSet();
|
|
78
82
|
renderFieldContents_fn = function() {
|
|
83
|
+
return [
|
|
84
|
+
__privateMethod(this, _GdsFieldBase_instances, renderReadonlyIcon_fn).call(this),
|
|
85
|
+
__privateMethod(this, _GdsFieldBase_instances, renderSlotLead_fn).call(this),
|
|
86
|
+
__privateMethod(this, _GdsFieldBase_instances, renderSlotMain_fn).call(this),
|
|
87
|
+
__privateMethod(this, _GdsFieldBase_instances, renderRightSlots_fn).call(this)
|
|
88
|
+
];
|
|
89
|
+
};
|
|
90
|
+
renderRightSlots_fn = function() {
|
|
79
91
|
const rightSlotsWrapClasses = {
|
|
80
92
|
right: true,
|
|
81
93
|
"as-flex": this.multiline && (this._trailSlotOccupied || this._actionSlotOccupied)
|
|
82
94
|
};
|
|
83
95
|
return html`
|
|
84
|
-
${__privateMethod(this, _GdsFieldBase_instances, renderSlotLead_fn).call(this)} ${__privateMethod(this, _GdsFieldBase_instances, renderSlotMain_fn).call(this)}
|
|
85
96
|
<div class="${classMap(rightSlotsWrapClasses)}">
|
|
86
97
|
${__privateMethod(this, _GdsFieldBase_instances, renderSlotAction_fn).call(this)} ${__privateMethod(this, _GdsFieldBase_instances, renderSlotTrail_fn).call(this)}
|
|
87
98
|
</div>
|
|
88
99
|
`;
|
|
89
100
|
};
|
|
101
|
+
renderReadonlyIcon_fn = function() {
|
|
102
|
+
if (!this.readonly) return nothing;
|
|
103
|
+
return html`
|
|
104
|
+
<gds-icon-lock
|
|
105
|
+
size=${this.size === "small" ? "m" : "l"}
|
|
106
|
+
color="disabled-01"
|
|
107
|
+
solid
|
|
108
|
+
></gds-icon-lock>
|
|
109
|
+
`;
|
|
110
|
+
};
|
|
90
111
|
renderSlotLead_fn = function() {
|
|
91
|
-
return
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
112
|
+
if (this.readonly) return nothing;
|
|
113
|
+
return html`
|
|
114
|
+
<span class="lead-slot-content" ?hidden=${!this._leadSlotOccupied}>
|
|
115
|
+
<slot
|
|
116
|
+
name="lead"
|
|
117
|
+
@slotchange=${(e) => __privateGet(this, _handleSlotChange).call(this, "lead", e)}
|
|
118
|
+
></slot>
|
|
119
|
+
</span>
|
|
120
|
+
`;
|
|
95
121
|
};
|
|
96
122
|
renderSlotMain_fn = function() {
|
|
97
123
|
return html`<div
|
|
@@ -131,6 +157,12 @@ __decorateClass([
|
|
|
131
157
|
reflect: true
|
|
132
158
|
})
|
|
133
159
|
], GdsFieldBase.prototype, "disabled", 2);
|
|
160
|
+
__decorateClass([
|
|
161
|
+
property({
|
|
162
|
+
type: Boolean,
|
|
163
|
+
reflect: true
|
|
164
|
+
})
|
|
165
|
+
], GdsFieldBase.prototype, "readonly", 2);
|
|
134
166
|
__decorateClass([
|
|
135
167
|
property({ type: Boolean })
|
|
136
168
|
], GdsFieldBase.prototype, "invalid", 2);
|
|
@@ -153,7 +185,7 @@ __decorateClass([
|
|
|
153
185
|
watch("disabled")
|
|
154
186
|
], GdsFieldBase.prototype, "_handleDisabledChange", 1);
|
|
155
187
|
GdsFieldBase = __decorateClass([
|
|
156
|
-
gdsCustomElement("gds-field-base"),
|
|
188
|
+
gdsCustomElement("gds-field-base", { dependsOn: [IconLock] }),
|
|
157
189
|
localized()
|
|
158
190
|
], GdsFieldBase);
|
|
159
191
|
export {
|
|
@@ -83,6 +83,11 @@ const style = css`
|
|
|
83
83
|
pointer-events: none;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
+
.field.readonly {
|
|
87
|
+
background: var(--gds-sys-color-l3-disabled-01);
|
|
88
|
+
border-color: var(--gds-sys-color-l3-disabled-01);
|
|
89
|
+
}
|
|
90
|
+
|
|
86
91
|
.field.invalid {
|
|
87
92
|
background: var(--gds-sys-color-l3-negative-02);
|
|
88
93
|
border-color: var(--gds-sys-color-border-negative-01);
|
|
@@ -133,7 +138,7 @@ const style = css`
|
|
|
133
138
|
}
|
|
134
139
|
|
|
135
140
|
@media (hover: hover) {
|
|
136
|
-
.field:hover {
|
|
141
|
+
.field:hover:not(.readonly) {
|
|
137
142
|
background: color-mix(
|
|
138
143
|
in srgb,
|
|
139
144
|
var(--gds-sys-color-l3-neutral-02),
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n * (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n * >> breakpoint-next(sm)\n * md\n * >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * md\n * >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n * md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n * >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n * >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"\" (Returns a blank string)\n * >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n .field {\n border-radius: 0.25rem;\n border: solid 1px var(--gds-sys-color-base-600);\n --border-color: var(--gds-sys-color-base-600);\n }\n .field:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n .field:focus, .field:focus-within {\n outline-color: var(--gds-sys-color-focus-outline, var(--gds-sys-color-base-900));\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n .field {\n align-items: stretch;\n gap: var(--gds-sys-space-xs);\n background-color: var(--gds-sys-color-background-primary);\n box-sizing: border-box;\n color: var(--gds-sys-color-text-primary);\n cursor: text;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs) calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n min-block-size: 44px;\n }\n .field:hover {\n background-color: var(--grey-200);\n }\n .field.small {\n font-size: 0.875rem;\n min-height: 2rem;\n }\n .field.multiline {\n align-items: flex-start;\n padding: calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-s) calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-m);\n height: -moz-max-content;\n height: max-content;\n }\n .field.action-slot-occupied:not(.trail-slot-occupied) {\n padding-right: var(--gds-sys-space-xs);\n }\n .field.lead-slot-occupied {\n padding-left: var(--gds-sys-space-xs);\n }\n .field.trail-slot-occupied {\n padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n }\n .field slot[name=action]::slotted(*) {\n margin: -3px 0 -3px -3px;\n }\n .field:focus-within {\n outline-color: currentColor;\n }\n .field.invalid {\n border-color: var(--gds-sys-color-border-negative-01);\n color: var(--gds-sys-color-content-negative-01);\n border-bottom-width: 2px;\n }\n .field.disabled {\n background: var(--gds-sys-color-l3-disabled-01);\n color: var(--gds-sys-color-content-disabled-01);\n border-color: transparent;\n pointer-events: none;\n }\n .main-slot-wrap {\n display: flex;\n flex: 1;\n }\n slot:not([name])::slotted(*) {\n color: currentColor;\n }\n slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n align-items: center;\n justify-content: center;\n display: flex;\n min-width: var(--gds-sys-space-l);\n }\n}";
|
|
1
|
+
const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n * (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n * >> breakpoint-next(sm)\n * md\n * >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * md\n * >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n * md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n * >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n * >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"\" (Returns a blank string)\n * >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n .field {\n border-radius: 0.25rem;\n border: solid 1px var(--gds-sys-color-base-600);\n --border-color: var(--gds-sys-color-base-600);\n }\n .field:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n .field:focus, .field:focus-within {\n outline-color: var(--gds-sys-color-focus-outline, var(--gds-sys-color-base-900));\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n .field {\n align-items: stretch;\n gap: var(--gds-sys-space-xs);\n background-color: var(--gds-sys-color-background-primary);\n box-sizing: border-box;\n color: var(--gds-sys-color-text-primary);\n cursor: text;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs) calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n min-block-size: 44px;\n }\n .field:hover:not(.readonly) {\n background-color: var(--grey-200);\n }\n .field.small {\n font-size: 0.875rem;\n min-height: 2rem;\n }\n .field.multiline {\n align-items: flex-start;\n padding: calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-s) calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-m);\n height: -moz-max-content;\n height: max-content;\n }\n .field.action-slot-occupied:not(.trail-slot-occupied) {\n padding-right: var(--gds-sys-space-xs);\n }\n .field.lead-slot-occupied {\n padding-left: var(--gds-sys-space-xs);\n }\n .field.trail-slot-occupied {\n padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n }\n .field slot[name=action]::slotted(*) {\n margin: -3px 0 -3px -3px;\n }\n .field:focus-within {\n outline-color: currentColor;\n }\n .field.invalid {\n border-color: var(--gds-sys-color-border-negative-01);\n color: var(--gds-sys-color-content-negative-01);\n border-bottom-width: 2px;\n }\n .field.disabled {\n background: var(--gds-sys-color-l3-disabled-01);\n color: var(--gds-sys-color-content-disabled-01);\n border-color: transparent;\n pointer-events: none;\n }\n .field.readonly {\n background: var(--gds-sys-color-l3-disabled-01);\n border-color: var(--gds-sys-color-l3-disabled-01);\n }\n .main-slot-wrap {\n display: flex;\n flex: 1;\n }\n slot:not([name])::slotted(*) {\n color: currentColor;\n }\n slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n align-items: center;\n justify-content: center;\n display: flex;\n min-width: var(--gds-sys-space-l);\n }\n}";
|
|
2
2
|
export default styles;
|
|
@@ -120,6 +120,23 @@ var rbcb_toggle_style_default = css`
|
|
|
120
120
|
background-color: var(--gds-sys-color-l3-disabled-02);
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
+
.--readonly .rbcb__toggle {
|
|
124
|
+
box-shadow: none;
|
|
125
|
+
background-color: var(--gds-sys-color-l3-disabled-02);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.--readonly .rbcb__icon {
|
|
129
|
+
/* content-disabled-02 is the readable pairing for an l3-disabled-02 fill */
|
|
130
|
+
color: var(--gds-sys-color-content-disabled-02);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.rbcb--radio.--readonly.--checked .rbcb__toggle {
|
|
134
|
+
/* Radio is the exception: only the checked ring swaps to a neutral fill with a gray ring; unchecked stays the same gray fill as checkbox/switch */
|
|
135
|
+
background-color: var(--gds-sys-color-l1-neutral-01);
|
|
136
|
+
box-shadow: inset 0 0 0 var(--_toggle-border-width-checked)
|
|
137
|
+
var(--gds-sys-color-l3-disabled-02);
|
|
138
|
+
}
|
|
139
|
+
|
|
123
140
|
.--invalid .rbcb__toggle {
|
|
124
141
|
background-color: var(--gds-sys-color-l3-negative-02);
|
|
125
142
|
box-shadow: inset 0 0 0 var(--gds-sys-space-5xs)
|
|
@@ -169,10 +186,15 @@ var rbcb_toggle_style_default = css`
|
|
|
169
186
|
outline: none;
|
|
170
187
|
}
|
|
171
188
|
|
|
172
|
-
:host([gds-element='gds-radio']:focus-visible)
|
|
173
|
-
|
|
189
|
+
:host([gds-element='gds-radio']:focus-visible)
|
|
190
|
+
.rbcb:not(.--disabled)
|
|
191
|
+
.rbcb__perimeter,
|
|
192
|
+
:host([gds-element='gds-checkbox']):has(
|
|
193
|
+
.visually-hidden-checkbox:focus-visible
|
|
194
|
+
)
|
|
174
195
|
.rbcb__perimeter,
|
|
175
|
-
.rbcb-wrapper:has(.visually-hidden-checkbox:focus-visible) .rbcb__perimeter
|
|
196
|
+
.rbcb-wrapper:has(.visually-hidden-checkbox:focus-visible) .rbcb__perimeter,
|
|
197
|
+
:host([readonly]:focus-within) .rbcb:not(.--disabled) .rbcb__perimeter {
|
|
176
198
|
outline-width: var(--gds-sys-space-4xs);
|
|
177
199
|
scale: 1;
|
|
178
200
|
}
|
|
@@ -5,13 +5,14 @@ import { html } from "../scoping.js";
|
|
|
5
5
|
const checkboxToggle = (props) => template({ ...props, type: "checkbox" });
|
|
6
6
|
const radioToggle = (props) => template({ ...props, type: "radio" });
|
|
7
7
|
const template = (props) => {
|
|
8
|
-
const { type, checked, indeterminate, disabled, invalid } = props;
|
|
8
|
+
const { type, checked, indeterminate, disabled, readonly, invalid } = props;
|
|
9
9
|
const modifiers = {
|
|
10
10
|
"rbcb--checkbox": type === "checkbox",
|
|
11
11
|
"rbcb--radio": type === "radio",
|
|
12
12
|
"--checked": checked,
|
|
13
13
|
"--indeterminate": indeterminate,
|
|
14
14
|
"--disabled": disabled,
|
|
15
|
+
"--readonly": readonly,
|
|
15
16
|
"--invalid": invalid
|
|
16
17
|
};
|
|
17
18
|
return html`
|