@lism-css/ui 0.2.2 → 0.2.3
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/LICENSE +21 -0
- package/dist/components/Accordion/setAccordion.js +7 -7
- package/dist/components/Modal/setModal.js +1 -1
- package/dist/scripts/tabs.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +68 -68
- package/src/components/Accordion/_style.css +10 -10
- package/src/components/Accordion/getProps.js +6 -6
- package/src/components/Accordion/setAccordion.js +2 -2
- package/src/components/Modal/_style.css +7 -7
- package/src/components/Modal/getProps.js +3 -3
- package/src/components/Modal/setModal.ts +1 -1
- package/src/components/Tabs/_style.css +4 -4
- package/src/components/Tabs/astro/Tab.astro +1 -1
- package/src/components/Tabs/astro/TabList.astro +1 -1
- package/src/components/Tabs/astro/TabPanel.astro +1 -1
- package/src/components/Tabs/astro/Tabs.astro +1 -1
- package/src/components/Tabs/getProps.js +1 -1
- package/src/components/Tabs/react/Tab.jsx +1 -1
- package/src/components/Tabs/react/TabList.jsx +1 -1
- package/src/components/Tabs/react/TabPanel.jsx +1 -1
- package/src/components/Tabs/script.js +1 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) Loos, Inc.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const l = (e) => {
|
|
2
|
-
const t = e.querySelector(".
|
|
2
|
+
const t = e.querySelector(".c--accordion_body"), n = t ? t.getAnimations() : [];
|
|
3
3
|
return Promise.allSettled(n.map((o) => o.finished));
|
|
4
4
|
}, s = async (e) => {
|
|
5
5
|
e.open && e.hasAttribute("data-opened") || (e.open = !0, requestAnimationFrame(() => {
|
|
@@ -26,7 +26,7 @@ const l = (e) => {
|
|
|
26
26
|
}, u = (e) => {
|
|
27
27
|
const t = e.open, n = e.hasAttribute("data-opened");
|
|
28
28
|
t && !n && e.setAttribute("data-opened", ""), !t && n && e.removeAttribute("data-opened");
|
|
29
|
-
},
|
|
29
|
+
}, m = (e) => {
|
|
30
30
|
const t = i(e), n = e.querySelector("summary");
|
|
31
31
|
if (!n) return;
|
|
32
32
|
const o = (c) => {
|
|
@@ -37,12 +37,12 @@ const l = (e) => {
|
|
|
37
37
|
return n.addEventListener("click", o), e.addEventListener("toggle", r), () => {
|
|
38
38
|
n.removeEventListener("click", o), e.removeEventListener("toggle", r);
|
|
39
39
|
};
|
|
40
|
-
},
|
|
41
|
-
document.querySelectorAll(".
|
|
42
|
-
|
|
40
|
+
}, d = () => {
|
|
41
|
+
document.querySelectorAll(".c--accordion").forEach((t) => {
|
|
42
|
+
m(t);
|
|
43
43
|
});
|
|
44
44
|
};
|
|
45
45
|
export {
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
d as default,
|
|
47
|
+
m as setEvent
|
|
48
48
|
};
|
package/dist/scripts/tabs.js
CHANGED
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer lism.modules{.
|
|
1
|
+
@layer lism.modules{.c--accordion{--duration:var(--acc-duration,0.25s)}.c--accordion[data-opened]{--_notOpen: }.c--accordion:not([data-opened]){--_isOpen: }.c--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;--focus-offset:-1px;&::-webkit-details-marker{display:none}}.c--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.c--accordion_inner{overflow:hidden}.c--accordion:not([data-opened])>.c--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.c--accordion_icon{display:grid}.c--accordion_icon>.a--icon{transform:var(--_isOpen,scaleY(-1));transition:transform var(--duration)}.c--badge{--c:var(--base);--bgc:var(--text);--bdc:transparent;background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c)}.c--badge--outline{--c:var(--text);--bgc:transparent;--bdc:currentColor}.c--button{--c:var(--base);--bgc:var(--text);--bdc:var(--bgc);background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c);gap:var(--s10);place-content:center;place-items:center;text-decoration:none}.c--button--outline{--c:var(--text);--bgc:transparent;--bdc:var(--c)}}@layer lism.modules{}@layer lism.modules{:where(.c--button)>.a--icon{scale:1.05}.c--button:where(.l--grid){grid-template-columns:minmax(1em,auto) 1fr minmax(1em,auto);justify-items:center}.c--button:where(.l--grid)>:not(.a--icon){grid-column:2}}@layer lism.modules{.c--chat{--cbox-bgPct:8%;--gta:"avatar name" "avatar body";--gtc:auto 1fr;--gtr:minmax(1.5rem,auto) auto;--_avator-size:clamp(48px,32px + 5cqw,64px);--_deco-size:calc(min(var(--_avator-size), 80px)/4 + 0.25rem);--_deco-mask:none;--_deco-t:0;--_deco-scale:1;--_deco-inset-x:0;gap:0 calc(var(--_deco-size) + 1px)}.c--chat_avatar{grid-area:avatar;width:var(--_avator-size)}.c--chat_name{grid-area:name}.c--chat_body{grid-area:body}.c--chat_content{max-width:var(--sz--s)}.c--chat_deco{height:var(--_deco-size);top:var(--_deco-t);inset-inline:var(--_deco-inset-x);-webkit-mask:var(--_deco-mask) center/contain no-repeat;mask:var(--_deco-mask) center/contain no-repeat;scale:var(--_deco-scale);width:var(--_deco-size)}.c--chat--speak{--_deco-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M8,8L8,8C7.4,4.8,5.4,2,2.6,0.4L2,0h6V8z"/></svg>')}[data-chat-dir=start]{--_deco-inset-x:auto calc(100% - 1px)}[data-chat-dir=end]{--_deco-scale:-1 1;--_deco-inset-x:calc(100% - 1px) auto;--gta:"name avatar" "body avatar";--gtc:1fr auto}}.c--chat--speak[data-chat-dir=start]>div>.c--chat_content{border-start-start-radius:0}.c--chat--speak[data-chat-dir=end]>div>.c--chat_content{border-start-end-radius:0}@layer lism.modules{.c--navMenu{--link-td:none;--hl:var(--hl--s);--_item-p:var(--s20);--focus-offset:-1px}.c--navMenu_nest{--_item-p:inherit}.c--navMenu_link{padding:var(--_item-p)}.c--navMenu_item,.c--navMenu_nest{--bdc:inherit}.c--shapeDivider{--level:0;--_inner-offset:0px;--_inner-stretch:1;--_flipX:1;--_flipY:1;height:clamp(5px * var(--level),1cqw * var(--level),12px * var(--level));overflow:visible}}@layer lism.modules{.c--shapeDivider:where([data-flip^=X]){--_flipX:-1}.c--shapeDivider:where([data-flip$=Y]){--_flipY:-1}.c--shapeDivider_inner{--offsetY:0.5px;--offsetX:-0.5px;height:100%;scale:calc(var(--_flipX)*var(--_inner-stretch)) var(--_flipY);translate:calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY)*var(--_flipY));width:calc(100% + 1px)}.c--shapeDivider_svg{display:block}:where([data-has-animation=true]) .c--shapeDivider_svg{animation:lism--slideShape 12s linear infinite alternate;transform-origin:100% 0}}@keyframes lism--slideShape{0%{transform:scaleX(4)}to{transform:scaleX(4) translateX(75%)}}
|
package/package.json
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
2
|
+
"name": "@lism-css/ui",
|
|
3
|
+
"version": "0.2.3",
|
|
4
|
+
"description": "UI components by lism-css.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "ddryo",
|
|
7
|
+
"url": "https://github.com/ddryo"
|
|
8
|
+
},
|
|
9
|
+
"license": "MIT",
|
|
10
|
+
"keywords": [
|
|
11
|
+
"css-framework",
|
|
12
|
+
"astro-component",
|
|
13
|
+
"react-component"
|
|
14
|
+
],
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"src"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
20
|
+
"main": "./dist/index.js",
|
|
21
|
+
"exports": {
|
|
22
|
+
"./react": {
|
|
23
|
+
"import": "./src/components/react.js",
|
|
24
|
+
"types": "./dist/components/index.d.ts"
|
|
25
|
+
},
|
|
26
|
+
"./astro": {
|
|
27
|
+
"import": "./src/components/astro.js",
|
|
28
|
+
"types": "./dist/components/index.d.ts"
|
|
29
|
+
},
|
|
30
|
+
"./scripts/*": "./dist/scripts/*.js",
|
|
31
|
+
"./style.css": "./dist/style.css"
|
|
32
|
+
},
|
|
33
|
+
"homepage": "https://www.lism.style",
|
|
34
|
+
"repository": {
|
|
35
|
+
"type": "git",
|
|
36
|
+
"url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
|
|
37
|
+
},
|
|
38
|
+
"bugs": {
|
|
39
|
+
"url": "https://github.com/lism-css/lism-css/issues"
|
|
40
|
+
},
|
|
41
|
+
"dependencies": {
|
|
42
|
+
"lism-css": "0.8.3"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@babel/cli": "^7.27.2",
|
|
46
|
+
"@babel/core": "^7.27.3",
|
|
47
|
+
"@babel/preset-env": "^7.27.2",
|
|
48
|
+
"@babel/preset-react": "^7.27.1",
|
|
49
|
+
"@rollup/plugin-babel": "^6.0.4",
|
|
50
|
+
"@vitejs/plugin-react-swc": "^3.10.0",
|
|
51
|
+
"glob": "^11.0.2",
|
|
52
|
+
"rollup": "^4.41.1",
|
|
53
|
+
"typescript": "~5.8.3",
|
|
54
|
+
"unplugin-dts": "1.0.0-beta.6",
|
|
55
|
+
"vite": "^6.3.5"
|
|
56
|
+
},
|
|
57
|
+
"peerDependencies": {
|
|
58
|
+
"@types/react": "*",
|
|
59
|
+
"@types/react-dom": "*",
|
|
60
|
+
"react": "^18 || ^19",
|
|
61
|
+
"react-dom": "^18 || ^19"
|
|
62
|
+
},
|
|
63
|
+
"sideEffects": false,
|
|
64
|
+
"scripts": {
|
|
65
|
+
"dev": "vite",
|
|
66
|
+
"build": "vite build && pnpm build:css",
|
|
67
|
+
"build:css": "node build-css.js"
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
@layer lism.modules {
|
|
2
|
-
.
|
|
2
|
+
.c--accordion {
|
|
3
3
|
--duration: var(--acc-duration, 0.25s);
|
|
4
4
|
}
|
|
5
|
-
.
|
|
5
|
+
.c--accordion[data-opened] {
|
|
6
6
|
--_notOpen: ;
|
|
7
7
|
}
|
|
8
|
-
.
|
|
8
|
+
.c--accordion:not([data-opened]) {
|
|
9
9
|
--_isOpen: ;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
.
|
|
12
|
+
.c--accordion_header {
|
|
13
13
|
display: grid;
|
|
14
14
|
grid: auto / 1fr auto;
|
|
15
15
|
gap: 0.5em;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.
|
|
25
|
+
.c--accordion_body {
|
|
26
26
|
display: grid;
|
|
27
27
|
grid: 1fr / auto;
|
|
28
28
|
transition-property: margin-block, padding-block, opacity, grid-template;
|
|
@@ -30,24 +30,24 @@
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
/* ※ 正常な animation には必須 */
|
|
33
|
-
.
|
|
33
|
+
.c--accordion_inner {
|
|
34
34
|
overflow: hidden;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
/* 閉じている時 */
|
|
38
|
-
.
|
|
38
|
+
.c--accordion:not([data-opened]) > .c--accordion_body {
|
|
39
39
|
grid: 0fr / auto;
|
|
40
40
|
padding-block: 0 !important;
|
|
41
41
|
margin-block: 0 !important;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
/* アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。 */
|
|
45
|
-
.
|
|
45
|
+
.c--accordion_icon {
|
|
46
46
|
display: grid;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
/* .
|
|
50
|
-
.
|
|
49
|
+
/* .c--accordion_icon 自体にborderつけたりすると回転が見えてしまうので、中にある .a--icon を回転させる。 */
|
|
50
|
+
.c--accordion_icon > .a--icon {
|
|
51
51
|
transition: transform var(--duration);
|
|
52
52
|
transform: var(--_isOpen, scaleY(-1));
|
|
53
53
|
}
|
|
@@ -2,13 +2,13 @@ import atts from 'lism-css/lib/helper/atts';
|
|
|
2
2
|
|
|
3
3
|
// duration: [s]
|
|
4
4
|
export function getAccProps({ lismClass, ...props }) {
|
|
5
|
-
props.lismClass = atts(lismClass, '
|
|
5
|
+
props.lismClass = atts(lismClass, 'c--accordion');
|
|
6
6
|
return props;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
export function getAccIconProps({ isTrigger, ...props }) {
|
|
10
10
|
const defaultProps = {
|
|
11
|
-
lismClass: '
|
|
11
|
+
lismClass: 'c--accordion_icon',
|
|
12
12
|
tag: 'span',
|
|
13
13
|
};
|
|
14
14
|
// isTrigger なら、buttun にする
|
|
@@ -21,12 +21,12 @@ export function getAccIconProps({ isTrigger, ...props }) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
export const defaultProps = {
|
|
24
|
-
header: { lismClass: '
|
|
25
|
-
label: { lismClass: '
|
|
24
|
+
header: { lismClass: 'c--accordion_header' },
|
|
25
|
+
label: { lismClass: 'c--accordion_label', tag: 'span' },
|
|
26
26
|
body: {
|
|
27
|
-
lismClass: '
|
|
27
|
+
lismClass: 'c--accordion_body',
|
|
28
28
|
},
|
|
29
29
|
inner: {
|
|
30
|
-
lismClass: '
|
|
30
|
+
lismClass: 'c--accordion_inner',
|
|
31
31
|
},
|
|
32
32
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// アニメーションが完了するのを待つ
|
|
2
2
|
const waitAnimation = (details) => {
|
|
3
3
|
// アニメーション対象の要素を直接取得.（getAnimations({subtree: true}) は iOS Safari で動作しない場合があるので __body を直接監視）
|
|
4
|
-
const body = details.querySelector('.
|
|
4
|
+
const body = details.querySelector('.c--accordion_body');
|
|
5
5
|
const animations = body ? body.getAnimations() : [];
|
|
6
6
|
|
|
7
7
|
// allSettled を使うことで、キャンセル時も reject せずに完了する
|
|
@@ -112,7 +112,7 @@ export const setEvent = (details) => {
|
|
|
112
112
|
};
|
|
113
113
|
|
|
114
114
|
const setAccordion = () => {
|
|
115
|
-
const detailsAll = document.querySelectorAll('.
|
|
115
|
+
const detailsAll = document.querySelectorAll('.c--accordion');
|
|
116
116
|
detailsAll.forEach((details) => {
|
|
117
117
|
setEvent(details);
|
|
118
118
|
});
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Memo: ::backdrop のアニメーションはFirefoxで動かない
|
|
4
4
|
*/
|
|
5
5
|
@layer lism.modules {
|
|
6
|
-
.
|
|
6
|
+
.c--modal {
|
|
7
7
|
--flow: 0; /* flow直下にきても影響しないように */
|
|
8
8
|
--duration: var(--modal-duration, 0.4s);
|
|
9
9
|
width: 100%;
|
|
@@ -15,30 +15,30 @@
|
|
|
15
15
|
transition-duration: var(--duration);
|
|
16
16
|
transition-property: opacity;
|
|
17
17
|
}
|
|
18
|
-
.
|
|
18
|
+
.c--modal::backdrop {
|
|
19
19
|
background: none;
|
|
20
20
|
}
|
|
21
|
-
.
|
|
21
|
+
.c--modal[open] {
|
|
22
22
|
display: flex;
|
|
23
23
|
flex-direction: column;
|
|
24
24
|
justify-content: center;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.
|
|
27
|
+
.c--modal_inner {
|
|
28
28
|
--offset: 0 0; /* アニメーション用 */
|
|
29
29
|
background-color: var(--base);
|
|
30
30
|
transition: translate var(--duration);
|
|
31
31
|
max-height: 100%;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
/* .
|
|
34
|
+
/* .c--modal_body {
|
|
35
35
|
overscroll-behavior: contain;
|
|
36
36
|
} */
|
|
37
37
|
|
|
38
|
-
.
|
|
38
|
+
.c--modal:not([data-is-open]) {
|
|
39
39
|
opacity: 0;
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.c--modal:not([data-is-open]) > .c--modal_inner {
|
|
42
42
|
translate: var(--offset);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
@@ -2,7 +2,7 @@ import atts from 'lism-css/lib/helper/atts';
|
|
|
2
2
|
|
|
3
3
|
export function getProps({ lismClass = '', duration, style = {}, ...props }) {
|
|
4
4
|
const theProps = {
|
|
5
|
-
lismClass: atts(lismClass, '
|
|
5
|
+
lismClass: atts(lismClass, 'c--modal'),
|
|
6
6
|
setPlain: true,
|
|
7
7
|
};
|
|
8
8
|
if (duration) {
|
|
@@ -17,14 +17,14 @@ export function getInnerProps({ lismClass = '', offset, style = {}, ...props })
|
|
|
17
17
|
style['--offset'] = offset;
|
|
18
18
|
}
|
|
19
19
|
return {
|
|
20
|
-
lismClass: atts(lismClass, '
|
|
20
|
+
lismClass: atts(lismClass, 'c--modal_inner'),
|
|
21
21
|
style,
|
|
22
22
|
...props,
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export const defaultProps = {
|
|
27
|
-
body: { lismClass: '
|
|
27
|
+
body: { lismClass: 'c--modal_body' },
|
|
28
28
|
closeBtn: { tag: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
|
|
29
29
|
openBtn: { tag: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
|
|
30
30
|
};
|
|
@@ -98,7 +98,7 @@ export function setEvent(modal: HTMLDialogElement): void {
|
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
const setModal = () => {
|
|
101
|
-
const modals = document.querySelectorAll('.
|
|
101
|
+
const modals = document.querySelectorAll('.c--modal');
|
|
102
102
|
|
|
103
103
|
modals?.forEach((target) => {
|
|
104
104
|
setEvent(target as HTMLDialogElement);
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
@layer lism.modules {
|
|
2
|
-
.
|
|
2
|
+
.c--tabs {
|
|
3
3
|
display: grid;
|
|
4
4
|
grid: 'list' 'panel' / 100%;
|
|
5
5
|
}
|
|
6
|
-
.
|
|
6
|
+
.c--tabs_list {
|
|
7
7
|
grid-area: list;
|
|
8
8
|
display: flex;
|
|
9
9
|
overflow-x: auto;
|
|
10
10
|
}
|
|
11
|
-
.
|
|
11
|
+
.c--tabs_tab {
|
|
12
12
|
&[aria-selected='true'] {
|
|
13
13
|
--_notSelected: ;
|
|
14
14
|
}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
.
|
|
24
|
+
.c--tabs_panel {
|
|
25
25
|
grid-area: panel;
|
|
26
26
|
width: 100%;
|
|
27
27
|
|
|
@@ -12,6 +12,6 @@ const { tabId = 'tab', index = 0, isActive, ...props } = Astro.props;
|
|
|
12
12
|
const controlId = `${tabId}-${index}`;
|
|
13
13
|
---
|
|
14
14
|
|
|
15
|
-
<Lism tag='button' lismClass='
|
|
15
|
+
<Lism tag='button' lismClass='c--tabs_tab' setPlain role='tab' aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
|
|
16
16
|
<slot />
|
|
17
17
|
</Lism>
|
|
@@ -11,6 +11,6 @@ const { tabId = 'tab', index = 0, isActive = false, ...props } = Astro.props;
|
|
|
11
11
|
const controlId = `${tabId}-${index}`;
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
<Lism id={controlId} role='tabpanel' aria-hidden={isActive ? 'false' : 'true'} lismClass='
|
|
14
|
+
<Lism id={controlId} role='tabpanel' aria-hidden={isActive ? 'false' : 'true'} lismClass='c--tabs_panel' {...props}>
|
|
15
15
|
<slot />
|
|
16
16
|
</Lism>
|
|
@@ -4,5 +4,5 @@ import { Lism } from 'lism-css/react';
|
|
|
4
4
|
export default function TabPanel({ tabId = 'tab', isActive = false, index = 0, ...props }) {
|
|
5
5
|
const controlId = `${tabId}-${index}`;
|
|
6
6
|
|
|
7
|
-
return <Lism id={controlId} role='tabpanel' aria-hidden={isActive ? 'false' : 'true'} lismClass='
|
|
7
|
+
return <Lism id={controlId} role='tabpanel' aria-hidden={isActive ? 'false' : 'true'} lismClass='c--tabs_panel' {...props} />;
|
|
8
8
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import setTabs from './setTabs.js';
|
|
2
2
|
|
|
3
3
|
document.addEventListener('DOMContentLoaded', function () {
|
|
4
|
-
const tabsAll = document.querySelectorAll('.
|
|
4
|
+
const tabsAll = document.querySelectorAll('.c--tabs');
|
|
5
5
|
tabsAll.forEach((tabs) => {
|
|
6
6
|
setTabs(tabs);
|
|
7
7
|
});
|