@tmorrow/cre8-wc 2.0.0 → 2.0.2
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/cdn/cre8-wc.esm.js +9030 -7527
- package/cdn/cre8-wc.esm.js.map +1 -1
- package/cdn/cre8-wc.min.js +5864 -4362
- package/cdn/cre8-wc.min.js.map +1 -1
- package/lib/components/date-picker/date-picker.styles.d.ts.map +1 -1
- package/lib/components/date-picker/date-picker.styles.js +955 -1
- package/lib/components/date-picker/date-picker.styles.js.map +1 -1
- package/lib/components/icon/icon.d.ts +4 -4
- package/lib/components/icon/icon.d.ts.map +1 -1
- package/lib/components/icon/icon.js +59 -61
- package/lib/components/icon/icon.js.map +1 -1
- package/lib/components/select-tile/select-tile.styles.d.ts.map +1 -1
- package/lib/components/select-tile/select-tile.styles.js +1055 -1
- package/lib/components/select-tile/select-tile.styles.js.map +1 -1
- package/mcp-manifest.json +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-tile.styles.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,+iVAA+iV,CAAC;AAClkV,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-select-tile{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;height:100%;width:100%;padding:1rem;gap:1rem;border-color:var(--cre8-color-border-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);border-style:solid;background:var(--cre8-color-bg-default)}.cre8-c-select-tile:hover,.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible,.cre8-c-select-tile:active{background:var(--cre8-color-bg-default-hover);border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile.cre8-c-select-tile--error{border-color:var(--cre8-color-border-error);background:var(--cre8-color-bg-error)}.cre8-c-select-tile.cre8-c-select-tile--success{border-color:var(--cre8-color-border-success);background:var(--cre8-color-bg-success)}.cre8-c-select-tile.cre8-c-select-tile--disabled{border-color:var(--cre8-color-border-disabled);background:var(--cre8-color-bg-disabled);cursor:not-allowed}input:checked+.cre8-c-select-tile{border-width:2px;border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile__input{display:none}.cre8-c-select-tile--horizontal{flex-direction:row;align-items:center;justify-content:center}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm{flex-direction:column}.cre8-c-select-tile--vertical-at-sm .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm-2{flex-direction:column}.cre8-c-select-tile--vertical-at-sm-2 .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 768px){.cre8-c-select-tile--vertical-at-md{flex-direction:column}.cre8-c-select-tile--vertical-at-md .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 960px){.cre8-c-select-tile--vertical-at-lg{flex-direction:column}.cre8-c-select-tile--vertical-at-lg .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1200px){.cre8-c-select-tile--vertical-at-xl{flex-direction:column}.cre8-c-select-tile--vertical-at-xl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1400px){.cre8-c-select-tile--vertical-at-xxl{flex-direction:column}.cre8-c-select-tile--vertical-at-xxl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}.cre8-c-select-tile--bare{border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none}.cre8-c-select-tile--horizontal-bare{flex-direction:row;border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none;align-items:center;justify-content:center}.cre8-c-select-tile--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-select-tile__header{display:block;flex:none}.cre8-c-select-tile__body{display:block;flex:1 1 auto}.cre8-c-select-tile--bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-mobile-font-family);font-size:var(--cre8-typography-title-default-mobile-font-size);font-weight:var(--cre8-typography-title-default-mobile-font-weight);line-height:var(--cre8-typography-title-default-mobile-line-height);text-decoration:var(--cre8-typography-title-default-mobile-text-decoration);text-transform:var(--cre8-typography-title-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-font-family);font-size:var(--cre8-typography-title-default-font-size);font-weight:var(--cre8-typography-title-default-font-weight);line-height:var(--cre8-typography-title-default-line-height);text-decoration:var(--cre8-typography-title-default-text-decoration);text-transform:var(--cre8-typography-title-default-text-transform)}}.cre8-c-select-tile__body .cre8-c-select-tile__body_body{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform)}.cre8-c-select-tile__footer{display:flex;flex:none}.cre8-c-select-tile--bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-left,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-left{order:-1}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-none,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-none{display:none}.cre8-c-select-tile__custom-radio{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-default)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-strong);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--error .cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-select-tile__custom-radio-top-right{position:absolute;top:0.5rem;right:0.5rem}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__icon{display:flex}.cre8-c-select-tile__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__inner-circle{flex:none;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}.cre8-c-select-tile--error .cre8-c-select-tile__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-select-tile--disabled .cre8-c-select-tile__inner-circle{background:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-radio .cre8-c-select-tile__inner-circle{display:flex}.cre8-c-select-tile__custom-checkbox{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-small);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-checkbox{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-brand-strong)}.cre8-c-select-tile--error input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default)}.cre8-c-select-tile--disabled input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-disabled)}.cre8-c-select-tile__icon{display:none;color:var(--cre8-color-content-knockout)}.cre8-c-select-tile--error .cre8-c-select-tile__icon{color:var(--cre8-color-content-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__icon{color:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox .cre8-c-select-tile__icon{display:flex}`;\nexport default styles;\n"]}
|
|
1
|
+
{"version":3,"file":"select-tile.styles.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8hChB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n --rtlTranslateX: 50%;\n /* 1 */\n --rtlGradientToRight: 270deg;\n /* 2 */\n --rtlRotate45Inverse: -45deg;\n /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n --rtlTranslateX: 50%;\n /* 1 */\n --rtlGradientToRight: 270deg;\n /* 2 */\n --rtlRotate45Inverse: -45deg;\n /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n display: inline-flex;\n}\n\n.cre8-c-select-tile-container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border-color: var(--cre8-color-border-default);\n border-width: var(--cre8-border-width-default);\n border-radius: var(--cre8-border-radius-container);\n border-style: solid;\n}\n\n.cre8-c-select-tile {\n position: relative;\n overflow: hidden;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 1rem;\n gap: 1rem;\n background: var(--cre8-color-bg-default);\n}\n.cre8-c-select-tile:hover, .cre8-c-select-tile:focus, .cre8-c-select-tile:focus-visible, .cre8-c-select-tile:active {\n background: var(--cre8-color-bg-default-hover);\n border-color: var(--cre8-color-border-brand);\n}\n.cre8-c-select-tile:focus, .cre8-c-select-tile:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-select-tile.cre8-c-select-tile--error {\n border-color: var(--cre8-color-border-error);\n background: var(--cre8-color-bg-error);\n}\n.cre8-c-select-tile.cre8-c-select-tile--success {\n border-color: var(--cre8-color-border-success);\n background: var(--cre8-color-bg-success);\n}\n.cre8-c-select-tile.cre8-c-select-tile--disabled {\n border-color: var(--cre8-color-border-disabled);\n background: var(--cre8-color-bg-disabled);\n cursor: not-allowed;\n}\n\ninput:checked + .cre8-c-select-tile {\n border-width: 2px;\n border-color: var(--cre8-color-border-brand);\n}\n\n.cre8-c-select-tile__input {\n display: none;\n}\n\n/**\n * Horizontal select-tile\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom\n */\n.cre8-c-select-tile--horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: center;\n}\n\n@media all and (max-width: 560px) {\n .cre8-c-select-tile--vertical-at-sm {\n flex-direction: column;\n }\n .cre8-c-select-tile--vertical-at-sm .cre8-c-select-tile__custom-radio {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n }\n}\n\n@media all and (max-width: 560px) {\n .cre8-c-select-tile--vertical-at-sm-2 {\n flex-direction: column;\n }\n .cre8-c-select-tile--vertical-at-sm-2 .cre8-c-select-tile__custom-radio {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n }\n}\n\n@media all and (max-width: 768px) {\n .cre8-c-select-tile--vertical-at-md {\n flex-direction: column;\n }\n .cre8-c-select-tile--vertical-at-md .cre8-c-select-tile__custom-radio {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n }\n}\n\n@media all and (max-width: 960px) {\n .cre8-c-select-tile--vertical-at-lg {\n flex-direction: column;\n }\n .cre8-c-select-tile--vertical-at-lg .cre8-c-select-tile__custom-radio {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n }\n}\n\n@media all and (max-width: 1200px) {\n .cre8-c-select-tile--vertical-at-xl {\n flex-direction: column;\n }\n .cre8-c-select-tile--vertical-at-xl .cre8-c-select-tile__custom-radio {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n }\n}\n\n@media all and (max-width: 1400px) {\n .cre8-c-select-tile--vertical-at-xxl {\n flex-direction: column;\n }\n .cre8-c-select-tile--vertical-at-xxl .cre8-c-select-tile__custom-radio {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n }\n}\n\n/**\n * Bare select-tile\n * 1) Organized block without a border, background, or padding\n */\n.cre8-c-select-tile--bare {\n border: var(--cre8-border-width-none);\n padding: var(--cre8-spacing-0);\n box-shadow: none;\n}\n\n/**\n * Horizontal-bare select-tile\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom without a border, background, or padding\n */\n.cre8-c-select-tile--horizontal-bare {\n flex-direction: row;\n border: var(--cre8-border-width-none);\n padding: var(--cre8-spacing-0);\n box-shadow: none;\n align-items: center;\n justify-content: center;\n}\n\n/**\n * Center aligned select-tile\n * 1) Center content and text within the select-tile\n */\n.cre8-c-select-tile--align-center {\n text-align: center;\n /* 1 */\n align-items: center;\n /* 1 */\n justify-content: center;\n /* 1 */\n}\n\n/**\n * Slotted image within a select-tile\n * 1) Make the image full width\n */\n::slotted(img) {\n width: 100%;\n}\n\n/**\n * Select tile header\n * 1) Remove flex so that body always takes up remaining space\n */\n.cre8-c-select-tile__header {\n display: block;\n flex: none;\n /* 1 */\n}\n\n/**\n * Select Tile body\n * 1) Flex applied to always fill the remaining space of the select-tile\n */\n.cre8-c-select-tile__body {\n display: block;\n flex: 1 1 auto;\n /* 1 */\n /**\n * Select Tile body within bare select-tile\n * 1) Remove padding\n */\n}\n.cre8-c-select-tile--bare .cre8-c-select-tile__body {\n padding: var(--cre8-spacing-0);\n}\n.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__body {\n padding: var(--cre8-spacing-0);\n}\n.cre8-c-select-tile__body .cre8-c-select-tile__body_title {\n font-family: var(--cre8-typography-title-default-mobile-font-family);\n font-size: var(--cre8-typography-title-default-mobile-font-size);\n font-weight: var(--cre8-typography-title-default-mobile-font-weight);\n line-height: var(--cre8-typography-title-default-mobile-line-height);\n text-decoration: var(--cre8-typography-title-default-mobile-text-decoration);\n text-transform: var(--cre8-typography-title-default-mobile-text-transform);\n}\n@media all and (min-width: 768px) {\n .cre8-c-select-tile__body .cre8-c-select-tile__body_title {\n font-family: var(--cre8-typography-title-default-font-family);\n font-size: var(--cre8-typography-title-default-font-size);\n font-weight: var(--cre8-typography-title-default-font-weight);\n line-height: var(--cre8-typography-title-default-line-height);\n text-decoration: var(--cre8-typography-title-default-text-decoration);\n text-transform: var(--cre8-typography-title-default-text-transform);\n }\n}\n.cre8-c-select-tile__body .cre8-c-select-tile__body_body {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n}\n\n/**\n * Select Tile footer\n * 1) Remove flex so that body always takes up remaining space\n */\n.cre8-c-select-tile__footer {\n display: flex;\n flex: none;\n /* 1 */\n}\n.cre8-c-select-tile--bare .cre8-c-select-tile__footer {\n padding: var(--cre8-spacing-0);\n}\n.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__footer {\n padding: var(--cre8-spacing-0);\n}\n\n.cre8-c-select-tile__custom-radio,\n.cre8-c-select-tile__custom-checkbox {\n /**\n * Render the checkmark/radio button on the left instead of the right.\n * Since it is only visual and the \"checked\" state is also set via aria,\n * there are hopefully no a11y issues with using order here.\n */\n}\n.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-left,\n.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-left {\n order: -1;\n}\n.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-none,\n.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-none {\n display: none;\n}\n\n/**\n* Radio field item custom radio container\n*/\n.cre8-c-select-tile__custom-radio {\n display: flex;\n flex: none;\n height: 1.5rem;\n width: 1.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: var(--cre8-border-radius-round);\n border-width: var(--cre8-border-width-default);\n border-style: var(--cre8-border-style-default);\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-default);\n /**\n * Radio field item custom radio focus visible custom outline\n */\n}\n.cre8-c-select-tile__input:focus-visible + .cre8-c-select-tile__custom-radio {\n border-color: var(--cre8-color-border-strong);\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible + .cre8-c-select-tile__custom-radio {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);\n outline-offset: 0.125rem;\n border-color: var(--cre8-color-border-error);\n}\n.cre8-c-select-tile__custom-radio {\n /**\n * Radio field item custom radio within radio field with error\n */\n}\n.cre8-c-select-tile--error .cre8-c-select-tile__custom-radio {\n border-color: var(--cre8-color-border-error);\n}\n.cre8-c-select-tile__custom-radio {\n /**\n * Radio field item custom radio within radio field disabled\n */\n}\n.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-radio {\n cursor: not-allowed;\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n}\n\n.cre8-c-select-tile__custom-radio-top-right {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n\n/**\n * Check radio variant\n */\n.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__icon {\n display: flex;\n}\n\n/**\n * Radio field item inner circle\n */\n.cre8-c-select-tile__inner-circle {\n display: none;\n cursor: pointer;\n height: 0.75rem;\n width: 0.75rem;\n background: var(--cre8-color-content-brand);\n border-radius: var(--cre8-border-radius-round);\n /** Check radio variant */\n}\n.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__inner-circle {\n flex: none;\n height: 1.5rem;\n width: 1.5rem;\n align-items: center;\n justify-content: center;\n}\n.cre8-c-select-tile__inner-circle {\n /**\n * Radio field item inner circle error\n */\n}\n.cre8-c-select-tile--error .cre8-c-select-tile__inner-circle {\n background: var(--cre8-color-bg-error-strong);\n}\n.cre8-c-select-tile__inner-circle {\n /**\n * Radio field item inner circle disabled\n */\n}\n.cre8-c-select-tile--disabled .cre8-c-select-tile__inner-circle {\n background: var(--cre8-color-content-disabled);\n}\n.cre8-c-select-tile__inner-circle {\n /**\n * Radio field item inner circle will display if the input is checked\n */\n}\ninput:checked ~ * .cre8-c-select-tile__custom-radio .cre8-c-select-tile__inner-circle {\n display: flex;\n}\n\n/**\n * Checkbox field item custom checkbox container\n */\n.cre8-c-select-tile__custom-checkbox {\n display: flex;\n flex: none;\n height: 1.5rem;\n width: 1.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: var(--cre8-border-radius-small);\n border-width: var(--cre8-border-width-default);\n border-style: var(--cre8-border-style-default);\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-strong);\n /**\n * Checkbox field item custom checkbox focus visible custom outline\n */\n}\n.cre8-c-select-tile__input:focus-visible + .cre8-c-select-tile__custom-checkbox {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible + .cre8-c-select-tile__custom-checkbox {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);\n outline-offset: 0.125rem;\n}\n.cre8-c-select-tile__custom-checkbox {\n /**\n * Checkbox field item custom checkbox within checkbox field with error\n */\n}\n.cre8-c-select-tile--error .cre8-c-select-tile__custom-checkbox {\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-error);\n}\n.cre8-c-select-tile__custom-checkbox {\n /**\n * Checkbox field item custom checkbox within checkbox field with disabled\n */\n}\n.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-checkbox {\n cursor: not-allowed;\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n}\n\n/**\n * Checkbox field item custom checkbox when item is checked\n */\ninput:checked ~ * .cre8-c-select-tile__custom-checkbox {\n background-color: var(--cre8-color-bg-brand-strong);\n /**\n * Checkbox field item custom checkbox when item is checked with error\n */\n}\n.cre8-c-select-tile--error input:checked ~ * .cre8-c-select-tile__custom-checkbox {\n background-color: var(--cre8-color-bg-default);\n}\ninput:checked ~ * .cre8-c-select-tile__custom-checkbox {\n /**\n * Checkbox field item custom checkbox when item is checked with disabled\n */\n}\n.cre8-c-select-tile--disabled input:checked ~ * .cre8-c-select-tile__custom-checkbox {\n background-color: var(--cre8-color-bg-disabled);\n}\n\n/**\n * Checkbox field item checkmark icon\n */\n.cre8-c-select-tile__icon {\n display: none;\n color: var(--cre8-color-content-knockout);\n /**\n * Checkbox field item icon within checkbox field with error\n */\n}\n.cre8-c-select-tile--error .cre8-c-select-tile__icon {\n color: var(--cre8-color-content-error);\n}\n.cre8-c-select-tile__icon {\n /**\n * Checkbox field item icon within checkbox field disabled\n */\n}\n.cre8-c-select-tile--disabled .cre8-c-select-tile__icon {\n color: var(--cre8-color-content-disabled);\n}\n.cre8-c-select-tile__icon {\n /**\n * Checkbox field item icon will display in the box if the input is checked\n */\n}\ninput:checked ~ * .cre8-c-select-tile__custom-checkbox .cre8-c-select-tile__icon {\n display: flex;\n}`;\nexport default styles;\n"]}
|
package/mcp-manifest.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.0.
|
|
2
|
+
"version": "2.0.2",
|
|
3
3
|
"library": "@tmorrow/cre8-wc",
|
|
4
4
|
"tagPrefix": "cre8",
|
|
5
5
|
"description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
|
|
@@ -2817,7 +2817,7 @@
|
|
|
2817
2817
|
{
|
|
2818
2818
|
"name": "cre8-icon",
|
|
2819
2819
|
"category": "Media",
|
|
2820
|
-
"description": "\n<svg> is a web component, which can be used with any frontend framework and use any svg.\nIt takes raw svgs as props and renders them.\n\n**'svg-legacy'** will be **deprecated** in Web Components v0.5.0\n\n- [List of new figma
|
|
2820
|
+
"description": "\n<svg> is a web component, which can be used with any frontend framework and use any svg.\nIt takes raw svgs as props and renders them.\n\n**'svg-legacy'** will be **deprecated** in Web Components v0.5.0\n\n- [List of new figma",
|
|
2821
2821
|
"attributes": {
|
|
2822
2822
|
"focusable": {
|
|
2823
2823
|
"type": "boolean",
|
package/package.json
CHANGED