@seed-design/css 1.1.17 → 1.2.0

package/recipes/switch.css

@@ -22,7 +22,7 @@
 .seed-switch__root--size_16 {
     min-height: var(--seed-dimension-x6);
     gap: var(--seed-dimension-x1_5);
-    --switch-mark-margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
+    --switchmark-margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
 }
 .seed-switch__label--size_16 {
     font-size: var(--seed-font-size-t3);
@@ -32,7 +32,7 @@
 .seed-switch__root--size_24 {
     min-height: var(--seed-dimension-x6);
     gap: var(--seed-dimension-x2);
-    --switch-mark-margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
+    --switchmark-margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
 }
 .seed-switch__label--size_24 {
     font-size: var(--seed-font-size-t4);
@@ -42,7 +42,7 @@
 .seed-switch__root--size_32 {
     min-height: var(--seed-dimension-x8);
     gap: var(--seed-dimension-x2_5);
-    --switch-mark-margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
+    --switchmark-margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
 }
 .seed-switch__label--size_32 {
     font-size: var(--seed-font-size-t5);

package/recipes/{switch-mark.css → switchmark.css}

@@ -1,71 +1,71 @@
-.seed-switch-mark__root {
+.seed-switchmark__root {
     box-sizing: border-box;
     display: block;
     position: relative;
     border-radius: var(--seed-radius-full);
     background: var(--seed-color-palette-gray-600);
-    margin: var(--switch-mark-margin-top, 0) 0;
+    margin: var(--switchmark-margin-top, 0) 0;
     transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
 }
-.seed-switch-mark__root:is(:disabled, [disabled], [data-disabled]) {
+.seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
     opacity: 0.38;
 }
-.seed-switch-mark__thumb {
+.seed-switchmark__thumb {
     border-radius: var(--seed-radius-full);
     transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;
     transform: scale(0.8);
 }
-.seed-switch-mark__root--tone_neutral:is(:checked, [data-checked]) {
+.seed-switchmark__root--tone_neutral:is(:checked, [data-checked]) {
     background: var(--seed-color-bg-neutral-inverted);
 }
-.seed-switch-mark__root--tone_neutral:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
+.seed-switchmark__root--tone_neutral:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
     background: var(--seed-color-palette-gray-600);
 }
-.seed-switch-mark__thumb--tone_neutral {
+.seed-switchmark__thumb--tone_neutral {
     background: var(--seed-color-fg-neutral-inverted);
 }
-.seed-switch-mark__thumb--tone_neutral:is(:disabled, [disabled], [data-disabled]) {
+.seed-switchmark__thumb--tone_neutral:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-palette-static-black-alpha-700);
 }
-.seed-switch-mark__root--tone_brand:is(:checked, [data-checked]) {
+.seed-switchmark__root--tone_brand:is(:checked, [data-checked]) {
     background: var(--seed-color-bg-brand-solid);
 }
-.seed-switch-mark__thumb--tone_brand {
+.seed-switchmark__thumb--tone_brand {
     background: var(--seed-color-palette-static-white);
 }
-.seed-switch-mark__root--size_16 {
+.seed-switchmark__root--size_16 {
     min-width: 26px;
     min-height: 16px;
     padding: 2px 2px;
 }
-.seed-switch-mark__thumb--size_16 {
+.seed-switchmark__thumb--size_16 {
     width: 12px;
     height: 12px;
 }
-.seed-switch-mark__thumb--size_16:is(:checked, [data-checked]) {
+.seed-switchmark__thumb--size_16:is(:checked, [data-checked]) {
     transform: scale(1) translateX(calc(26px - 16px));
 }
-.seed-switch-mark__root--size_24 {
+.seed-switchmark__root--size_24 {
     min-width: 38px;
     min-height: 24px;
     padding: 2px 2px;
 }
-.seed-switch-mark__thumb--size_24 {
+.seed-switchmark__thumb--size_24 {
     width: 20px;
     height: 20px;
 }
-.seed-switch-mark__thumb--size_24:is(:checked, [data-checked]) {
+.seed-switchmark__thumb--size_24:is(:checked, [data-checked]) {
     transform: scale(1) translateX(calc(38px - 24px));
 }
-.seed-switch-mark__root--size_32 {
+.seed-switchmark__root--size_32 {
     min-width: 52px;
     min-height: 32px;
     padding: 3px 3px;
 }
-.seed-switch-mark__thumb--size_32 {
+.seed-switchmark__thumb--size_32 {
     width: 26px;
     height: 26px;
 }
-.seed-switch-mark__thumb--size_32:is(:checked, [data-checked]) {
+.seed-switchmark__thumb--size_32:is(:checked, [data-checked]) {
     transform: scale(1) translateX(calc(52px - 32px));
 }

package/recipes/switchmark.d.ts

@@ -0,0 +1,28 @@
+declare interface SwitchmarkVariant {
+  /**
+  * @default "brand"
+  */
+  tone: "neutral" | "brand";
+/**
+  * @default 32
+  */
+  size: "16" | "24" | "32";
+}
+
+declare type SwitchmarkVariantMap = {
+  [key in keyof SwitchmarkVariant]: Array<SwitchmarkVariant[key]>;
+};
+
+export declare type SwitchmarkVariantProps = Partial<SwitchmarkVariant>;
+
+export declare type SwitchmarkSlotName = "root" | "thumb";
+
+export declare const switchmarkVariantMap: SwitchmarkVariantMap;
+
+export declare const switchmark: ((
+  props?: SwitchmarkVariantProps,
+) => Record<SwitchmarkSlotName, string>) & {
+  splitVariantProps: <T extends SwitchmarkVariantProps>(
+    props: T,
+  ) => [SwitchmarkVariantProps, Omit<T, keyof SwitchmarkVariantProps>];
+}

package/recipes/{switch-mark.mjs → switchmark.mjs}

@@ -1,14 +1,14 @@
-import './switch-mark.css';
+import './switchmark.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const switchMarkSlotNames = [
+const switchmarkSlotNames = [
   [
     "root",
-    "seed-switch-mark__root"
+    "seed-switchmark__root"
   ],
   [
     "thumb",
-    "seed-switch-mark__thumb"
+    "seed-switchmark__thumb"
   ]
 ];
 
@@ -19,7 +19,7 @@ const defaultVariant = {
 
 const compoundVariants = [];
 
-export const switchMarkVariantMap = {
+export const switchmarkVariantMap = {
   "tone": [
     "neutral",
     "brand"
@@ -31,11 +31,11 @@ export const switchMarkVariantMap = {
   ]
 };
 
-export const switchMarkVariantKeys = Object.keys(switchMarkVariantMap);
+export const switchmarkVariantKeys = Object.keys(switchmarkVariantMap);
 
-export function switchMark(props) {
+export function switchmark(props) {
   return Object.fromEntries(
-    switchMarkSlotNames.map(([slot, className]) => {
+    switchmarkSlotNames.map(([slot, className]) => {
       return [
         slot,
         createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
@@ -44,6 +44,6 @@ export function switchMark(props) {
   );
 }
 
-Object.assign(switchMark, { splitVariantProps: (props) => splitVariantProps(props, switchMarkVariantMap) });
+Object.assign(switchmark, { splitVariantProps: (props) => splitVariantProps(props, switchmarkVariantMap) });
 
-// @recipe(seed): switch-mark
+// @recipe(seed): switchmark

package/recipes/tag-group-item.css

@@ -1,50 +1,79 @@
-.seed-tag-group-item {
-    display: flex;
+.seed-tag-group-item__root {
+    display: var(--tag-group-item-display);
     align-items: center;
-    gap: var(--seed-dimension-x0_5)
+    vertical-align: middle;
+    flex-shrink: var(--seed-box-flex-shrink, 1);
+    min-width: 0;
 }
-.seed-tag-group-item--size_t2 {
+.seed-tag-group-item__label {
+    display: inline;
+    vertical-align: middle;
+    min-width: 0;
+    overflow: var(--tag-group-item-overflow);
+    text-overflow: var(--tag-group-item-text-overflow);
+    white-space: var(--tag-group-item-white-space);
+    word-break: normal;
+}
+.seed-tag-group-item__label:not(:first-child) {
+    margin-left: var(--seed-dimension-x0_5);
+}
+.seed-tag-group-item__label:not(:last-child) {
+    margin-right: var(--seed-dimension-x0_5);
+}
+.seed-tag-group-item__root--size_t2 {
+    --seed-prefix-icon-size: var(--seed-dimension-x3);
+    --seed-suffix-icon-size: var(--seed-dimension-x3);
+    --seed-icon-size: var(--seed-dimension-x3);
+}
+.seed-tag-group-item__label--size_t2 {
     font-size: var(--seed-font-size-t2);
     line-height: var(--seed-line-height-t2);
-    --seed-icon-size: var(--seed-dimension-x3);
-    --seed-prefix-icon-size: var(--seed-dimension-x3);
-    --seed-suffix-icon-size: var(--seed-dimension-x3)
 }
-.seed-tag-group-item--size_t3 {
+.seed-tag-group-item__root--size_t3 {
+    --seed-prefix-icon-size: 13px;
+    --seed-suffix-icon-size: 13px;
+    --seed-icon-size: 13px;
+}
+.seed-tag-group-item__label--size_t3 {
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
-    --seed-icon-size: 13px;
-    --seed-prefix-icon-size: 13px;
-    --seed-suffix-icon-size: 13px
 }
-.seed-tag-group-item--size_t4 {
+.seed-tag-group-item__root--size_t4 {
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+    --seed-icon-size: var(--seed-dimension-x3_5);
+}
+.seed-tag-group-item__label--size_t4 {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
-    --seed-icon-size: var(--seed-dimension-x3_5);
-    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5)
 }
-.seed-tag-group-item--weight_regular {
-    font-weight: var(--seed-font-weight-regular)
+.seed-tag-group-item__label--weight_regular {
+    font-weight: var(--seed-font-weight-regular);
 }
-.seed-tag-group-item--weight_bold {
-    font-weight: var(--seed-font-weight-bold)
+.seed-tag-group-item__label--weight_bold {
+    font-weight: var(--seed-font-weight-bold);
 }
-.seed-tag-group-item--tone_neutralSubtle {
-    color: var(--seed-color-fg-neutral-subtle);
-    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+.seed-tag-group-item__root--tone_neutralSubtle {
     --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
-    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle)
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
+    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
 }
-.seed-tag-group-item--tone_neutral {
-    color: var(--seed-color-fg-neutral);
-    --seed-icon-color: var(--seed-color-fg-neutral);
+.seed-tag-group-item__label--tone_neutralSubtle {
+    color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-tag-group-item__root--tone_neutral {
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --seed-suffix-icon-color: var(--seed-color-fg-neutral)
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+    --seed-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-tag-group-item--tone_brand {
-    color: var(--seed-color-fg-brand);
-    --seed-icon-color: var(--seed-color-fg-brand);
+.seed-tag-group-item__label--tone_neutral {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-tag-group-item__root--tone_brand {
     --seed-prefix-icon-color: var(--seed-color-fg-brand);
-    --seed-suffix-icon-color: var(--seed-color-fg-brand)
+    --seed-suffix-icon-color: var(--seed-color-fg-brand);
+    --seed-icon-color: var(--seed-color-fg-brand);
+}
+.seed-tag-group-item__label--tone_brand {
+    color: var(--seed-color-fg-brand);
 }

package/recipes/tag-group-item.d.ts

@@ -19,11 +19,13 @@ declare type TagGroupItemVariantMap = {
 
 export declare type TagGroupItemVariantProps = Partial<TagGroupItemVariant>;
 
+export declare type TagGroupItemSlotName = "root" | "label";
+
 export declare const tagGroupItemVariantMap: TagGroupItemVariantMap;
 
 export declare const tagGroupItem: ((
   props?: TagGroupItemVariantProps,
-) => string) & {
+) => Record<TagGroupItemSlotName, string>) & {
   splitVariantProps: <T extends TagGroupItemVariantProps>(
     props: T,
   ) => [TagGroupItemVariantProps, Omit<T, keyof TagGroupItemVariantProps>];

package/recipes/tag-group-item.mjs

@@ -1,6 +1,17 @@
 import './tag-group-item.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
+const tagGroupItemSlotNames = [
+  [
+    "root",
+    "seed-tag-group-item__root"
+  ],
+  [
+    "label",
+    "seed-tag-group-item__label"
+  ]
+];
+
 const defaultVariant = {
   "size": "t2",
   "weight": "regular",
@@ -29,10 +40,13 @@ export const tagGroupItemVariantMap = {
 export const tagGroupItemVariantKeys = Object.keys(tagGroupItemVariantMap);
 
 export function tagGroupItem(props) {
-  return createClassName(
-    "seed-tag-group-item",
-    mergeVariants(defaultVariant, props),
-    compoundVariants,
+  return Object.fromEntries(
+    tagGroupItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
   );
 }
 

package/recipes/tag-group.css

@@ -1,8 +1,3 @@
-.seed-tag-group__root {
-    display: inline-flex;
-    align-items: center;
-    flex-wrap: wrap
-}
 .seed-tag-group__separator {
     color: var(--seed-color-palette-gray-600);
     font-weight: var(--seed-font-weight-regular);
@@ -20,4 +15,33 @@
 .seed-tag-group__separator--size_t4 {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4)
+}
+.seed-tag-group__root--truncate_true {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    --tag-group-item-display: inline-flex;
+    --tag-group-item-overflow: hidden;
+    --tag-group-item-text-overflow: ellipsis;
+    --tag-group-item-white-space: nowrap
+}
+.seed-tag-group__root--truncate_false {
+    display: inline-block;
+    font-size: 0;
+    --tag-group-item-display: inline;
+    --tag-group-item-overflow: visible;
+    --tag-group-item-text-overflow: clip;
+    --tag-group-item-white-space: normal
+}
+.seed-tag-group__separator--truncate_false {
+    vertical-align: middle
+}
+.seed-tag-group__root--size_t2-truncate_false {
+    line-height: var(--seed-line-height-t2)
+}
+.seed-tag-group__root--size_t3-truncate_false {
+    line-height: var(--seed-line-height-t3)
+}
+.seed-tag-group__root--size_t4-truncate_false {
+    line-height: var(--seed-line-height-t4)
 }

package/recipes/tag-group.d.ts

@@ -3,6 +3,10 @@ declare interface TagGroupVariant {
   * @default "t2"
   */
   size: "t2" | "t3" | "t4";
+/**
+  * @default false
+  */
+  truncate: boolean;
 }
 
 declare type TagGroupVariantMap = {

package/recipes/tag-group.mjs

@@ -13,16 +13,34 @@ const tagGroupSlotNames = [
 ];
 
 const defaultVariant = {
-  "size": "t2"
+  "size": "t2",
+  "truncate": false
 };
 
-const compoundVariants = [];
+const compoundVariants = [
+  {
+    "size": "t2",
+    "truncate": false
+  },
+  {
+    "size": "t3",
+    "truncate": false
+  },
+  {
+    "size": "t4",
+    "truncate": false
+  }
+];
 
 export const tagGroupVariantMap = {
   "size": [
     "t2",
     "t3",
     "t4"
+  ],
+  "truncate": [
+    true,
+    false
   ]
 };
 

package/recipes/text-input.css

@@ -3,7 +3,19 @@
     width: 100%;
     align-items: center;
     overflow: hidden;
-    transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+    position: relative;
+}
+.seed-text-input__root::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: inherit;
+    border-color: transparent;
+    transition: border-color 0.1s var(--seed-timing-function-easing);
+    pointer-events: none;
 }
 .seed-text-input__value {
     box-sizing: border-box;
@@ -62,14 +74,21 @@
     border-radius: var(--seed-radius-r3);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
 }
-.seed-text-input__root--variant_outline:not(:is([data-readonly])):is(:focus, [data-focus]) {
-    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast);
+.seed-text-input__root--variant_outline::after {
+    border-style: solid;
+    border-width: 2px;
 }
-.seed-text-input__root--variant_outline:is(:invalid, [data-invalid]) {
-    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-critical-solid);
+.seed-text-input__root--variant_outline:not(:is([data-readonly])):is(:focus, [data-focus])::after {
+    border-color: var(--seed-color-stroke-neutral-contrast);
+    border-width: 2px;
 }
-.seed-text-input__root--variant_outline:is(:invalid, [data-invalid]):is(:focus, [data-focus]) {
-    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-critical-solid);
+.seed-text-input__root--variant_outline:is(:invalid, [data-invalid])::after {
+    border-color: var(--seed-color-stroke-critical-solid);
+    border-width: 2px;
+}
+.seed-text-input__root--variant_outline:is(:invalid, [data-invalid]):is(:focus, [data-focus])::after {
+    border-color: var(--seed-color-stroke-critical-solid);
+    border-width: 2px;
 }
 .seed-text-input__root--variant_outline:is(:disabled, [disabled], [data-disabled]) {
     background-color: var(--seed-color-bg-disabled);
@@ -100,14 +119,21 @@
     min-height: var(--seed-dimension-x10);
     box-shadow: inset 0 calc(1px * -1) 0 0 var(--seed-color-stroke-neutral-weak);
 }
-.seed-text-input__root--variant_underline:not(:is([data-readonly])):is(:focus, [data-focus]) {
-    box-shadow: inset 0 calc(2px * -1) 0 0 var(--seed-color-stroke-neutral-contrast);
+.seed-text-input__root--variant_underline::after {
+    border-bottom-style: solid;
+    border-bottom-width: 2px;
+}
+.seed-text-input__root--variant_underline:not(:is([data-readonly])):is(:focus, [data-focus])::after {
+    border-bottom-color: var(--seed-color-stroke-neutral-contrast);
+    border-bottom-width: 2px;
 }
-.seed-text-input__root--variant_underline:is(:invalid, [data-invalid]) {
-    box-shadow: inset 0 calc(2px * -1) 0 0 var(--seed-color-stroke-critical-solid);
+.seed-text-input__root--variant_underline:is(:invalid, [data-invalid])::after {
+    border-bottom-color: var(--seed-color-stroke-critical-solid);
+    border-bottom-width: 2px;
 }
-.seed-text-input__root--variant_underline:is(:invalid, [data-invalid]):is(:focus, [data-focus]) {
-    box-shadow: inset 0 calc(2px * -1) 0 0 var(--seed-color-stroke-critical-solid);
+.seed-text-input__root--variant_underline:is(:invalid, [data-invalid]):is(:focus, [data-focus])::after {
+    border-bottom-color: var(--seed-color-stroke-critical-solid);
+    border-bottom-width: 2px;
 }
 .seed-text-input__value--variant_underline {
     font-size: var(--seed-font-size-t6);

package/vars/component/checkbox-group.d.ts

@@ -0,0 +1,9 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gapY": "var(--seed-dimension-x1)"
+      }
+    }
+  }
+}

package/vars/component/checkbox-group.mjs

@@ -0,0 +1,9 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gapY": "var(--seed-dimension-x1)"
+      }
+    }
+  }
+}

package/vars/component/help-bubble.d.ts

@@ -6,6 +6,7 @@ export declare const vars: {
         "cornerRadius": "var(--seed-radius-r3)",
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
+        "gap": "var(--seed-dimension-x1)",
         "enterScale": "0.9",
         "enterOpacity": "0",
         "enterDuration": "var(--seed-duration-d4)",
@@ -25,6 +26,9 @@ export declare const vars: {
         /** arrow와 root의 경계 사이의 최소 간격을 정의합니다. */
         "padding": "14px"
       },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)"
+      },
       "title": {
         "color": "var(--seed-color-fg-neutral-inverted)",
         "fontSize": "var(--seed-font-size-t3)",
@@ -39,10 +43,9 @@ export declare const vars: {
       },
       "closeButton": {
         "color": "var(--seed-color-fg-neutral-inverted)",
-        "fromRight": "12px",
-        "fromTop": "12px",
-        "size": "14px",
-        "targetSize": "32px"
+        "size": "var(--seed-dimension-x3_5)",
+        "targetSize": "38px",
+        "marginTop": "var(--seed-dimension-x0_5)"
       }
     }
   }

package/vars/component/help-bubble.mjs

@@ -6,6 +6,7 @@ export const vars = {
         "cornerRadius": "var(--seed-radius-r3)",
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
+        "gap": "var(--seed-dimension-x1)",
         "enterScale": "0.9",
         "enterOpacity": "0",
         "enterDuration": "var(--seed-duration-d4)",
@@ -23,6 +24,9 @@ export const vars = {
         "gutter": "4px",
         "padding": "14px"
       },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)"
+      },
       "title": {
         "color": "var(--seed-color-fg-neutral-inverted)",
         "fontSize": "var(--seed-font-size-t3)",
@@ -37,10 +41,9 @@ export const vars = {
       },
       "closeButton": {
         "color": "var(--seed-color-fg-neutral-inverted)",
-        "fromRight": "12px",
-        "fromTop": "12px",
-        "size": "14px",
-        "targetSize": "32px"
+        "size": "var(--seed-dimension-x3_5)",
+        "targetSize": "38px",
+        "marginTop": "var(--seed-dimension-x0_5)"
       }
     }
   }

package/vars/component/image-frame-floater.d.ts

@@ -0,0 +1,10 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        /** 오버레이가 이미지 프레임 가장자리에서 떨어진 거리입니다. */
+        "offset": "6px"
+      }
+    }
+  }
+}

package/vars/component/image-frame-floater.mjs

@@ -0,0 +1,9 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "offset": "6px"
+      }
+    }
+  }
+}

package/vars/component/image-frame-indicator.d.ts

@@ -0,0 +1,20 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        /** 인디케이터 배경색입니다. */
+        "color": "var(--seed-color-palette-static-black-alpha-800)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "paddingX": "var(--seed-dimension-x1_5)",
+        "paddingY": "var(--seed-dimension-x0_5)"
+      },
+      "label": {
+        /** 인디케이터 배경색입니다. */
+        "color": "var(--seed-color-palette-static-white)",
+        "fontSize": "var(--seed-font-size-t1)",
+        "lineHeight": "var(--seed-line-height-t1)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  }
+}