@muibook/components 1.0.0

package/dist/create-mui-app/create-mui-app.css

@@ -0,0 +1 @@
+html[data-theme=light]{--app-container-surface: var(--white);--logo-color: var(--grey-800)}html[data-theme=dark]{--app-container-surface: var(--grey-1000);--logo-color: #ffeb3b}body{display:grid;place-items:center;text-align:center;background-color:var(--app-container-surface)}.introduction{max-width:36ch}:where(html){--font-family: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-size-15: 1.1rem;--font-size-25: 1.2rem;--font-size-50: 1.4rem;--font-size-100: 1.6rem;--font-size-200: 1.8rem;--font-size-300: 2.1rem;--font-size-400: 2.4rem;--font-size-500: 3.6rem;--font-size-600: 4.8rem;--font-size-700: 6rem;--font-size-800: 7.2rem;--font-size-900: 8.4rem;--font-size-1000: 9.6rem;--line-height-15: 1.63636364;--line-height-25: 1.5;--line-height-50: 1.5;--line-height-100: 1.5;--line-height-200: 1.33333333;--line-height-300: 1.14285714;--line-height-400: 1.5;--line-height-500: 1.33333333;--line-height-600: 1.25;--line-height-700: 1.2;--line-height-800: 1.16666667;--line-height-900: 1.14285714;--line-height-1000: 1.125;--font-weight-400: 400;--font-weight-500: 500;--font-weight-600: 600;--font-weight-700: 700;--black: black;--black-opacity-0: hsla(0, 0%, 0%, 0);--black-opacity-10: hsla(0, 0%, 0%, .1);--black-opacity-20: hsla(0, 0%, 0%, .2);--black-opacity-30: hsla(0, 0%, 0%, .3);--black-opacity-40: hsla(0, 0%, 0%, .4);--black-opacity-50: hsla(0, 0%, 0%, .5);--black-opacity-60: hsla(0, 0%, 0%, .6);--black-opacity-70: hsla(0, 0%, 0%, .7);--black-opacity-80: hsla(0, 0%, 0%, .8);--black-opacity-90: hsla(0, 0%, 0%, .9);--black-opacity-100: hsla(0, 0%, 0%, 1);--white: #ffffff;--white-opacity-0: hsla(0, 0%, 100%, 0);--white-opacity-10: hsla(0, 0%, 100%, .1);--white-opacity-20: hsla(0, 0%, 100%, .2);--white-opacity-30: hsla(0, 0%, 100%, .3);--white-opacity-40: hsla(0, 0%, 100%, .4);--white-opacity-50: hsla(0, 0%, 100%, .5);--white-opacity-60: hsla(0, 0%, 100%, .6);--white-opacity-70: hsla(0, 0%, 100%, .7);--white-opacity-80: hsla(0, 0%, 100%, .8);--white-opacity-90: hsla(0, 0%, 100%, .9);--white-opacity-100: hsla(0, 0%, 100%, 1);--grey-100: #f5f5f5;--grey-200: #e5e5e5;--grey-300: #ccc;--grey-400: #aaa;--grey-500: #888;--grey-600: #666;--grey-700: #555;--grey-800: #444;--grey-900: #333;--grey-1000: #222;--grey-1100: #111;--red-100: #ffe5e5;--red-200: #fbbcbc;--red-300: #f79494;--red-400: #f36b6b;--red-500: #f74e4e;--red-600: #e04343;--red-700: #c23c3c;--red-800: #a43535;--red-900: #862e2e;--red-1000: #6a2323;--orange-100: #fff2cc;--orange-200: #ffe0a3;--orange-300: #ffcc80;--orange-400: #ffb84d;--orange-500: #ffa500;--orange-600: #e59400;--orange-700: #cc8300;--orange-800: #b37300;--orange-900: #996200;--orange-1000: #805100;--green-100: #e5f9e5;--green-200: #c6f3c6;--green-300: #a6eda6;--green-400: #86e786;--green-500: #00bd00;--green-600: #00a800;--green-700: #009400;--green-800: #007f00;--green-900: #006b00;--green-1000: #005700;--blue-100: #e6f2ff;--blue-200: #cce4ff;--blue-300: #99caff;--blue-400: #85bffb;--blue-500: #62b7fb;--blue-600: #338fe0;--blue-700: #3396eb;--blue-800: #1a86e3;--blue-900: #0076db;--blue-1000: #005fb1;--radius-000: 0;--radius-100: 4px;--radius-150: 6px;--radius-200: 8px;--radius-300: 16px;--radius-400: 24px;--space-000: 0;--space-025: .2rem;--space-050: .4rem;--space-100: .6rem;--space-200: .8rem;--space-300: 1.2rem;--space-400: 1.6rem;--space-500: 2.4rem;--space-600: 3.6rem;--space-700: 4.8rem;--space-800: 6rem;--stroke-size-100: 1px;--stroke-size-200: 2px;--stroke-size-300: 3px;--stroke-size-400: 4px;--stroke-size-500: 5px;--stroke-solid: solid;--stroke-outset: outset;--speed-100: .1s;--speed-200: .2s;--speed-300: .3s;--speed-400: .4s}html[data-theme=light]{--form-default-text-color: var(--grey-500);--form-success-text-color: var(--green-700);--form-warning-text-color: var(--orange-700);--form-error-text-color: var(--red-700);--form-default-text-color-hover: var(--grey-600);--form-success-text-color-hover: var(--green-800);--form-warning-text-color-hover: var(--orange-800);--form-error-text-color-hover: var(--red-800);--form-default-border-color: var(--grey-300);--form-success-border-color: var(--green-600);--form-warning-border-color: var(--orange-600);--form-error-border-color: var(--red-600);--form-default-border-color-hover: var(--grey-400);--form-success-border-color-hover: var(--green-700);--form-warning-border-color-hover: var(--orange-700);--form-error-border-color-hover: var(--red-700);--feedback-neutral-border-color: var(--black-opacity-20);--feedback-positive-border-color: var(--green-600);--feedback-info-border-color: var(--blue-600);--feedback-warning-border-color: var(--orange-600);--feedback-attention-border-color: var(--red-600);--feedback-neutral-background: var(--white);--feedback-positive-background: var(--green-100);--feedback-info-background: var(--blue-100);--feedback-warning-background: var(--orange-100);--feedback-attention-background: var(--red-100);--feedback-neutral-icon: var(--grey-600);--feedback-positive-icon: var(--green-600);--feedback-info-icon: var(--blue-600);--feedback-warning-icon: var(--orange-600);--feedback-attention-icon: var(--red-600);--feedback-neutral-text: var(--grey-900);--feedback-positive-text: var(--green-900);--feedback-info-text: var(--blue-900);--feedback-warning-text: var(--orange-900);--feedback-attention-text: var(--red-900);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--grey-900);--action-primary-background-hover: var(--grey-1000);--action-primary-background-focus: var(--grey-1000);--action-primary-background-disabled: var(--grey-200);--action-primary-text-color: var(--white);--action-primary-text-color-hover: var(--white);--action-primary-text-color-focus: var(--white);--action-primary-text-color-disabled: var(--grey-400);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);--action-secondary-background: var(--white-opacity-0);--action-secondary-background-hover: var(--grey-100);--action-secondary-background-focus: var(--grey-100);--action-secondary-background-disabled: var(--grey-100);--action-secondary-text-color: var(--grey-900);--action-secondary-text-color-hover: var(--grey-1000);--action-secondary-text-color-focus: var(--grey-1000);--action-secondary-text-color-disabled: var(--grey-400);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);--action-tertiary-background: var(--white-opacity-0);--action-tertiary-background-hover: var(--black-opacity-10);--action-tertiary-background-focus: var(--black-opacity-10);--action-tertiary-background-disabled: var(--grey-100);--action-tertiary-text-color: var(--grey-900);--action-tertiary-text-color-hover: var(--grey-1000);--action-tertiary-text-color-focus: var(--grey-1000);--action-tertiary-text-color-disabled: var(--grey-400);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-background: var(--red-500);--action-attention-background-hover: var(--red-600);--action-attention-background-focus: var(--red-600);--action-attention-background-disabled: var(--red-100);--action-attention-text-color: var(--white);--action-attention-text-color-hover: var(--white);--action-attention-text-color-focus: var(--white);--action-attention-text-color-disabled: var(--red-300);--surface: var(--grey-200);--surface-elevated-alpha: var(--white-opacity-50);--surface-elevated-100: var(--white);--surface-elevated-200: var(--grey-100);--surface-recessed-alpha: var(--black-opacity-10);--surface-recessed-100: var(--grey-300);--surface-recessed-200: var(--grey-400);--outline-color: var(--blue-500);--border-color: var(--black-opacity-20);--optional-text-color: var(--grey-600);--text-color: var(--grey-900);--text-color-success: var(--green-600);--text-color-warning: var(--orange-600);--text-color-error: var(--red-600);--switch-track-background: var(--grey-300);--switch-track-background-checked: var(--green-500);--switch-thumb-bg: var(--white);--switch-icon: var(--icon-color-default);--icon-color-default: var(--black);--icon-color-inverted: var(--white);--badge-text-color: var(--grey-100);--badge-background-neutral: var(--grey-600);--badge-background-positive: var(--green-600);--badge-background-warning: var(--orange-600);--badge-background-attention: var(--red-600);--heading-text-color: var(--grey-1000);--link-text-color-default: var(--grey-900);--link-text-color-default-hover: var(--grey-1000);--link-text-color-default-focus: var(--grey-1000);--link-text-color-default-disabled: var(--grey-800);--input-background: var(--white);--input-background-disabled: var(--grey-100);--addon-background: var(--grey-100);--tab-border-color: var(--grey-300);--tab-background: var(--grey-200);--tab-icon: var(--grey-900);--tab-text-color: var(--grey-900);--tab-background-active: var(--white);--tab-icon-active: var(--black);--tab-text-color-active: var(--black);--tab-shadow-active: var(--black-opacity-10);--carousel-background: var(--white)}html[data-theme=dark]{--form-default-text-color: var(--grey-500);--form-success-text-color: var(--green-400);--form-warning-text-color: var(--orange-400);--form-error-text-color: var(--red-400);--form-default-text-color-hover: var(--grey-400);--form-success-text-color-hover: var(--green-300);--form-warning-text-color-hover: var(--orange-300);--form-error-text-color-hover: var(--red-300);--form-default-border-color: var(--grey-600);--form-success-border-color: var(--green-400);--form-warning-border-color: var(--orange-400);--form-error-border-color: var(--red-400);--form-default-border-color-hover: var(--grey-500);--form-success-border-color-hover: var(--green-300);--form-warning-border-color-hover: var(--orange-300);--form-error-border-color-hover: var(--red-300);--feedback-neutral-border-color: var(--white-opacity-20);--feedback-positive-border-color: var(--green-400);--feedback-info-border-color: var(--blue-400);--feedback-warning-border-color: var(--orange-400);--feedback-attention-border-color: var(--red-400);--feedback-neutral-background: var(--grey-800);--feedback-positive-background: var(--green-800);--feedback-info-background: var(--blue-800);--feedback-warning-background: var(--orange-800);--feedback-attention-background: var(--red-800);--feedback-neutral-icon: var(--grey-300);--feedback-positive-icon: var(--green-300);--feedback-info-icon: var(--blue-300);--feedback-warning-icon: var(--orange-300);--feedback-attention-icon: var(--red-300);--feedback-neutral-text: var(--grey-100);--feedback-positive-text: var(--green-100);--feedback-info-text: var(--blue-100);--feedback-warning-text: var(--orange-100);--feedback-attention-text: var(--red-100);--action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-primary-background: var(--grey-200);--action-primary-background-hover: var(--grey-100);--action-primary-background-focus: var(--grey-100);--action-primary-background-disabled: var(--grey-800);--action-primary-text-color: var(--grey-900);--action-primary-text-color-hover: var(--grey-900);--action-primary-text-color-focus: var(--grey-900);--action-primary-text-color-disabled: var(--grey-400);--action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);--action-secondary-background: var(--black-opacity-0);--action-secondary-background-hover: var(--grey-800);--action-secondary-background-focus: var(--grey-800);--action-secondary-background-disabled: var(--grey-900);--action-secondary-text-color: var(--grey-100);--action-secondary-text-color-hover: var(--grey-100);--action-secondary-text-color-focus: var(--grey-100);--action-secondary-text-color-disabled: var(--grey-600);--action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-tertiary-background: transparent;--action-tertiary-background-hover: var(--white-opacity-10);--action-tertiary-background-focus: var(--white-opacity-10);--action-tertiary-background-disabled: var(--grey-900);--action-tertiary-text-color: var(--grey-100);--action-tertiary-text-color-hover: var(--grey-100);--action-tertiary-text-color-focus: var(--grey-100);--action-tertiary-text-color-disabled: var(--grey-600);--action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);--action-attention-background: var(--red-600);--action-attention-background-hover: var(--red-700);--action-attention-background-focus: var(--red-700);--action-attention-background-disabled: var(--red-900);--action-attention-text-color: var(--white);--action-attention-text-color-hover: var(--white);--action-attention-text-color-focus: var(--white);--action-attention-text-color-disabled: var(--red-300);--surface: var(--grey-1000);--surface-elevated-alpha: var(--white-opacity-10);--surface-elevated-100: var(--grey-800);--surface-elevated-200: var(--grey-900);--surface-recessed-alpha: var(--black-opacity-30);--surface-recessed-100: var(--grey-1000);--surface-recessed-200: var(--grey-1100);--outline-color: var(--blue-300);--border-color: var(--white-opacity-20);--optional-text-color: var(--grey-300);--text-color: var(--grey-200);--text-color-success: var(--green-400);--text-color-warning: var(--orange-400);--text-color-error: var(--red-400);--switch-track-background: var(--grey-600);--switch-track-background-checked: var(--green-500);--switch-thumb-bg: var(--black);--switch-icon: var(--icon-color-default);--icon-color-default: var(--white);--icon-color-inverted: var(--black);--badge-text-color: var(--grey-900);--badge-background-neutral: var(--grey-400);--badge-background-positive: var(--green-400);--badge-background-warning: var(--orange-400);--badge-background-attention: var(--red-400);--heading-text-color: var(--grey-100);--link-text-color-default: var(--grey-200);--link-text-color-default-hover: var(--grey-100);--link-text-color-default-focus: var(--grey-100);--link-text-color-default-disabled: var(--grey-600);--input-background: var(--grey-900);--input-background-disabled: var(--grey-800);--addon-background: var(--grey-1000);--tab-border-color: var(--grey-800);--tab-background: var(--grey-1100);--tab-icon: var(--grey-400);--tab-text-color: var(--grey-400);--tab-background-active: var(--grey-700);--tab-icon-active: var(--white);--tab-text-color-active: var(--white);--tab-shadow-active: var(--black-opacity-40);--carousel-background: var(--grey-700)}:where(html){--feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);--feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);--feedback-info-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-info-border-color);--feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);--feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);--action-padding: var(--space-200) var(--space-500);--action-icon-only-padding: var(--space-000);--action-radius: var(--radius-100);--action-font-size: var(--text-font-size);--action-line-height: var(--text-line-height);--action-font-weight: var(--font-weight-medium);--text-line-height-xs: var(--line-height-25);--text-line-height-s: var(--line-height-50);--text-line-height-m: var(--line-height-100);--text-line-height-l: var(--line-height-200);--text-font-size-xs: var(--font-size-25);--text-font-size-s: var(--font-size-50);--text-font-size-m: var(--font-size-100);--text-font-size-l: var(--font-size-200);--text-font-size: var(--text-font-size-m);--text-line-height: var(--text-line-height-m);--font-weight-regular: var(--font-weight-400);--font-weight-medium: var(--font-weight-500);--font-weight-semi-bold: var(--font-weight-600);--font-weight-bold: var(--font-weight-700);--border-thin: var(--stroke-size-100) var(--stroke-solid) var(--border-color);--border-thick: var(--stroke-size-200) var(--stroke-solid) var(--border-color);--outline-thin: var(--stroke-size-100) var(--stroke-outset) var(--outline-color);--outline-medium: var(--stroke-size-300) var(--stroke-outset) var(--outline-color);--outline-thick: var(--stroke-size-500) var(--stroke-outset) var(--outline-color);--switch-offset: 1px;--switch-thumb-size: 3.6rem;--switch-width: calc(var(--switch-height) * 1.6);--switch-height: calc(var(--switch-thumb-size) + (var(--switch-offset) * 2));--card-radius: var(--radius-150);--badge-radius: var(--radius-300);--badge-font-weight: var(--font-weight-bold);--heading-font-weight: var(--font-weight-bold);--heading-font-size-100: var(--font-size-600);--heading-font-size-200: var(--font-size-500);--heading-font-size-300: var(--font-size-400);--heading-font-size-400: var(--font-size-300);--heading-font-size-500: var(--font-size-200);--heading-font-size-600: var(--font-size-100);--heading-line-height-100: var(--line-height-600);--heading-line-height-200: var(--line-height-500);--heading-line-height-300: var(--line-height-400);--heading-line-height-400: var(--line-height-300);--heading-line-height-500: var(--line-height-200);--heading-line-height-600: var(--line-height-100);--alert-radius: var(--radius-100);--alert-padding: var(--space-400);--alert-gap-horizontal-mobile: var(--space-300);--alert-gap-horizontal-desktop: var(--space-100);--message-radius: var(--radius-150);--message-padding: var(--space-400);--message-gap-horizontal: var(--space-300);--message-gap-vertical: var(--space-100);--tab-radius: var(--radius-200);--carousel-radius: var(--radius-300);--carousel-tab-position: var(--space-400);--carousel-tab-offset: calc(4.4rem + var(--carousel-tab-position))}:where(html){--root-font-size: 62.5%;font-size:var(--root-font-size);font-family:var(--font-family);background:var(--white);color:var(--text-color);line-height:var(--text-line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html{scroll-behavior:smooth}body{margin:var(--space-000);font-size:var(--text-font-size);min-height:100vh}button,input,optgroup,select,textarea{font-family:var(--font-family);font-size:var(--text-font-size);line-height:var(--text-line-height);margin:var(--space-000)}:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:var(--outline-thick)}progress{vertical-align:baseline}summary{display:list-item}template,[hidden]{display:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}article,aside,main,section,nav,header,footer{width:100%}audio,canvas,mark,video{display:inline-block}img,legend{border:0}body,figure,form{margin:var(--space-000)}audio,canvas,img,video{vertical-align:middle}dfn{font-style:italic}q{quotes:none}q:after,q:before{content:"";content:none}abbr[title]{border-bottom:none;text-decoration:underline dotted}dd{margin:0}*,:before,:after{box-sizing:border-box}::-moz-selection,::selection{background:var(--grey-900);color:var(--white);text-shadow:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button;cursor:pointer}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}:focus:not(:focus-visible){outline:none}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;-moz-appearance:button;appearance:button;font:inherit}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}input::-moz-focus-inner{border:0;padding:0}button,input,optgroup,select,textarea{vertical-align:baseline}[type=checkbox],[type=radio],legend{padding:0}button,input{overflow:visible}button,select{text-transform:none}button[disabled],html input[disabled]{cursor:default}em{font-style:italic}b,strong{font-weight:700}input,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=radio]{-webkit-appearance:radio;-moz-appearance:radio;appearance:radio}input[type=checkbox]{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox}input[type=button],input[type=submit],input[type=reset],button{display:inline-block;cursor:pointer;width:auto}table{width:100%;border-collapse:collapse;border-spacing:0}label{display:block}textarea{resize:vertical;overflow:auto;vertical-align:top}legend{font-weight:700}input[type=checkbox],input[type=radio]{width:auto}sub,sup,small{font-size:var(--text-font-size-xs);line-height:var(--text-line-height-xs)}sub{bottom:-.25em}sup{top:-.5em}dt{font-weight:700}label{margin-bottom:var(--space-100)}input,textarea{border-radius:var(--radius-000)}input[type=text],input[type=email],input[type=number],input[type=password],input[type=file],input[type=search],input[type=range],input[type=button],input[type=submit],input[type=reset],button,textarea,fieldset{border:none}input[type=text],input[type=email],input[type=number],input[type=password],input[type=search],input[type=range]{height:4.2rem;padding:var(--space-000) var(--space-400)}input[type=text],input[type=email],input[type=number],input[type=password],input[type=file],input[type=search],input[type=range],textarea,fieldset{box-shadow:inset 0 0 0 2px #e0e0e0}textarea{padding:var(--space-400);height:6.375em}legend{padding:var(--space-000) var(--space-200);margin-left:-.8rem}fieldset{border-radius:.3125em;padding:var(--space-300) var(--space-500);padding-bottom:var(--space-000)}fieldset ul{list-style:none;margin-bottom:var(--space-000)}fieldset ul label{margin-bottom:var(--space-000)}fieldset li{margin-bottom:var(--space-400)}select{height:1.875em}input[type=checkbox],input[type=radio]{margin:0 var(--space-200) 0 0}input[type=file]{font-size:var(--text-font-size-xs);padding:var(--space-400);margin-bottom:var(--space-500)}button:focus,input[type=submit]:focus{box-shadow:inset 0 0 0 1px #fff}

package/dist/create-mui-app/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <link rel="icon" type="image/svg+xml" href="/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="theme-color" content="var(--surface)" />
+    <title>Create Mui App</title>
+    <meta
+      name="description"
+      content="Start building accessible and fast loading interfaces using web components and MUI inspired styling. No frameworks or JavaScript build tools are required."
+    />
+    <script type="module" crossorigin src="/assets/index-DfcB3F-s.js"></script>
+    <link rel="stylesheet" crossorigin href="/create-mui-app.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/dist/esm/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

package/dist/esm/index/index.js

@@ -0,0 +1,71 @@
+import { PartTypes as yr, Parts as Mr, getPartMap as Tr } from "../mui-utils/part-map/index.js";
+import "../mui-addon/index.js";
+import "../mui-field/index.js";
+import "../mui-input/index.js";
+import "../mui-select/index.js";
+import "../mui-switch/index.js";
+import "../mui-file-upload/index.js";
+import "../mui-card/header/index.js";
+import "../mui-card/body/index.js";
+import "../mui-list/item/index.js";
+import "../mui-list/list/index.js";
+import "../mui-quote/index.js";
+import "../mui-alert/index.js";
+import "../mui-message/index.js";
+import "../mui-badge/index.js";
+import "../mui-button/index.js";
+import "../mui-button-group/index.js";
+import "../mui-link/index.js";
+import "../mui-grid/index.js";
+import "../mui-stack/hstack/index.js";
+import "../mui-stack/vstack/index.js";
+import "../mui-container/index.js";
+import "../mui-responsive/index.js";
+import "../mui-rule/index.js";
+import "../mui-table/table/index.js";
+import "../mui-table/cell/index.js";
+import "../mui-table/row/index.js";
+import "../mui-table/row-group/index.js";
+import "../mui-slat/index.js";
+import "../mui-tabs/controller/index.js";
+import "../mui-tabs/item/index.js";
+import "../mui-tabs/panel/index.js";
+import "../mui-tabs/tab-bar/index.js";
+import "../mui-image/index.js";
+import "../mui-code/index.js";
+import "../mui-card/card/index.js";
+import "../mui-card/footer/index.js";
+import "../mui-icons/accessibility/index.js";
+import "../mui-icons/add/index.js";
+import "../mui-icons/attention/index.js";
+import "../mui-icons/check/index.js";
+import "../mui-icons/close/index.js";
+import "../mui-icons/down-chevron/index.js";
+import "../mui-icons/globe/index.js";
+import "../mui-icons/grid/index.js";
+import "../mui-icons/info/index.js";
+import "../mui-icons/left-arrow/index.js";
+import "../mui-icons/left-chevron/index.js";
+import "../mui-icons/menu/index.js";
+import "../mui-icons/message/index.js";
+import "../mui-icons/moon/index.js";
+import "../mui-icons/notification/index.js";
+import "../mui-icons/right-chevron/index.js";
+import "../mui-icons/stop/index.js";
+import "../mui-icons/subtract/index.js";
+import "../mui-icons/sun/index.js";
+import "../mui-icons/toggle/index.js";
+import "../mui-icons/up-arrow/index.js";
+import "../mui-icons/up-chevron/index.js";
+import "../mui-icons/warning/index.js";
+import "../mui-accordion/group/index.js";
+import "../mui-accordion/inline/index.js";
+import "../mui-accordion/block/index.js";
+import "../mui-carousel/controller/index.js";
+import "../mui-carousel/panel/index.js";
+import "../mui-smart-card/index.js";
+export {
+  yr as PartTypes,
+  Mr as Parts,
+  Tr as getPartMap
+};

package/dist/esm/mui-accordion/block/index.js

@@ -0,0 +1,168 @@
+import "../../mui-icons/down-chevron/index.js";
+import "../../mui-heading/index.js";
+class s extends HTMLElement {
+  constructor() {
+    super(), this.summaryEl = null, this.detailEl = null, this.chevronEl = null, this.attachShadow({ mode: "open" }), this.accordionId = `accordion-detail-${Math.random().toString(36).substring(2, 9)}`;
+  }
+  connectedCallback() {
+    var o, a;
+    if (customElements.get("mui-icon-right-chevron") || console.warn(
+      "mui-accordion-block requires <mui-icon-right-chevron> to be defined. Please ensure it is imported and registered."
+    ), customElements.get("mui-heading") || console.warn(
+      "[mui-accordion-block] Warning: <mui-heading> is not registered. Please import it to ensure proper functionality."
+    ), !this.shadowRoot) return;
+    const i = this.getAttribute("heading") || "Heading...", e = this.getAttribute("size") || "medium", r = this.getAttribute("level") || "3";
+    let n = (
+      /*html*/
+      `
+    <style>
+
+      :host { display: block; }
+
+      .accordion-summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-top: var(--border-thin);
+        cursor: pointer;
+      }
+
+      .accordion-summary:focus-visible {
+        outline: var(--outline-thick);
+      }
+
+      .accordion-summary:hover .icon {
+        background: var(--surface-elevated-200);
+      }
+
+      .icon {
+        padding: var(--space-200);
+        box-sizing: border-box;
+        display: flex;
+        border-radius: var(--radius-200);
+      }
+
+      mui-icon-down-chevron {
+        transition: transform var(--speed-200) ease-in-out;
+        transform: rotate(0deg);
+      }
+
+      mui-heading {
+        width: 100%;
+      }
+
+      mui-icon-down-chevron[open] {
+        transform: rotate(-180deg);
+      }
+
+      .accordion-detail {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height var(--speed-300) ease;
+        box-shadow: inset 0 1px 0 0 var(--border-color);
+      }
+
+      .accordion-detail[open] {
+        max-height: 200vh;
+      }
+
+      .accordion-detail-inner {
+        padding: var(--space-500);
+      }
+
+      .accordion-detail-inner > *:last-child {
+        margin-bottom: 0;
+      }
+
+      .size-small-summary {
+        padding: var(--space-300) var(--space-500);
+      }
+      .size-medium-summary {
+        padding: var(--space-400) var(--space-500);
+      }
+      .size-large-summary {
+        padding: var(--space-500) var(--space-600);
+      }
+        
+      .size-small-detail {
+        padding: var(--space-500);
+      }
+      .size-medium-detail {
+        padding: var(--space-500);
+      }
+      .size-large-detail {
+        padding: var(--space-600);
+      }
+
+      :host([first-child]) .accordion-summary {
+        border-top: none;
+      }
+
+      /* Card Slot (Supports: Table Cell, Accordion Block) */
+      :host(.card-slot) .accordion-summary {
+        padding-left: var(--space-500);
+        padding-right: var(--space-500);
+      }
+      @media (min-width: 768px) {
+        :host(.card-slot) .accordion-summary {
+          padding-left: var(--space-600);
+          padding-right: var(--space-600);
+        }
+      }
+      :host(.card-slot) .accordion-detail-inner {
+        padding-left: var(--space-500);
+        padding-right: var(--space-500);
+      }
+      @media (min-width: 768px) {
+        :host(.card-slot) .accordion-detail-inner {
+          padding-left: var(--space-600);
+          padding-right: var(--space-600);
+        }
+      }
+
+    </style>
+
+    <div
+      class="accordion-summary size-${e}-summary"
+      role="button"
+      tabindex="0"
+      aria-expanded="false"
+      aria-controls="${this.accordionId}"
+    >
+      <mui-heading size="6" level="${r}">${i}</mui-heading>
+      <div class="icon">
+        <mui-icon-down-chevron size="x-small"></mui-icon-down-chevron>
+      </div>
+    </div>
+
+    <div id="${this.accordionId}" class="accordion-detail">
+      <div class="accordion-detail-inner size-${e}-detail" inert>
+        <slot name="detail">Insert Content</slot>
+      </div>
+    </div>
+    
+    `
+    );
+    if (this.shadowRoot.innerHTML = n, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-down-chevron"), !this.summaryEl || !this.detailEl || !this.chevronEl) {
+      console.error("Accordion elements not found");
+      return;
+    }
+    (o = this.summaryEl) == null || o.addEventListener("click", () => this.toggleAccordion()), (a = this.summaryEl) == null || a.addEventListener("keydown", (t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggleAccordion());
+    });
+  }
+  toggleAccordion() {
+    if (!this.detailEl || !this.chevronEl || !this.summaryEl) return;
+    const i = this.detailEl.hasAttribute("open");
+    this.setOpen(!i);
+  }
+  setOpen(i) {
+    if (!this.detailEl || !this.chevronEl || !this.summaryEl) return;
+    const e = this.detailEl.querySelector(".accordion-detail-inner");
+    i ? (this.detailEl.setAttribute("open", ""), this.chevronEl.setAttribute("open", ""), this.summaryEl.setAttribute("aria-expanded", "true"), e && e.removeAttribute("inert"), this.dispatchEvent(new CustomEvent("accordion-opened", { bubbles: !0, composed: !0 }))) : (this.detailEl.removeAttribute("open"), this.chevronEl.removeAttribute("open"), this.summaryEl.setAttribute("aria-expanded", "false"), e && e.setAttribute("inert", ""));
+  }
+  closeAccordion() {
+    this.setOpen(!1);
+  }
+}
+customElements.define("mui-accordion-block", s);

package/dist/esm/mui-accordion/group/index.js

@@ -0,0 +1,26 @@
+class e extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.accordions = [];
+  }
+  connectedCallback() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    "<slot></slot>", requestAnimationFrame(() => {
+      if (!this.shadowRoot) return;
+      const o = this.shadowRoot.querySelector("slot");
+      if (!o) return;
+      const i = o.assignedElements({ flatten: !0 });
+      this.accordions = i.filter(
+        (t) => t.tagName === "MUI-ACCORDION-BLOCK" && typeof t.closeAccordion == "function"
+      ), this.accordions.forEach((t) => {
+        t.removeAttribute("first-child"), t.removeAttribute("last-child");
+      }), this.accordions.length > 0 && (this.accordions[0].setAttribute("first-child", ""), this.accordions[this.accordions.length - 1].setAttribute("last-child", "")), this.accordions.forEach((t) => {
+        t.addEventListener("accordion-opened", () => {
+          this.hasAttribute("exclusive") && this.accordions.forEach((s) => {
+            s !== t && s.closeAccordion();
+          });
+        });
+      });
+    }));
+  }
+}
+customElements.define("mui-accordion-group", e);

package/dist/esm/mui-accordion/index.js

@@ -0,0 +1,3 @@
+import "./block/index.js";
+import "./inline/index.js";
+import "./group/index.js";

package/dist/esm/mui-accordion/inline/index.js

@@ -0,0 +1,96 @@
+import "../../mui-icons/right-chevron/index.js";
+import "../../mui-heading/index.js";
+class a extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    var o, n;
+    if (customElements.get("mui-icon-right-chevron") || console.warn(
+      "mui-accordion-block requires <mui-icon-right-chevron> to be defined. Please ensure it is imported and registered."
+    ), customElements.get("mui-heading") || console.warn(
+      "[mui-accordion-block] Warning: <mui-heading> is not registered. Please import it to ensure proper functionality."
+    ), !this.shadowRoot) return;
+    const e = this.getAttribute("heading") || "Heading...";
+    let r = (
+      /*html*/
+      `
+    <style>
+      :host { 
+        display: inline-flex;
+        flex-direction: column;
+      }
+
+      .accordion-summary {
+        display: flex;
+        align-items: center;
+        margin-bottom: var(--space-000);
+        cursor: pointer;
+      }
+
+
+      .accordion-summary:focus-visible {
+        outline: var(--outline-thick);
+      }
+
+      mui-heading:hover {
+        cursor: pointer;
+      }
+
+      mui-icon-right-chevron {
+        margin-right: var(--space-100);
+        transition: var(--speed-200) ease-in-out;
+      }
+
+      mui-icon-right-chevron[open] {
+        transform: rotate(90deg);
+      }
+
+      .accordion-detail {
+        display: block;
+        margin-bottom: var(--space-000);
+        max-height: 0;
+        transition: max-height var(--speed-100) ease-in-out;
+        overflow-y: hidden;
+      }
+
+      .accordion-detail[open] {
+        max-height: 200vh;
+        transition: max-height var(--speed-400) ease-in-out;
+      }
+
+      .accordion-detail-inner {
+        display: block;
+        margin-top: 1.2rem;
+      }
+
+      .accordion-detail-inner > *:last-child {
+        margin-bottom: var(--space-000);
+      }
+    </style>
+
+    <div class="accordion-summary" tabindex="0" role="button" aria-expanded="false">
+      <mui-icon-right-chevron size="x-small"></mui-icon-right-chevron>
+      <mui-heading size="6" level="${this.getAttribute("level") || "3"}">${e}</mui-heading>
+    </div>
+
+    <div class="accordion-detail">
+      <div class="accordion-detail-inner" inert>
+        <slot name="detail">Insert Content</slot>
+      </div>
+    </div>
+    `
+    );
+    this.shadowRoot.innerHTML = r, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-right-chevron"), (o = this.summaryEl) == null || o.addEventListener("click", this.toggleAccordion.bind(this)), (n = this.summaryEl) == null || n.addEventListener("keydown", (t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggleAccordion());
+    });
+  }
+  toggleAccordion() {
+    if (!this.detailEl || !this.chevronEl || !this.summaryEl) return;
+    const e = this.detailEl.hasAttribute("open");
+    this.detailEl.toggleAttribute("open"), this.chevronEl.toggleAttribute("open"), this.summaryEl.setAttribute("aria-expanded", String(!e));
+    const i = this.detailEl.querySelector(".accordion-detail-inner");
+    i && (e ? i.setAttribute("inert", "") : i.removeAttribute("inert"));
+  }
+}
+customElements.define("mui-accordion-inline", a);

package/dist/esm/mui-addon/index.js

@@ -0,0 +1,46 @@
+class o extends HTMLElement {
+  static get observedAttributes() {
+    return ["slot"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(r, e, t) {
+    r === "slot" && e !== t && this.render();
+  }
+  render() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          padding: var(--space-200) var(--space-400);
+          background: var(--addon-background);
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          height: 4.4rem;
+          min-width: 4.4rem;
+          white-space: nowrap;
+        }
+        :host([slot="before"]) {
+          border-right: none;
+          border-top-left-radius: var(--radius-100);
+          border-bottom-left-radius: var(--radius-100);
+        }
+        :host([slot="after"]) {
+          border-left: none;
+          border-top-right-radius: var(--radius-100);
+          border-bottom-right-radius: var(--radius-100);
+        }
+      </style>
+      <slot></slot>
+    `);
+  }
+}
+customElements.define("mui-addon", o);

package/dist/esm/mui-alert/index.js

@@ -0,0 +1,109 @@
+function u(e) {
+  return ["positive", "info", "warning", "attention"].includes(e);
+}
+class f extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    const i = this.getAttribute("variant") || "positive", r = {
+      success: "positive",
+      error: "attention"
+    }, t = u(i) ? i : r[i] || "positive";
+    this.setAttribute("variant", t);
+    const n = {
+      positive: "polite",
+      info: "polite",
+      warning: "assertive",
+      attention: "assertive"
+    };
+    this.setAttribute("role", "alert"), this.setAttribute("aria-live", n[t] || "polite");
+    const s = {
+      positive: "mui-icon-check",
+      info: "mui-icon-info",
+      warning: "mui-icon-warning",
+      attention: "mui-icon-attention"
+    }, c = {
+      positive: "--feedback-positive-icon",
+      info: "--feedback-info-icon",
+      warning: "--feedback-warning-icon",
+      attention: "--feedback-attention-icon"
+    }, l = {
+      positive: "--feedback-positive-text",
+      info: "--feedback-info-text",
+      warning: "--feedback-warning-text",
+      attention: "--feedback-attention-text"
+    }, d = {
+      positive: "Success!",
+      info: "Info:",
+      warning: "Warning!",
+      attention: "Error!"
+    };
+    this.setAttribute("aria-live", n[t]);
+    const o = s[t], p = c[t], b = l[t], g = d[t], v = (
+      /*css*/
+      `
+      :host {
+        border-radius: var(--alert-radius);
+        padding: var(--alert-padding);
+        background: var(--white);
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: start;
+        gap: var(--alert-gap-horizontal-mobile);
+        box-sizing: border-box;
+      }
+
+     @media (min-width: 600px) {
+        :host {
+          gap: var(--alert-gap-horizontal-desktop);
+        }
+      }
+
+      @media (min-width: 600px) {
+        .icon {
+          margin-top: var(--space-000);
+        }
+      }
+
+      .label {
+        color: var(${b}); font-weight: var(--font-weight-bold);
+      }
+
+      mui-body::part(display) {
+        display: inline;
+      }
+
+      mui-body::part(gap) {
+        gap: var(--space-000);
+      }
+
+      ${["positive", "info", "warning", "attention"].map(
+        (a) => (
+          /*css*/
+          `
+        :host([variant="${a}"]) {
+          border: var(--feedback-${a}-border);
+          background: var(--feedback-${a}-background);
+        }
+      `
+        )
+      ).join("")}
+    `
+    );
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${v}</style>
+      <${o} size="small" color="var(${p})" class="icon"></${o}>
+      <mui-body>
+        <span class="label">${g}</span>
+        <slot></slot>
+      </mui-body>
+    `);
+  }
+}
+customElements.define("mui-alert", f);

package/dist/esm/mui-badge/index.js

@@ -0,0 +1,43 @@
+class s extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.render();
+  }
+  static get observedAttributes() {
+    return ["variant"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const t = this.getAttribute("variant") || "neutral", a = {
+      neutral: "var(--badge-background-neutral)",
+      positive: "var(--badge-background-positive)",
+      warning: "var(--badge-background-warning)",
+      attention: "var(--badge-background-attention)"
+    }, e = {
+      neutral: "off",
+      positive: "polite",
+      warning: "assertive",
+      attention: "assertive"
+    }, r = a[t], i = e[t], n = (
+      /*css*/
+      `
+      :host {
+        display: inline-block;
+        border-radius: var(--badge-radius);
+        background: ${r};
+        font-size: var(--text-font-size-xs);
+        font-weight: var(--badge-font-weight);
+        color: var(--badge-text-color);
+        padding: var(--space-050) var(--space-200);
+      }
+    `
+    );
+    this.setAttribute("role", "status"), this.setAttribute("aria-live", i), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+        <style>${n}</style>
+        <slot></slot>
+      `);
+  }
+}
+customElements.define("mui-badge", s);