material-inspired-component-library 9.0.0 → 9.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/components/textfield/index.scss +1 -0
- package/dist/micl.css +1 -1
- package/dist/textfield.css +1 -1
- package/package.json +1 -1
package/dist/textfield.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-shape-corner-extra-small: 4px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem}:root{--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem}:is(.micl-textfield-filled,.micl-textfield-outlined){--_height: var(--md-comp-text-field-container-height, 56px);--_shape: var(--md-sys-shape-corner-extra-small);--_icon-size: var(--md-comp-text-field-icon-size, 24px);--_icon-space: var(--md-comp-text-field-icon-space, 12px);--_input-space: var(--md-comp-text-field-input-space, 16px);--_icon-leading: 0px;--_icon-trailing: 0px;--_prefix: 0px;--_suffix: 0px;--_outline-width: 1px;--_label-color: var(--md-comp-text-field-label-color, var(--md-sys-color-on-surface-variant));--_effects: var(--md-comp-text-field-motion-effects, cubic-bezier(0.34, 0.88, 0.34, 1));--_duration: var(--md-comp-text-field-motion-duration, 300ms);--_duration-reverse: var(--md-comp-text-field-motion-duration-reverse, 200ms);display:grid;grid-template-areas:"textfield" "supporting";align-items:center}:is(.micl-textfield-filled,.micl-textfield-outlined)>label{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:content-box;grid-area:textfield;align-self:flex-start;width:fit-content;padding-inline:4px;margin-block-start:calc((var(--_height) - var(--md-sys-typescale-body-large-line-height))/2);color:var(--_label-color);z-index:1;transition:margin var(--_duration) var(--_effects),font-size var(--_duration) linear,letter-spacing var(--_duration) linear}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea){font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:border-box;grid-area:textfield;margin:0;padding-inline:calc(var(--_input-space) - var(--_border, 0px) + var(--_icon-leading) + var(--_prefix)) calc(var(--_input-space) - var(--_border, 0px) + var(--_icon-trailing) + var(--_suffix));border:none;border-radius:var(--_shape);outline:none;color:var(--md-comp-text-field-input-color, var(--md-sys-color-on-surface));background-color:rgba(0,0,0,0);text-overflow:ellipsis;caret-color:var(--_caret-color, var(--md-comp-text-field-caret-color, var(--md-sys-color-primary)))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea):disabled{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea):disabled::placeholder{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::placeholder{color:var(--md-comp-text-field-input-placeholder-color, var(--md-sys-color-on-surface-variant))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::-webkit-inner-spin-button,:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)[type=number]{-moz-appearance:textfield}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select){height:var(--_height);padding-block:0}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea{min-height:var(--_height);padding-block:calc((var(--_height) - var(--md-sys-typescale-body-large-line-height))/2);resize:none}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea[rows]{padding-block-start:0;border-block-start:8px solid rgba(0,0,0,0);overflow:hidden}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea:not([rows]){field-sizing:content}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__prefix,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__suffix{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);grid-area:textfield;align-content:center;height:var(--_height);color:var(--md-sys-color-on-surface-variant);opacity:0;z-index:1;transition:opacity var(--_duration-reverse) linear}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__prefix{width:var(--md-comp-text-field-prefix-space, 1em);padding-inline-start:calc(var(--_input-space) + var(--_icon-leading))}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__suffix{width:var(--md-comp-text-field-suffix-space, 1em);padding-inline-end:calc(var(--_input-space) + var(--_icon-trailing));margin-inline:auto 0}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-leading,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-trailing{grid-area:textfield;width:1em;margin-inline:var(--_icon-space) auto;font-size:var(--_icon-size);color:var(--md-comp-text-field-icon-color, var(--md-sys-color-on-surface-variant));z-index:1}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-trailing{margin-inline:auto var(--_icon-space)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__prefix){--_prefix: var(--md-comp-text-field-prefix-space, 1em)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__suffix){--_suffix: var(--md-comp-text-field-suffix-space, 1em)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__icon-leading){--_icon-leading: calc(var(--_icon-size) + var(--_icon-space))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__icon-trailing){--_icon-trailing: calc(var(--_icon-size) + var(--_icon-space))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>label):not(:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])))>select{color:rgba(0,0,0,0)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>label):not(:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])))>:is(input,select,textarea)::placeholder{color:rgba(0,0,0,0)}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__supporting-text,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__character-counter{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking);grid-area:supporting;padding-block:4px 0;padding-inline:16px;color:var(--md-comp-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant))}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__supporting-text--focus{visibility:hidden}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__character-counter{justify-self:flex-end}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:is(input,textarea):not([maxlength]),>select)>.micl-textfield__character-counter{display:none}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:is(input,textarea)[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text{padding-inline-end:64px}.micl-textfield-filled{--_outline-color: var(--md-comp-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant));--_focus-outline-color: var(--md-comp-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary))}.micl-textfield-filled>label{margin-inline:12px 4px}.micl-textfield-filled:hover>:is(input,select,textarea):not(:disabled){--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-textfield-filled>:is(input,select,textarea){--statelayer-color: var(--md-sys-color-on-surface);padding-block-start:18px;padding-block-end:calc(3px - var(--_outline-width));border-block-end:var(--_outline-width) solid var(--_outline-color);border-end-start-radius:0;border-end-end-radius:0;background-color:var(--md-comp-filled-text-field-container-color, var(--md-sys-color-surface-container-highest));background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;transition:--statelayer-opacity var(--_duration) linear}.micl-textfield-filled>:is(input,select,textarea):disabled{background-color:rgb(from var(--md-sys-color-on-surface) r g b/4%)}.micl-textfield-filled>textarea{padding-block-start:24px}.micl-textfield-filled:has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading))}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{margin-block-start:8px;margin-inline-start:12px}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])):has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading) - 4px)}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__prefix,.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__suffix{height:40px;margin-block-start:16px}.micl-textfield-outlined{--_outline-color: var(--md-comp-outlined-text-field-outline-color, var(--md-sys-color-outline));--_focus-outline-color: var(--md-comp-outlined-text-field-focus-outline-color, var(--md-sys-color-primary));--_disabled-outline-opacity: 12%;--_border: var(--_outline-width);--_outline-extra: calc(var(--_outline-width) - 1px);grid-template:"textfield textfield textfield" "supporting supporting supporting"/12px fit-content(calc(100% - 24px)) 1fr;margin-block-start:calc(2px + var(--md-sys-typescale-body-small-line-height)/2)}.micl-textfield-outlined::before,.micl-textfield-outlined::after{content:"";grid-area:textfield;align-self:start;height:var(--_shape);border-block-start:var(--_outline-width) solid var(--_outline-color)}.micl-textfield-outlined::before{grid-column:1/3;border-start-start-radius:var(--_shape)}.micl-textfield-outlined::after{grid-column:3;border-start-end-radius:var(--_shape)}.micl-textfield-outlined:hover{--_label-color: var(--md-sys-color-on-surface)}.micl-textfield-outlined>label{grid-column:2}.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading) - 12px)}.micl-textfield-outlined>:is(input,select,textarea){border-block-end:var(--_border) solid var(--_outline-color);border-inline:var(--_border) solid var(--_outline-color)}.micl-textfield-outlined>input{padding-block-start:calc(var(--_border) - 1px)}.micl-textfield-outlined>textarea{--_border: 1px;box-shadow:inset var(--_outline-extra) 0 var(--_outline-color),inset calc(0px - var(--_outline-extra)) 0 var(--_outline-color),inset 0 calc(0px - var(--_outline-extra)) var(--_outline-color)}.micl-textfield-outlined:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))::before{grid-column:1}.micl-textfield-outlined:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{margin-block-start:calc(-2px - var(--md-sys-typescale-body-small-line-height)/2);margin-inline-start:0}:is(.micl-textfield-filled,.micl-textfield-outlined):hover{--_outline-color: var(--md-sys-color-on-surface)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus){--_outline-width: 3px;--_outline-color: var(--_focus-outline-color);--_label-color: var(--md-comp-text-field-focus-label-color, var(--md-sys-color-primary))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus)>.micl-textfield__supporting-text--focus{visibility:visible}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__prefix,:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__suffix{opacity:1}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled){--_outline-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--_disabled-outline-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled)>:is(label,[class*=micl-textfield__]:not(.micl-textfield__character-counter)){color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled)>.micl-textfield__character-counter{display:none}.micl-textfield--error:not(:has(>:disabled)){--_outline-color: var(--md-sys-color-error);--_caret-color: var(--md-sys-color-error);--_label-color: var(--md-sys-color-error)}.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__icon-trailing,.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__supporting-text,.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__character-counter{color:var(--md-sys-color-error)}.micl-textfield--error:not(:has(>:disabled)):hover:not(:has(>:focus)){--_outline-color: var(--md-sys-color-on-error-container);--_label-color: var(--md-sys-color-on-error-container)}.micl-textfield--error:not(:has(>:disabled)):hover:not(:has(>:focus))>.micl-textfield__icon-trailing{color:var(--md-sys-color-on-error-container)}:is(.micl-textfield-filled,.micl-textfield-outlined):dir(rtl)>.micl-textfield__icon-leading{margin-inline:auto var(--_icon-space)}:is(.micl-textfield-filled,.micl-textfield-outlined):dir(rtl)>.micl-textfield__icon-trailing{margin-inline:var(--_icon-space) auto}
|
|
1
|
+
:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-shape-corner-extra-small: 4px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem}:root{--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem}:is(.micl-textfield-filled,.micl-textfield-outlined){--_height: var(--md-comp-text-field-container-height, 56px);--_shape: var(--md-sys-shape-corner-extra-small);--_icon-size: var(--md-comp-text-field-icon-size, 24px);--_icon-space: var(--md-comp-text-field-icon-space, 12px);--_input-space: var(--md-comp-text-field-input-space, 16px);--_icon-leading: 0px;--_icon-trailing: 0px;--_prefix: 0px;--_suffix: 0px;--_outline-width: 1px;--_label-color: var(--md-comp-text-field-label-color, var(--md-sys-color-on-surface-variant));--_effects: var(--md-comp-text-field-motion-effects, cubic-bezier(0.34, 0.88, 0.34, 1));--_duration: var(--md-comp-text-field-motion-duration, 300ms);--_duration-reverse: var(--md-comp-text-field-motion-duration-reverse, 200ms);display:grid;grid-template-areas:"textfield" "supporting";align-items:center}:is(.micl-textfield-filled,.micl-textfield-outlined)>label{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:content-box;grid-area:textfield;align-self:flex-start;width:fit-content;padding-inline:4px;margin-block-start:calc((var(--_height) - var(--md-sys-typescale-body-large-line-height))/2);color:var(--_label-color);z-index:1;transition:margin var(--_duration) var(--_effects),font-size var(--_duration) linear,letter-spacing var(--_duration) linear}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea){font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:border-box;grid-area:textfield;inline-size:auto;margin:0;padding-inline:calc(var(--_input-space) - var(--_border, 0px) + var(--_icon-leading) + var(--_prefix)) calc(var(--_input-space) - var(--_border, 0px) + var(--_icon-trailing) + var(--_suffix));border:none;border-radius:var(--_shape);outline:none;color:var(--md-comp-text-field-input-color, var(--md-sys-color-on-surface));background-color:rgba(0,0,0,0);text-overflow:ellipsis;caret-color:var(--_caret-color, var(--md-comp-text-field-caret-color, var(--md-sys-color-primary)))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea):disabled{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea):disabled::placeholder{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::placeholder{color:var(--md-comp-text-field-input-placeholder-color, var(--md-sys-color-on-surface-variant))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::-webkit-inner-spin-button,:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)[type=number]{-moz-appearance:textfield}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select){height:var(--_height);padding-block:0}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea{min-height:var(--_height);padding-block:calc((var(--_height) - var(--md-sys-typescale-body-large-line-height))/2);resize:none}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea[rows]{padding-block-start:0;border-block-start:8px solid rgba(0,0,0,0);overflow:hidden}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea:not([rows]){field-sizing:content}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__prefix,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__suffix{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);grid-area:textfield;align-content:center;height:var(--_height);color:var(--md-sys-color-on-surface-variant);opacity:0;z-index:1;transition:opacity var(--_duration-reverse) linear}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__prefix{width:var(--md-comp-text-field-prefix-space, 1em);padding-inline-start:calc(var(--_input-space) + var(--_icon-leading))}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__suffix{width:var(--md-comp-text-field-suffix-space, 1em);padding-inline-end:calc(var(--_input-space) + var(--_icon-trailing));margin-inline:auto 0}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-leading,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-trailing{grid-area:textfield;width:1em;margin-inline:var(--_icon-space) auto;font-size:var(--_icon-size);color:var(--md-comp-text-field-icon-color, var(--md-sys-color-on-surface-variant));z-index:1}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-trailing{margin-inline:auto var(--_icon-space)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__prefix){--_prefix: var(--md-comp-text-field-prefix-space, 1em)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__suffix){--_suffix: var(--md-comp-text-field-suffix-space, 1em)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__icon-leading){--_icon-leading: calc(var(--_icon-size) + var(--_icon-space))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__icon-trailing){--_icon-trailing: calc(var(--_icon-size) + var(--_icon-space))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>label):not(:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])))>select{color:rgba(0,0,0,0)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>label):not(:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])))>:is(input,select,textarea)::placeholder{color:rgba(0,0,0,0)}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__supporting-text,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__character-counter{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking);grid-area:supporting;padding-block:4px 0;padding-inline:16px;color:var(--md-comp-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant))}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__supporting-text--focus{visibility:hidden}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__character-counter{justify-self:flex-end}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:is(input,textarea):not([maxlength]),>select)>.micl-textfield__character-counter{display:none}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:is(input,textarea)[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text{padding-inline-end:64px}.micl-textfield-filled{--_outline-color: var(--md-comp-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant));--_focus-outline-color: var(--md-comp-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary))}.micl-textfield-filled>label{margin-inline:12px 4px}.micl-textfield-filled:hover>:is(input,select,textarea):not(:disabled){--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-textfield-filled>:is(input,select,textarea){--statelayer-color: var(--md-sys-color-on-surface);padding-block-start:18px;padding-block-end:calc(3px - var(--_outline-width));border-block-end:var(--_outline-width) solid var(--_outline-color);border-end-start-radius:0;border-end-end-radius:0;background-color:var(--md-comp-filled-text-field-container-color, var(--md-sys-color-surface-container-highest));background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;transition:--statelayer-opacity var(--_duration) linear}.micl-textfield-filled>:is(input,select,textarea):disabled{background-color:rgb(from var(--md-sys-color-on-surface) r g b/4%)}.micl-textfield-filled>textarea{padding-block-start:24px}.micl-textfield-filled:has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading))}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{margin-block-start:8px;margin-inline-start:12px}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])):has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading) - 4px)}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__prefix,.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__suffix{height:40px;margin-block-start:16px}.micl-textfield-outlined{--_outline-color: var(--md-comp-outlined-text-field-outline-color, var(--md-sys-color-outline));--_focus-outline-color: var(--md-comp-outlined-text-field-focus-outline-color, var(--md-sys-color-primary));--_disabled-outline-opacity: 12%;--_border: var(--_outline-width);--_outline-extra: calc(var(--_outline-width) - 1px);grid-template:"textfield textfield textfield" "supporting supporting supporting"/12px fit-content(calc(100% - 24px)) 1fr;margin-block-start:calc(2px + var(--md-sys-typescale-body-small-line-height)/2)}.micl-textfield-outlined::before,.micl-textfield-outlined::after{content:"";grid-area:textfield;align-self:start;height:var(--_shape);border-block-start:var(--_outline-width) solid var(--_outline-color)}.micl-textfield-outlined::before{grid-column:1/3;border-start-start-radius:var(--_shape)}.micl-textfield-outlined::after{grid-column:3;border-start-end-radius:var(--_shape)}.micl-textfield-outlined:hover{--_label-color: var(--md-sys-color-on-surface)}.micl-textfield-outlined>label{grid-column:2}.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading) - 12px)}.micl-textfield-outlined>:is(input,select,textarea){border-block-end:var(--_border) solid var(--_outline-color);border-inline:var(--_border) solid var(--_outline-color)}.micl-textfield-outlined>input{padding-block-start:calc(var(--_border) - 1px)}.micl-textfield-outlined>textarea{--_border: 1px;box-shadow:inset var(--_outline-extra) 0 var(--_outline-color),inset calc(0px - var(--_outline-extra)) 0 var(--_outline-color),inset 0 calc(0px - var(--_outline-extra)) var(--_outline-color)}.micl-textfield-outlined:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))::before{grid-column:1}.micl-textfield-outlined:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{margin-block-start:calc(-2px - var(--md-sys-typescale-body-small-line-height)/2);margin-inline-start:0}:is(.micl-textfield-filled,.micl-textfield-outlined):hover{--_outline-color: var(--md-sys-color-on-surface)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus){--_outline-width: 3px;--_outline-color: var(--_focus-outline-color);--_label-color: var(--md-comp-text-field-focus-label-color, var(--md-sys-color-primary))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus)>.micl-textfield__supporting-text--focus{visibility:visible}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__prefix,:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__suffix{opacity:1}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled){--_outline-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--_disabled-outline-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled)>:is(label,[class*=micl-textfield__]:not(.micl-textfield__character-counter)){color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled)>.micl-textfield__character-counter{display:none}.micl-textfield--error:not(:has(>:disabled)){--_outline-color: var(--md-sys-color-error);--_caret-color: var(--md-sys-color-error);--_label-color: var(--md-sys-color-error)}.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__icon-trailing,.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__supporting-text,.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__character-counter{color:var(--md-sys-color-error)}.micl-textfield--error:not(:has(>:disabled)):hover:not(:has(>:focus)){--_outline-color: var(--md-sys-color-on-error-container);--_label-color: var(--md-sys-color-on-error-container)}.micl-textfield--error:not(:has(>:disabled)):hover:not(:has(>:focus))>.micl-textfield__icon-trailing{color:var(--md-sys-color-on-error-container)}:is(.micl-textfield-filled,.micl-textfield-outlined):dir(rtl)>.micl-textfield__icon-leading{margin-inline:auto var(--_icon-space)}:is(.micl-textfield-filled,.micl-textfield-outlined):dir(rtl)>.micl-textfield__icon-trailing{margin-inline:var(--_icon-space) auto}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "material-inspired-component-library",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.1",
|
|
4
4
|
"description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
|
|
5
5
|
"author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
|
|
6
6
|
"license": "MIT",
|