@seed-design/css 1.2.15 → 2.0.0

package/recipes/{selectBoxCheckmark.layered.css → select-box-checkmark.layered.css}

@@ -1,5 +1,5 @@
 @layer seed-components {
-  .seed-selectBoxCheckmark__root {
+  .seed-select-box-checkmark__root {
     box-sizing: border-box;
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
@@ -7,7 +7,7 @@
     position: relative;
   }
 
-  .seed-selectBoxCheckmark__icon {
+  .seed-select-box-checkmark__icon {
     text-align: center;
     overflow: initial;
     width: 15px;
@@ -21,22 +21,22 @@
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+    .seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       color: var(--seed-color-fg-neutral-subtle);
     }
   }
 
   @media not all and (hover: hover) and (pointer: fine) {
-    .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    .seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
       color: var(--seed-color-fg-neutral-subtle);
     }
   }
 
-  .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
+  .seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
     color: var(--seed-color-fg-neutral);
   }
 
-  .seed-selectBoxCheckmark__icon:is(:disabled, [disabled], [data-disabled]) {
+  .seed-select-box-checkmark__icon:is(:disabled, [disabled], [data-disabled]) {
     color: var(--seed-color-fg-disabled);
   }
 }

package/recipes/{selectBoxCheckmark.layered.mjs → select-box-checkmark.layered.mjs}

@@ -1,14 +1,14 @@
-import './selectBoxCheckmark.layered.css';
+import './select-box-checkmark.layered.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const selectBoxCheckmarkSlotNames = [
   [
     "root",
-    "seed-selectBoxCheckmark__root"
+    "seed-select-box-checkmark__root"
   ],
   [
     "icon",
-    "seed-selectBoxCheckmark__icon"
+    "seed-select-box-checkmark__icon"
   ]
 ];
 
@@ -33,4 +33,4 @@ export function selectBoxCheckmark(props) {
 
 Object.assign(selectBoxCheckmark, { splitVariantProps: (props) => splitVariantProps(props, selectBoxCheckmarkVariantMap) });
 
-// @recipe(seed): selectBoxCheckmark
+// @recipe(seed): select-box-checkmark

package/recipes/{selectBoxCheckmark.mjs → select-box-checkmark.mjs}

@@ -1,14 +1,14 @@
-import './selectBoxCheckmark.css';
+import './select-box-checkmark.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const selectBoxCheckmarkSlotNames = [
   [
     "root",
-    "seed-selectBoxCheckmark__root"
+    "seed-select-box-checkmark__root"
   ],
   [
     "icon",
-    "seed-selectBoxCheckmark__icon"
+    "seed-select-box-checkmark__icon"
   ]
 ];
 
@@ -33,4 +33,4 @@ export function selectBoxCheckmark(props) {
 
 Object.assign(selectBoxCheckmark, { splitVariantProps: (props) => splitVariantProps(props, selectBoxCheckmarkVariantMap) });
 
-// @recipe(seed): selectBoxCheckmark
+// @recipe(seed): select-box-checkmark

package/recipes/side-navigation-inset.css

@@ -0,0 +1,4 @@
+.seed-side-navigation-inset {
+    flex-grow: 1;
+    overflow-y: auto
+}

package/recipes/side-navigation-inset.d.ts

@@ -0,0 +1,19 @@
+declare interface SideNavigationInsetVariant {
+  
+}
+
+declare type SideNavigationInsetVariantMap = {
+  [key in keyof SideNavigationInsetVariant]: Array<SideNavigationInsetVariant[key]>;
+};
+
+export declare type SideNavigationInsetVariantProps = Partial<SideNavigationInsetVariant>;
+
+export declare const sideNavigationInsetVariantMap: SideNavigationInsetVariantMap;
+
+export declare const sideNavigationInset: ((
+  props?: SideNavigationInsetVariantProps,
+) => string) & {
+  splitVariantProps: <T extends SideNavigationInsetVariantProps>(
+    props: T,
+  ) => [SideNavigationInsetVariantProps, Omit<T, keyof SideNavigationInsetVariantProps>];
+}

package/recipes/side-navigation-inset.layered.css

@@ -0,0 +1,6 @@
+@layer seed-components {
+  .seed-side-navigation-inset {
+    flex-grow: 1;
+    overflow-y: auto;
+  }
+}

package/recipes/side-navigation-inset.layered.mjs

@@ -0,0 +1,22 @@
+import './side-navigation-inset.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const sideNavigationInsetVariantMap = {};
+
+export const sideNavigationInsetVariantKeys = Object.keys(sideNavigationInsetVariantMap);
+
+export function sideNavigationInset(props) {
+  return createClassName(
+    "seed-side-navigation-inset",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(sideNavigationInset, { splitVariantProps: (props) => splitVariantProps(props, sideNavigationInsetVariantMap) });
+
+// @recipe(seed): side-navigation-inset

package/recipes/side-navigation-inset.mjs

@@ -0,0 +1,22 @@
+import './side-navigation-inset.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const sideNavigationInsetVariantMap = {};
+
+export const sideNavigationInsetVariantKeys = Object.keys(sideNavigationInsetVariantMap);
+
+export function sideNavigationInset(props) {
+  return createClassName(
+    "seed-side-navigation-inset",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(sideNavigationInset, { splitVariantProps: (props) => splitVariantProps(props, sideNavigationInsetVariantMap) });
+
+// @recipe(seed): side-navigation-inset

package/recipes/side-navigation-menu-item.css

@@ -0,0 +1,135 @@
+.seed-side-navigation-menu-item__root {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 44px;
+    padding-left: 8px;
+    padding-right: 8px;
+    width: 100%;
+    overflow: hidden;
+    text-align: left;
+    background: none;
+    border: none;
+    border-radius: 10px;
+    outline: none;
+    transition: padding 200ms, background-color 200ms;
+    scroll-margin-top: 8px;
+    scroll-margin-bottom: 24px;
+}
+.seed-side-navigation-menu-item__root::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 10px;
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+    transition: background-color 200ms, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-side-navigation-menu-item__root:is(:focus-visible, [data-focus-visible])::before {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+.seed-side-navigation-menu-item__root[data-side-navigation-state=collapsed]::before {
+    right: unset;
+    width: calc(56px - 8px * 2);
+}
+.seed-side-navigation-menu-item__root:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+}
+.seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])) {
+    cursor: pointer;
+}
+@media (hover: hover) and (pointer: fine) {
+    .seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):not([data-current]):is(:hover, [data-hover])::before {
+        background-color: var(--seed-color-bg-transparent-pressed);
+    }
+}
+@media not all and (hover: hover) and (pointer: fine) {
+    .seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):not([data-current]):is(:active, [data-active])::before {
+        background-color: var(--seed-color-bg-transparent-pressed);
+    }
+}
+.seed-side-navigation-menu-item__root[data-current] {
+    background-color: var(--seed-color-bg-transparent-selected);
+}
+@media (hover: hover) and (pointer: fine) {
+    .seed-side-navigation-menu-item__root[data-current]:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+        background-color: var(--seed-color-bg-transparent-selected-pressed);
+    }
+}
+@media not all and (hover: hover) and (pointer: fine) {
+    .seed-side-navigation-menu-item__root[data-current]:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+        background-color: var(--seed-color-bg-transparent-selected-pressed);
+    }
+}
+.seed-side-navigation-menu-item__root[data-side-navigation-state=collapsed] {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.seed-side-navigation-menu-item__prefixIcon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    color: var(--seed-color-palette-gray-600);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: color 200ms;
+}
+.seed-side-navigation-menu-item__prefixIcon[data-current] {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-side-navigation-menu-item__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-side-navigation-menu-item__label {
+    padding: 6px;
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--seed-color-fg-neutral-muted);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+    padding-left: calc(20px + 12px);
+    transition: opacity 200ms, color 200ms;
+}
+.seed-side-navigation-menu-item__label[data-side-navigation-state=collapsed] {
+    opacity: 0;
+}
+.seed-side-navigation-menu-item__label[data-current] {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-side-navigation-menu-item__label:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-side-navigation-menu-item__suffixIcon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-subtle);
+    transition: transform 200ms, opacity 200ms;
+}
+.seed-side-navigation-menu-item__suffixIcon:not(:is([data-state="open"], [data-open])) {
+    transform: rotate(180deg);
+}
+.seed-side-navigation-menu-item__suffixIcon[data-side-navigation-state=collapsed] {
+    opacity: 0;
+}
+.seed-side-navigation-menu-item__panel[data-collapsible] {
+    overflow: hidden;
+    height: 0;
+    opacity: 0;
+    transition: height 200ms, opacity 200ms;
+}
+.seed-side-navigation-menu-item__panel[data-collapsible]:is([data-state="open"], [data-open]) {
+    height: var(--collapsible-content-height);
+    opacity: 1;
+    transition: height 200ms, opacity 200ms;
+}

package/recipes/side-navigation-menu-item.d.ts

@@ -0,0 +1,21 @@
+declare interface SideNavigationMenuItemVariant {
+  
+}
+
+declare type SideNavigationMenuItemVariantMap = {
+  [key in keyof SideNavigationMenuItemVariant]: Array<SideNavigationMenuItemVariant[key]>;
+};
+
+export declare type SideNavigationMenuItemVariantProps = Partial<SideNavigationMenuItemVariant>;
+
+export declare type SideNavigationMenuItemSlotName = "root" | "prefixIcon" | "label" | "suffixIcon" | "panel";
+
+export declare const sideNavigationMenuItemVariantMap: SideNavigationMenuItemVariantMap;
+
+export declare const sideNavigationMenuItem: ((
+  props?: SideNavigationMenuItemVariantProps,
+) => Record<SideNavigationMenuItemSlotName, string>) & {
+  splitVariantProps: <T extends SideNavigationMenuItemVariantProps>(
+    props: T,
+  ) => [SideNavigationMenuItemVariantProps, Omit<T, keyof SideNavigationMenuItemVariantProps>];
+}

package/recipes/side-navigation-menu-item.layered.css

@@ -0,0 +1,156 @@
+@layer seed-components {
+  .seed-side-navigation-menu-item__root {
+    text-align: left;
+    background: none;
+    border: none;
+    border-radius: 10px;
+    outline: none;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    height: 44px;
+    padding-left: 8px;
+    padding-right: 8px;
+    scroll-margin-top: 8px;
+    scroll-margin-bottom: 24px;
+    transition: padding .2s, background-color .2s;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .seed-side-navigation-menu-item__root:before {
+    content: "";
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+    transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    border-radius: 10px;
+    position: absolute;
+    inset: 0;
+  }
+
+  .seed-side-navigation-menu-item__root:is(:focus-visible, [data-focus-visible]):before {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  }
+
+  .seed-side-navigation-menu-item__root[data-side-navigation-state="collapsed"]:before {
+    right: unset;
+    width: 40px;
+  }
+
+  .seed-side-navigation-menu-item__root:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  .seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])) {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):not([data-current]):is(:hover, [data-hover]):before {
+      background-color: var(--seed-color-bg-transparent-pressed);
+    }
+  }
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):not([data-current]):is(:active, [data-active]):before {
+      background-color: var(--seed-color-bg-transparent-pressed);
+    }
+  }
+
+  .seed-side-navigation-menu-item__root[data-current] {
+    background-color: var(--seed-color-bg-transparent-selected);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .seed-side-navigation-menu-item__root[data-current]:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+      background-color: var(--seed-color-bg-transparent-selected-pressed);
+    }
+  }
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .seed-side-navigation-menu-item__root[data-current]:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+      background-color: var(--seed-color-bg-transparent-selected-pressed);
+    }
+  }
+
+  .seed-side-navigation-menu-item__root[data-side-navigation-state="collapsed"] {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .seed-side-navigation-menu-item__prefixIcon {
+    width: 20px;
+    height: 20px;
+    color: var(--seed-color-palette-gray-600);
+    flex-shrink: 0;
+    transition: color .2s;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .seed-side-navigation-menu-item__prefixIcon[data-current] {
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-side-navigation-menu-item__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-side-navigation-menu-item__label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    color: var(--seed-color-fg-neutral-muted);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+    flex-grow: 1;
+    padding: 6px 6px 6px 32px;
+    transition: opacity .2s, color .2s;
+    overflow: hidden;
+  }
+
+  .seed-side-navigation-menu-item__label[data-side-navigation-state="collapsed"] {
+    opacity: 0;
+  }
+
+  .seed-side-navigation-menu-item__label[data-current] {
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-side-navigation-menu-item__label:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-side-navigation-menu-item__suffixIcon {
+    width: 16px;
+    height: 16px;
+    color: var(--seed-color-fg-neutral-subtle);
+    flex-shrink: 0;
+    transition: transform .2s, opacity .2s;
+  }
+
+  .seed-side-navigation-menu-item__suffixIcon:not(:is([data-state="open"], [data-open])) {
+    transform: rotate(180deg);
+  }
+
+  .seed-side-navigation-menu-item__suffixIcon[data-side-navigation-state="collapsed"] {
+    opacity: 0;
+  }
+
+  .seed-side-navigation-menu-item__panel[data-collapsible] {
+    opacity: 0;
+    height: 0;
+    transition: height .2s, opacity .2s;
+    overflow: hidden;
+  }
+
+  .seed-side-navigation-menu-item__panel[data-collapsible]:is([data-state="open"], [data-open]) {
+    height: var(--collapsible-content-height);
+    opacity: 1;
+    transition: height .2s, opacity .2s;
+  }
+}

package/recipes/side-navigation-menu-item.layered.mjs

@@ -0,0 +1,48 @@
+import './side-navigation-menu-item.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const sideNavigationMenuItemSlotNames = [
+  [
+    "root",
+    "seed-side-navigation-menu-item__root"
+  ],
+  [
+    "prefixIcon",
+    "seed-side-navigation-menu-item__prefixIcon"
+  ],
+  [
+    "label",
+    "seed-side-navigation-menu-item__label"
+  ],
+  [
+    "suffixIcon",
+    "seed-side-navigation-menu-item__suffixIcon"
+  ],
+  [
+    "panel",
+    "seed-side-navigation-menu-item__panel"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const sideNavigationMenuItemVariantMap = {};
+
+export const sideNavigationMenuItemVariantKeys = Object.keys(sideNavigationMenuItemVariantMap);
+
+export function sideNavigationMenuItem(props) {
+  return Object.fromEntries(
+    sideNavigationMenuItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(sideNavigationMenuItem, { splitVariantProps: (props) => splitVariantProps(props, sideNavigationMenuItemVariantMap) });
+
+// @recipe(seed): side-navigation-menu-item

package/recipes/side-navigation-menu-item.mjs

@@ -0,0 +1,48 @@
+import './side-navigation-menu-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const sideNavigationMenuItemSlotNames = [
+  [
+    "root",
+    "seed-side-navigation-menu-item__root"
+  ],
+  [
+    "prefixIcon",
+    "seed-side-navigation-menu-item__prefixIcon"
+  ],
+  [
+    "label",
+    "seed-side-navigation-menu-item__label"
+  ],
+  [
+    "suffixIcon",
+    "seed-side-navigation-menu-item__suffixIcon"
+  ],
+  [
+    "panel",
+    "seed-side-navigation-menu-item__panel"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const sideNavigationMenuItemVariantMap = {};
+
+export const sideNavigationMenuItemVariantKeys = Object.keys(sideNavigationMenuItemVariantMap);
+
+export function sideNavigationMenuItem(props) {
+  return Object.fromEntries(
+    sideNavigationMenuItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(sideNavigationMenuItem, { splitVariantProps: (props) => splitVariantProps(props, sideNavigationMenuItemVariantMap) });
+
+// @recipe(seed): side-navigation-menu-item