@lism-css/ui 0.12.0 → 0.13.1

package/src/components/Chat/react/Chat.tsx

@@ -24,8 +24,8 @@ export default function Chat<T extends ElementType = 'div'>({ name, avatar, flow
       )}
       {name && <Lism {...defaultProps.name}>{name}</Lism>}
       <Lism {...defaultProps.body}>
-        <Decorator {...defaultProps.deco} className="u--cbox is--skipFlow" />
-        <Flow {...defaultProps.content} className="u--cbox" flow={flow} jslf={direction}>
+        <Decorator {...defaultProps.deco} />
+        <Flow {...defaultProps.content} flow={flow} jslf={direction}>
           {children}
         </Flow>
       </Lism>

package/src/components/Details/_style.css

@@ -1,6 +1,6 @@
 /* Details コンポーネント用スタイル */
 /* ::details-content と grid-template-rows: 0fr → 1fr のトランジションでアニメーション */
-@layer lism-modules {
+@layer lism-component {
   .c--details {
     --duration: var(--acc-duration, 0.25s); /* transition時間 */
     --_icon-scale: 1.1;

package/src/components/Details/getProps.ts

@@ -15,12 +15,12 @@ export function getDetailsProps({ lismClass, ...props }: DetailsProps): LismProp
   return props;
 }
 
-export function getTitleProps({ set, unset, ...props }: Record<string, unknown>) {
+export function getTitleProps({ set, ...props }: Record<string, unknown>) {
   return {
     lismClass: 'c--details_title',
     as: 'span',
     fx: '1',
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
     ...props,
   };
 }
@@ -30,7 +30,7 @@ export function getTitleProps({ set, unset, ...props }: Record<string, unknown>)
  */
 export const defaultProps = {
   summary: { lismClass: 'c--details_summary', layout: 'flex', g: '10', ai: 'center' },
-  icon: { lismClass: 'c--details_icon a--icon', as: 'span', 'aria-hidden': 'true' },
+  icon: { lismClass: 'c--details_icon', atomic: 'icon', as: 'span', 'aria-hidden': 'true' },
   body: { lismClass: 'c--details_body' },
   content: { lismClass: 'c--details_content', layout: 'flow', flow: 's' },
 } as const;

package/src/components/Modal/_style.css

@@ -2,7 +2,7 @@
  * dialog で実装.
  *   Memo: ::backdrop のアニメーションはFirefoxで動かない
  */
-@layer lism-modules {
+@layer lism-component {
   .c--modal {
     --flow: 0; /* flow直下にきても影響しないように */
     --duration: var(--modal-duration, 0.4s);

package/src/components/Modal/getProps.ts

@@ -4,7 +4,6 @@ import mergeSet from 'lism-css/lib/helper/mergeSet';
 export type ModalRootProps = {
   lismClass?: string;
   set?: string;
-  unset?: string;
   duration?: string;
   style?: Record<string, string>;
   [key: string]: unknown;
@@ -17,10 +16,10 @@ export type ModalInnerProps = {
   [key: string]: unknown;
 };
 
-export function getProps({ lismClass = '', set, unset, duration, style = {}, ...props }: ModalRootProps) {
+export function getProps({ lismClass = '', set, duration, style = {}, ...props }: ModalRootProps) {
   const theProps = {
     lismClass: atts(lismClass, 'c--modal'),
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
   };
   if (duration) {
     style['--duration'] = duration;
@@ -40,20 +39,20 @@ export function getInnerProps({ lismClass = '', offset, style = {}, ...props }:
   };
 }
 
-export function getOpenBtnProps({ set, unset, ...props }: Record<string, unknown>) {
+export function getOpenBtnProps({ set, ...props }: Record<string, unknown>) {
   return {
     as: 'button',
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
     hov: 'o',
     d: 'inline-flex',
     ...props,
   };
 }
 
-export function getCloseBtnProps({ set, unset, ...props }: Record<string, unknown>) {
+export function getCloseBtnProps({ set, ...props }: Record<string, unknown>) {
   return {
     as: 'button',
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
     hov: 'o',
     d: 'inline-flex',
     ...props,

package/src/components/NavMenu/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--navMenu {
     --link-td: none;
     --hl: var(--hl--s);

package/src/components/ShapeDivider/_style.css

@@ -1,5 +1,5 @@
 /* Note: scale 反転は、__inner に対して行う。shapeDivider自身を反転させると、X方向に隙間ができてしまう。 */
-@layer lism-modules {
+@layer lism-component {
   .c--shapeDivider {
     --level: 0;
 

package/src/components/Tabs/_style.css

@@ -1,7 +1,8 @@
-@layer lism-modules {
+@layer lism-component {
   .c--tabs {
     display: grid;
     grid: 'list' 'panel' / 100%;
+    gap: var(--s20);
   }
   .c--tabs_list {
     grid-area: list;
@@ -9,24 +10,21 @@
     overflow-x: auto;
   }
   .c--tabs_tab {
-    &[aria-selected='true'] {
-      --_notSelected: ;
-    }
-    &[aria-selected='false'] {
-      --_isSelected: ;
-    }
-    /* 非アクティブの時、薄いカラーに */
-    :where(&) {
-      color: var(--_notSelected, var(--text-2));
-    }
+    color: var(--_notSelected, var(--text-2));
+    background-color: var(--_isSelected, var(--base-2));
+    padding: 0.25em 0.75em;
+  }
+  .c--tabs_tab[aria-selected='true'] {
+    --_notSelected: ;
+  }
+  .c--tabs_tab[aria-selected='false'] {
+    --_isSelected: ;
   }
-
   .c--tabs_panel {
     grid-area: panel;
     width: 100%;
-
-    &:where([aria-hidden='true']) {
-      display: none;
-    }
+  }
+  .c--tabs_panel:where([aria-hidden='true']) {
+    display: none;
   }
 }

package/src/components/Tabs/getProps.ts

@@ -13,11 +13,11 @@ export default function getTabsProps({ lismClass, ...props }: TabsProps) {
   };
 }
 
-export function getTabProps({ set, unset, ...props }: Record<string, unknown>) {
+export function getTabProps({ set, ...props }: Record<string, unknown>) {
   return {
     as: 'button',
     lismClass: 'c--tabs_tab',
-    set: mergeSet('plain', set, unset),
+    set: mergeSet('plain', set),
     ...props,
   };
 }

package/dist/lism-css/dist/components/atomic/Decorator/getProps.js

@@ -1,15 +0,0 @@
-import c from "../../../lib/helper/atts.js";
-function d({ lismClass: e, size: s, clipPath: a, boxSizing: r, style: l, ...n }) {
-  const i = l ?? {};
-  a && (i.clipPath = a), r && (i.boxSizing = r);
-  const t = { ...n };
-  s && (t.ar = "1/1", t.w = s), t.style = i;
-  const o = {
-    lismClass: c(e, "a--decorator"),
-    "aria-hidden": "true"
-  };
-  return Object.assign(o, t);
-}
-export {
-  d as default
-};