@politiet/sheriff-web-components 1.0.0 → 1.0.1
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/dist/sds-button/sds-button.styles.d.ts.map +1 -1
- package/dist/sds-button/sds-button.styles.js +1 -0
- package/dist/sds-button/sds-button.styles.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.js +1 -0
- package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
- package/dist/sds-radio/sds-radio.styles.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.styles.js +1 -0
- package/dist/sds-radio/sds-radio.styles.js.map +1 -1
- package/dist/sheriff-web-components.js +3 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkJlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_color-semantic-surface-critical-hover: #b32a23;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3, 8px);\n\t\tjustify-content: center;\n\t\tpadding: var(--sds-spacing-3) var(--sds-spacing-4);\n\t\tinline-size: 100%;\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.sds-button:focus,\n\t:host(:focus) .give-focus {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\toutline-offset: 1px;\n\t}\n\n\t.sds-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--critical {\n\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\tcolor: var(--sds-color-semantic-text-on-critical);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--_color-semantic-surface-critical-hover);\n\t\t\tborder: 2px solid var(--_color-semantic-surface-critical-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t}\n\t}\n\n\t.sds-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.sds-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4GlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox__label {\n\t\talign-items: flex-start;\n\t\tcursor: pointer;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tgap: var(--sds-spacing-3);\n\t\tline-height: 1.25;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-checkbox__input {\n\t\tappearance: none;\n\t\tbackground-color: transparent;\n\t\tcolor: currentColor;\n\t\tcursor: pointer;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\taspect-ratio: 1;\n\t\tborder: 1px solid var(--sds-color-semantic-border-default);\n\t\tborder-radius: var(--sds-radius-2);\n\t\tmargin: 0;\n\t\t/*transition:\n\t\t\tbackground-color 0.3s ease,\n\t\t\tbox-shadow 0.3s ease;*/\n\n\t\t&:checked {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-selected);\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 24px;\n\t\t\t\theight: 24px;\n\t\t\t\tbackground-color: white;\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M9.54998 18L3.84998 12.3L5.27498 10.875L9.54998 15.15L18.725 5.97501L20.15 7.40001L9.54998 18Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-1px, -1px);\n\t\t\t\t/*transition:\n\t\t\t\t\tbackground-color 0.3s ease,\n\t\t\t\t\tbox-shadow 0.3s ease;*/\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tborder-width: 2px;\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 2px;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-critical-xtreme);\n\n\t\t\t&:checked {\n\t\t\t\t// TODO: Decide if checked checkbox with error should be fully red\n\t\t\t\t//background-color: var(--sds-color-semantic-border-critical);\n\n\t\t\t\t&::after {\n\t\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\n\t\t\t&:checked {\n\t\t\t\tbackground-color: var(--sds-color-semantic-border-disabled);\n\n\t\t\t\t&::after {\n\t\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& + .sds-checkbox__text {\n\t\t\t\tcolor: var(--sds-color-semantic-border-disabled);\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__text {\n\t\tdisplay: inline-block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding-top: 2px;\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio.styles.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-radio.styles.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2GlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio.styles.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-radio.styles.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-radio__label {\n\t\talign-items: flex-start;\n\t\tcursor: pointer;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tgap: var(--sds-spacing-3);\n\t\tline-height: 1.25;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-radio__input {\n\t\tappearance: none;\n\t\tbackground-color: transparent;\n\t\tcolor: currentColor;\n\t\tcursor: pointer;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\taspect-ratio: 1;\n\t\tborder: 2px solid var(--sds-color-semantic-border-default);\n\t\tborder-radius: 50%;\n\t\tmargin: 0;\n\t\tposition: relative;\n\n\t\t&:checked {\n\t\t\tbackground-color: white;\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tborder-width: 3px;\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 50%;\n\t\t\t\twidth: 12px;\n\t\t\t\theight: 12px;\n\t\t\t\tbackground-color: var(--sds-color-semantic-icon-action-default);\n\t\t\t\tborder-radius: 50%;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tborder-width: 3px;\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&.sds-radio__input--error {\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-critical-xtreme);\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\n\t\t\t&:checked {\n\t\t\t\tborder-width: 3px;\n\t\t\t\tbackground-color: white;\n\n\t\t\t\t&::after {\n\t\t\t\t\tbackground-color: var(--sds-color-semantic-border-disabled);\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& + .sds-radio__text {\n\t\t\t\tcolor: var(--sds-color-semantic-border-disabled);\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-radio__text {\n\t\tdisplay: inline-block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding-top: 2px;\n\t}\n`;\n"]}
|
|
@@ -730,6 +730,7 @@ const styles$h = i$4`
|
|
|
730
730
|
|
|
731
731
|
&:hover {
|
|
732
732
|
background-color: var(--sds-color-semantic-surface-action-subtle);
|
|
733
|
+
border: 2px solid transparent;
|
|
733
734
|
}
|
|
734
735
|
|
|
735
736
|
&:active {
|
|
@@ -946,6 +947,7 @@ const styles$g = i$4`
|
|
|
946
947
|
cursor: pointer;
|
|
947
948
|
width: 24px;
|
|
948
949
|
height: 24px;
|
|
950
|
+
aspect-ratio: 1;
|
|
949
951
|
border: 1px solid var(--sds-color-semantic-border-default);
|
|
950
952
|
border-radius: var(--sds-radius-2);
|
|
951
953
|
margin: 0;
|
|
@@ -2686,6 +2688,7 @@ const styles$4 = i$4`
|
|
|
2686
2688
|
cursor: pointer;
|
|
2687
2689
|
width: 24px;
|
|
2688
2690
|
height: 24px;
|
|
2691
|
+
aspect-ratio: 1;
|
|
2689
2692
|
border: 2px solid var(--sds-color-semantic-border-default);
|
|
2690
2693
|
border-radius: 50%;
|
|
2691
2694
|
margin: 0;
|