diff --git a/.gitignore b/.gitignore
index 29ab20d7f0..16903b9d78 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,4 @@ yarn.lock
#dist/
*storybook.log
+storybook-static
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 3328ecb340..58dc67e833 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,23 +1,15 @@
import type { StorybookConfig } from '@storybook/html-vite';
const config: StorybookConfig = {
- "stories": [
- "../components/**/*.mdx",
- "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
- ],
- "addons": [
- {
- name: '@storybook/addon-essentials',
- options: {
- backgrounds: false, // 👈 disable the backgrounds addon to avoid confusing it with themes
- },
- },
- "@storybook/addon-interactions",
- "@storybook/addon-themes"
- ],
- "framework": {
- "name": "@storybook/html-vite",
- "options": {}
+ stories: ['../components/**/*.mdx', '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+ addons: ['@storybook/addon-themes', '@storybook/addon-docs'],
+ framework: {
+ name: '@storybook/html-vite',
+ options: {}
+ },
+ docs: {
+ //👇 See the table below for the list of supported options
+ defaultName: 'Documentation'
}
};
export default config;
diff --git a/.storybook/manager.js b/.storybook/manager.js
new file mode 100644
index 0000000000..d82a4cfcfa
--- /dev/null
+++ b/.storybook/manager.js
@@ -0,0 +1,6 @@
+import { addons } from 'storybook/manager-api';
+import yourTheme from './my-theme';
+
+addons.setConfig({
+ theme: yourTheme
+});
diff --git a/.storybook/my-theme.js b/.storybook/my-theme.js
new file mode 100644
index 0000000000..0c6a4eeca2
--- /dev/null
+++ b/.storybook/my-theme.js
@@ -0,0 +1,9 @@
+import { create } from 'storybook/theming';
+
+export default create({
+ // base: 'light',
+ brandTitle: 'My custom Storybook',
+ brandUrl: 'https://example.com',
+ brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
+ brandTarget: '_self'
+});
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index ffc56572eb..5697a49353 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,6 +1,5 @@
-import type { Preview } from '@storybook/html'
+import type { Preview } from '@storybook/html';
import { withThemeByDataAttribute } from '@storybook/addon-themes';
-
import './material-icons.css';
import '../sass/materialize.scss';
@@ -10,24 +9,24 @@ const preview: Preview = {
withThemeByDataAttribute({
themes: {
light: 'light',
- dark: 'dark',
+ dark: 'dark'
},
defaultTheme: 'light',
- attributeName: 'theme',
- }),
+ attributeName: 'theme'
+ })
],
parameters: {
docs: {
- toc: true, // Enables the table of contents in auto generated docs
+ toc: true // Enables the table of contents in auto generated docs
},
- actions: {argTypesRegex: "^on[A-Z].*"},
+ actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
- color: /(background|color)$/i,
- date: /Date$/i,
- },
- },
- },
+ color: /(background|color)$/i,
+ date: /Date$/i
+ }
+ }
+ }
};
export default preview;
diff --git a/LICENSE b/LICENSE
index b9399d1bd5..d6c8f199f3 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
The MIT License (MIT)
-Copyright (c) 2014-2024 Materialize
+Copyright (c) 2014-2025 Materialize
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/components/buttons/buttons.stories.ts b/components/buttons/buttons.stories.ts
index d028e927a2..9a2e856e4d 100644
--- a/components/buttons/buttons.stories.ts
+++ b/components/buttons/buttons.stories.ts
@@ -1,29 +1,26 @@
-import type { Meta, StoryObj } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html-vite';
export default {
- title: 'Components/Buttons',
-
+ title: 'Components/Buttons'
} satisfies Meta;
-
const BTN_SIZES = {
- 'Small': ['btn-small'],
+ Small: ['btn-small'],
'Small disabled': ['btn-small', 'disabled'],
- 'Normal': [],
+ Normal: [],
'Normal disabled': ['disabled'],
- 'Large': ['btn-large'],
- 'Large disabled': ['btn-large', 'disabled'],
+ Large: ['btn-large'],
+ 'Large disabled': ['btn-large', 'disabled']
};
const BTN_STYLES = {
- 'Default': [], // uncomment this to see the default button when no filled/tonal/outlined/text is set
- 'Filled': ['filled'],
- 'Tonal': ['tonal'],
- 'Outlined': ['outlined'],
- 'Text': ['text']
+ Default: [], // uncomment this to see the default button when no filled/tonal/outlined/text is set
+ Filled: ['filled'],
+ Tonal: ['tonal'],
+ Outlined: ['outlined'],
+ Text: ['text']
};
-
export const Basic: StoryObj = {
render(args) {
const table = document.createElement('table');
@@ -39,7 +36,7 @@ export const Basic: StoryObj = {
cell.innerText = btnStype;
for (const size in BTN_SIZES) {
const cell = row.insertCell();
- const classes = [...BTN_STYLES[btnStype], ...BTN_SIZES[size], ...args.classes?? [] ];
+ const classes = [...BTN_STYLES[btnStype], ...BTN_SIZES[size], ...(args.classes ?? [])];
const disabled = classes.includes('disabled') ? 'disabled="disabled"' : '';
let iconHtml = '';
if (args.icon) {
@@ -107,11 +104,9 @@ export const IconRight: StoryObj = {
label: 'Submit',
iconRight: 'send',
classes: ['btn']
-
}
};
-
export const FloatingActionButton: StoryObj = {
render() {
return `
@@ -151,5 +146,5 @@ export const FloatingActionButton: StoryObj = {
`;
- },
-}
+ }
+};
diff --git a/components/checkbox/_checkboxes.scss b/components/checkbox/_checkboxes.scss
index 82c54cad15..2c57d2dedb 100644
--- a/components/checkbox/_checkboxes.scss
+++ b/components/checkbox/_checkboxes.scss
@@ -1,40 +1,119 @@
/* Checkboxes */
-/* Remove default checkbox */
-[type="checkbox"]:not(:checked),
-[type="checkbox"]:checked {
+@at-root {
+ :root {
+ --checkbox-size: 18px; // 18px
+ --checkbox-shape: 2px;
+ }
+}
+
+input[type="checkbox"] {
+ /* Add if not using autoprefixer */
+ -webkit-appearance: none;
+ appearance: none;
+ /* For iOS < 15 to remove gradient background */
+ // background-color: #fff;
+ margin: 0;
+ position: relative;
+ cursor: pointer;
+}
+
+input[type="checkbox"]:focus {
+ outline: 3px solid var(--md-sys-color-secondary);
+ border-radius: 50%;
+ outline-offset: 0.5rem;
+}
+
+input[type="checkbox"]:before {
+ opacity: 1;
position: absolute;
- opacity: 0;
- pointer-events: none;
+ display: block;
+ width: var(--checkbox-size);
+ height: var(--checkbox-size);
+ border: 2px solid var(--md-sys-color-on-surface-variant);
+ border-radius: var(--checkbox-shape);
+ content: "";
+ // background: #fff;
+}
+
+input[type="checkbox"]:after {
+ position: relative;
+ display: block;
+ // left: 2px;
+ // top: -11px;
+ width: var(--checkbox-size);
+ height: var(--checkbox-size);
+ // border-width: 2px;
+ // border-style: solid;
+ // border-color: var(--md-sys-color-on-surface-variant);
+ content: "";
+ // background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
+ border-radius: var(--checkbox-shape);
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+input[type="checkbox"]:checked:after {
+ background-color: var(--md-sys-color-primary);
+ clip-path: polygon(0 48%, 0 0, 56% 0, 74% 17%, 40% 64%, 23% 50%, 14% 61%, 42% 82%, 81% 31%, 32% 0, 100% 0, 100% 100%, 0 100%, 0 49%);
+}
+
+[type="checkbox"]:indeterminate:after {
+ background-color: var(--md-sys-color-primary);
+ clip-path: polygon(0% 0%, 0% 100%, 18% 100%, 16% 43%, 83% 42%, 83% 63%, 16% 63%, 16% 100%, 100% 100%, 100% 0%);
+}
+
+// Disabled
+input[type="checkbox"]:disabled:before {
+ filter: opacity(0.2);
+}
+input[type="checkbox"]:disabled:after {
+ filter: opacity(0.2);
+}
+
+// Hover
+input[type="checkbox"]:not(:disabled):checked:hover:after{
+ // background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
+ background-color: var(--md-sys-color-primary);
+}
+
+input[type="checkbox"]:not(:disabled):hover:after{
+ // background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
+ border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
+}
+
+input[type="checkbox"]:not(:disabled):hover:before{
+ border-color: #3D7591;
}
+/*
// Checkbox Styles
[type="checkbox"] {
// Text Label Style
+ span:not(.lever) {
position: relative;
- padding-left: 35px;
cursor: pointer;
display: inline-block;
- height: 25px;
- line-height: 25px;
+ height: var(--checkbox-size);
+ line-height: var(--checkbox-size);
+ padding-left: var(--checkbox-size);
+ // background-color: red;
font-size: 1rem;
user-select: none;
}
- /* checkbox aspect */
+ // checkbox aspect
+ span:not(.lever):before,
&:not(.filled-in) + span:not(.lever):after {
content: '';
position: absolute;
top: 0;
left: 0;
- width: 18px;
- height: 18px;
+ width: var(--checkbox-size);
+ height: var(--checkbox-size);
z-index: 0;
border: 2px solid var(--md-sys-color-on-surface-variant);
border-radius: 1px;
- margin-top: 3px;
transition: .2s;
}
@@ -82,7 +161,7 @@
}
}
-/* Indeterminate checkbox */
+// Indeterminate checkbox
[type="checkbox"]:indeterminate {
+ span:not(.lever):before {
top: -11px;
@@ -117,7 +196,7 @@
content: '';
left: 0;
position: absolute;
- /* .1s delay is for check animation */
+ // .1s delay is for check animation
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
z-index: 1;
}
@@ -151,8 +230,8 @@
height: 13px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
- border-right: 2px solid var(--md-sys-color-on-primary);
- border-bottom: 2px solid var(--md-sys-color-on-primary);
+ border-right: 2px solid var(--md-sys-color-on-primary);
+ border-bottom: 2px solid var(--md-sys-color-on-primary);
transform: rotateZ(37deg);
transform-origin: 100% 100%;
}
@@ -199,3 +278,4 @@
border: none;
}
}
+*/
\ No newline at end of file
diff --git a/components/checkbox/checkbox.mdx b/components/checkbox/checkbox.mdx
index e9ee044461..0dba9587ea 100644
--- a/components/checkbox/checkbox.mdx
+++ b/components/checkbox/checkbox.mdx
@@ -1,5 +1,4 @@
-import {Story, Meta, Source, Controls, Markdown, Primary} from '@storybook/blocks';
-
+import {Story, Meta, Source, Controls, Markdown, Primary} from '@storybook/addon-docs/blocks';
import * as stories from './checkbox.stories';
@@ -23,5 +22,3 @@ Add the input's `id` as the value of the `for` attribute of the label.