@fewbox/den-web 0.2.0-preview.2 → 0.2.0-preview.21

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@fewbox/den-web",
-  "version": "0.2.0-preview.2",
+  "version": "0.2.0-preview.21",
   "main": "index.js",
   "types": "index-web.d.ts",
   "repository": "https://github.com/FewBox/fewbox-den.git",
   "author": "FewBox Support <support@fewbox.com>",
   "license": "Apache-2.0",
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index-web.d.ts",
+      "react-server": "./server.js",
+      "default": "./index.js"
+    },
+    "./index.css": "./index.css",
+    "./*": "./*"
+  },
   "scripts": {
     "postinstall": "node scripts/copy-templates.js"
   },

package/scripts/generate-packages.js

@@ -21,6 +21,18 @@ for (const registry of registries) {
       type: common.type,
     };
 
+    if (variantConfig.hasServerEntry) {
+      pkg.exports = {
+        '.': {
+          types: `./${variantConfig.types}`,
+          'react-server': './server.js',
+          default: './index.js',
+        },
+        './index.css': './index.css',
+        './*': './*',
+      };
+    }
+
     if (variantConfig.hasPostinstall) {
       pkg.scripts = { postinstall: 'node scripts/copy-templates.js' };
     }

package/server.js

@@ -0,0 +1,71 @@
+// Engine constants
+export {
+    ColorType,
+    FontSizeType,
+    FontWeightType,
+    FontFamilyType,
+    LineHeightType,
+    PaddingType,
+    MarginType,
+    GapType,
+    LetterSpacingType,
+    BorderRadiusType,
+    BorderStyleType,
+    BorderWidthType,
+    VisibilityType,
+    DisplayType,
+    CursorType,
+    OverflowType,
+    OverflowXType,
+    OverflowYType,
+    OpacityType,
+    ViewSizeType,
+    PseudoType,
+    DirectionType,
+    getGeneratedClassName,
+    getWeightValue,
+    // Layout constants
+    ZoneCategory,
+    ScreenSizeType,
+    BreakpointCategory,
+    BreakpointType,
+    DockCategory,
+    DockAlignment,
+    PositionCategory,
+    PositionType,
+    PositionAreaCategory,
+    FlexDirectionType,
+    FlexWrapType,
+    FlexJustifyContentType,
+    FlexAlignItemsType,
+    FlexAlignContentType,
+    FlexItemAlignSelfType,
+    XCrossType,
+    YCrossType,
+    // View constants
+    BackgroundPositionType,
+    HandleSubmitCategory,
+    FileCategory,
+    SvgCategory,
+    HyperlinkCategory,
+    ImageCategory,
+    LabelCategory,
+    LabelType,
+    LabelAlignType,
+    TextCategory,
+    TextAlignType,
+    EllipseCategory,
+    LineCategory,
+    ShadowCategory,
+    AnimationCategory,
+    AnimationDelay,
+    AnimationRepeat,
+    AnimationSpeed,
+    RootCategory,
+    ThemeCategory,
+    TooltipCategory,
+    // Util
+    convertFormDataToJson
+} from './engine.js';
+
+export * from './index.js';

package/src/components/Engine/Base/index.d.ts

@@ -1,4 +1,4 @@
-import { DirectionType, FullColorType, PseudoType, FullFontSizeType, FontWeightType, FullBorderRadiusType, FullBorderStyleType, FullBorderWidthType, FullPaddingType, FullMarginType, OpacityType, FullDisplayType, FullVisibilityType, FullCursorType, FullOverflowType, FullOverflowXType, FullOverflowYType } from '..';
+import { DirectionType, FullColorType, PseudoType, FullFontSizeType, FontWeightType, FullBorderRadiusType, FullBorderStyleType, FullBorderWidthType, FullPaddingType, FullMarginType, FullOpacityType, FullLetterSpacingType, FullDisplayType, FullVisibilityType, FullCursorType, FullOverflowType, FullOverflowXType, FullOverflowYType } from '..';
 import { Property } from 'csstype';
 export interface IViewProps {
     className?: string;
@@ -20,7 +20,7 @@ export interface IViewProps {
     borderWidth?: FullBorderWidthType;
     padding?: FullPaddingType;
     margin?: FullMarginType;
-    opacity?: OpacityType;
+    opacity?: FullOpacityType;
     display?: FullDisplayType;
     visibility?: FullVisibilityType;
     cursor?: FullCursorType;
@@ -33,7 +33,7 @@ export interface IViewProps {
     minWidth?: Property.Width;
     maxHeight?: Property.Width;
     maxWidth?: Property.Width;
-    letterSpacing?: Property.LetterSpacing;
+    letterSpacing?: FullLetterSpacingType;
     lineHeight?: Property.LineHeight;
     overflowX?: FullOverflowXType;
     overflowY?: FullOverflowYType;

package/src/components/Engine/index.d.ts

@@ -80,7 +80,7 @@ export declare const PaddingType: {
     readonly ExtraLarge: "padding-extra-large";
 };
 export type PaddingType = typeof PaddingType[keyof typeof PaddingType];
-export type FullPaddingType = PaddingType | string;
+export type FullPaddingType = PaddingType | Property.Padding;
 export declare const MarginType: {
     readonly Default: "margin";
     readonly Normal: "margin-normal";
@@ -90,7 +90,7 @@ export declare const MarginType: {
     readonly ExtraLarge: "margin-extra-large";
 };
 export type MarginType = typeof MarginType[keyof typeof MarginType];
-export type FullMarginType = MarginType | string;
+export type FullMarginType = MarginType | Property.Margin;
 export declare const GapType: {
     readonly Default: "gap";
     readonly Normal: "gap-normal";
@@ -103,8 +103,14 @@ export type GapType = typeof GapType[keyof typeof GapType];
 export type FullGapType = GapType | Property.Gap;
 export declare const LetterSpacingType: {
     readonly Default: "letter-spacing";
+    readonly Normal: "letter-spacing-normal";
+    readonly ExtraSmall: "letter-spacing-extra-small";
+    readonly Small: "letter-spacing-small";
+    readonly Large: "letter-spacing-large";
+    readonly ExtraLarge: "letter-spacing-extra-large";
 };
 export type LetterSpacingType = typeof LetterSpacingType[keyof typeof LetterSpacingType];
+export type FullLetterSpacingType = LetterSpacingType | Property.LetterSpacing;
 export declare const BorderRadiusType: {
     readonly Default: "border-radius";
     readonly Normal: "border-radius-normal";
@@ -115,7 +121,7 @@ export declare const BorderRadiusType: {
     readonly Max: "border-radius-max";
 };
 export type BorderRadiusType = typeof BorderRadiusType[keyof typeof BorderRadiusType];
-export type FullBorderRadiusType = BorderRadiusType | string;
+export type FullBorderRadiusType = BorderRadiusType | Property.BorderRadius;
 export declare const BorderStyleType: {
     readonly None: "border-style-none";
     readonly Solid: "border-style-solid";
@@ -129,7 +135,7 @@ export declare const BorderStyleType: {
     readonly Hidden: "border-style-hidden";
 };
 export type BorderStyleType = typeof BorderStyleType[keyof typeof BorderStyleType];
-export type FullBorderStyleType = BorderStyleType | string;
+export type FullBorderStyleType = BorderStyleType | Property.BorderStyle;
 export declare const BorderWidthType: {
     readonly Default: "border-width";
     readonly Normal: "border-width-normal";
@@ -139,14 +145,14 @@ export declare const BorderWidthType: {
     readonly ExtraLarge: "border-width-extra-large";
 };
 export type BorderWidthType = typeof BorderWidthType[keyof typeof BorderWidthType];
-export type FullBorderWidthType = BorderWidthType | string;
+export type FullBorderWidthType = BorderWidthType | Property.BorderWidth;
 export declare const VisibilityType: {
     readonly Visible: "visibility-visible";
     readonly Hidden: "visibility-hidden";
     readonly Collapse: "visibility-collapse";
 };
 export type VisibilityType = typeof VisibilityType[keyof typeof VisibilityType];
-export type FullVisibilityType = VisibilityType | string;
+export type FullVisibilityType = VisibilityType | Property.Visibility;
 export declare const DisplayType: {
     readonly None: "display-none";
     readonly Block: "display-block";
@@ -163,7 +169,7 @@ export declare const DisplayType: {
     readonly FlowRoot: "display-flow-root";
 };
 export type DisplayType = typeof DisplayType[keyof typeof DisplayType];
-export type FullDisplayType = DisplayType | string;
+export type FullDisplayType = DisplayType | Property.Display;
 export declare const CursorType: {
     readonly Auto: "cursor-auto";
     readonly Default: "cursor-default";
@@ -203,7 +209,7 @@ export declare const CursorType: {
     readonly ZoomOut: "cursor-zoom-out";
 };
 export type CursorType = typeof CursorType[keyof typeof CursorType];
-export type FullCursorType = CursorType | string;
+export type FullCursorType = CursorType | Property.Cursor;
 export declare const OverflowType: {
     readonly Visible: "overflow-visible";
     readonly Hidden: "overflow-hidden";
@@ -212,7 +218,7 @@ export declare const OverflowType: {
     readonly Clip: "overflow-clip";
 };
 export type OverflowType = typeof OverflowType[keyof typeof OverflowType];
-export type FullOverflowType = OverflowType | string;
+export type FullOverflowType = OverflowType | Property.Overflow;
 export declare const OverflowXType: {
     readonly Visible: "overflow-x-visible";
     readonly Hidden: "overflow-x-hidden";
@@ -221,7 +227,7 @@ export declare const OverflowXType: {
     readonly Clip: "overflow-x-clip";
 };
 export type OverflowXType = typeof OverflowXType[keyof typeof OverflowXType];
-export type FullOverflowXType = OverflowXType | string;
+export type FullOverflowXType = OverflowXType | Property.OverflowX;
 export declare const OverflowYType: {
     readonly Visible: "overflow-y-visible";
     readonly Hidden: "overflow-y-hidden";
@@ -230,7 +236,7 @@ export declare const OverflowYType: {
     readonly Clip: "overflow-y-clip";
 };
 export type OverflowYType = typeof OverflowYType[keyof typeof OverflowYType];
-export type FullOverflowYType = OverflowYType | string;
+export type FullOverflowYType = OverflowYType | Property.OverflowY;
 export declare const OpacityType: {
     readonly _0: "opacity-0";
     readonly _10: "opacity-10";
@@ -247,6 +253,7 @@ export declare const OpacityType: {
     readonly _100: "opacity-100";
 };
 export type OpacityType = typeof OpacityType[keyof typeof OpacityType];
+export type FullOpacityType = OpacityType | Property.Opacity;
 export declare const ViewSizeType: {
     readonly Ellipse: "v-ellipse-size";
     readonly Rectangle: "v-rectangle-size";
@@ -256,7 +263,7 @@ export declare const ViewSizeType: {
 };
 export type ViewSizeType = typeof ViewSizeType[keyof typeof ViewSizeType];
 export declare const getWeightValue: (weightType: FontWeightType) => number;
-export type FullFontSizeType = FontSizeType | string;
+export type FullFontSizeType = FontSizeType | Property.FontSize;
 export declare const FontSizeType: {
     readonly Default: "font-size";
     readonly Normal: "font-size-normal";
@@ -271,7 +278,7 @@ export declare const FontSizeType: {
     readonly AutoExtraLarge: "auto-font-size-extra-large";
 };
 export type FontSizeType = typeof FontSizeType[keyof typeof FontSizeType];
-export type FullColorType = ColorType | string;
+export type FullColorType = ColorType | Property.Color;
 export declare const PseudoType: {
     readonly All: "all";
     readonly Before: "before";
@@ -296,4 +303,4 @@ export declare const DirectionType: {
     readonly LeftRight: "left-right";
 };
 export type DirectionType = typeof DirectionType[keyof typeof DirectionType];
-export declare const getGeneratedClassName: (className: string, isDefaultValue: boolean | undefined, sizeType?: FullFontSizeType, isAutoSize?: boolean, weightType?: FontWeightType, frontColorType?: FullColorType, backgroundColorType?: FullColorType, borderColorType?: FullColorType, borderDirection?: DirectionType, pseudoType?: PseudoType, pseudoFrontColor?: FullColorType, pseudoBackgroundColor?: FullColorType, pseudoBorderColor?: FullColorType, pseudoBorderDirection?: DirectionType, borderRadius?: FullBorderRadiusType, borderStyle?: FullBorderStyleType, borderWidth?: FullBorderWidthType, padding?: FullPaddingType, margin?: FullMarginType, opacityType?: OpacityType, display?: FullDisplayType, visibility?: FullVisibilityType, cursor?: FullCursorType, overflow?: FullOverflowType, overflowX?: FullOverflowXType, overflowY?: FullOverflowYType) => string;
+export declare const getGeneratedClassName: (className: string, isDefaultValue: boolean | undefined, sizeType?: FullFontSizeType, isAutoSize?: boolean, weightType?: FontWeightType, frontColorType?: FullColorType, backgroundColorType?: FullColorType, borderColorType?: FullColorType, borderDirection?: DirectionType, pseudoType?: PseudoType, pseudoFrontColor?: FullColorType, pseudoBackgroundColor?: FullColorType, pseudoBorderColor?: FullColorType, pseudoBorderDirection?: DirectionType, borderRadius?: FullBorderRadiusType, borderStyle?: FullBorderStyleType, borderWidth?: FullBorderWidthType, padding?: FullPaddingType, margin?: FullMarginType, opacityType?: FullOpacityType, display?: FullDisplayType, visibility?: FullVisibilityType, cursor?: FullCursorType, overflow?: FullOverflowType, overflowX?: FullOverflowXType, overflowY?: FullOverflowYType, letterSpacing?: FullLetterSpacingType) => string;

package/src/components/View/VAside/index.d.ts

@@ -0,0 +1,5 @@
+import { IBaseProps } from '../../Engine/Base';
+export interface IVAsideProps extends IBaseProps<'aside'> {
+}
+declare const VAside: (props: IVAsideProps) => React.JSX.Element;
+export default VAside;

package/src/components/View/VInput/VDropdown/index.d.ts

@@ -22,6 +22,8 @@ export interface IVDropdownProps extends IBaseProps<'input'> {
     dockAlignment?: DockAlignment;
     menuBackgroundColor?: ColorType;
     menuZIndex?: Property.ZIndex;
+    menuGap?: Property.Gap;
+    isSelectOnly?: boolean;
     overWriteDropdownMenu?: (items: IDropdownItemData[]) => React.JSX.Element;
     overWriteDropdownItem?: (item: IDropdownItemData) => React.JSX.Element;
     handleChange?: (value: string) => void;

package/src/components/View/VNav/index.d.ts

@@ -0,0 +1,5 @@
+import { IBaseProps } from '../../Engine/Base';
+export interface IVNavProps extends IBaseProps<'nav'> {
+}
+declare const VNav: (props: IVNavProps) => React.JSX.Element;
+export default VNav;

package/src/components/core.d.ts

@@ -110,6 +110,8 @@ export { default as VVideo } from './View/VVideo';
 export { default as VHeader } from './View/VHeader';
 export { default as VMain } from './View/VMain';
 export { default as VFooter } from './View/VFooter';
+export { default as VAside } from './View/VAside';
+export { default as VNav } from './View/VNav';
 export { default as VHR } from './View/VHR';
 export { default as VSection } from './View/VSection';
 export { default as VMask } from './View/VMask';

package/templates/.claude/skills/fewbox-den/SKILL.md

@@ -25,7 +25,7 @@ Den.Components.ColorType   // enums are also under Components
 
 ### Variant Exports
 
-- **core** (`Den.Components`): Layout (X/Y/S/Flex/FlexItem/Position/PositionArea/Dock/BreakpointDisplay/Responsive), View (VBoundary, VLabel, VText, VForm, VActionForm, VInput/*, VSelect, VDropdown, VSwitch, VImage, VSvg, VBackground, VAnimation, VTooltip, VLoading, VErrorBoundary, VShape/*, VHyperlink, VMask, VFrame, VTheme, VHeader/VMain/VFooter, VHR, VSection, VZone, VAudio, VVideo, VShadow), Enums, Types, utilities
+- **core** (`Den.Components`): Layout (X/Y/S/Flex/FlexItem/Position/PositionArea/Dock/BreakpointDisplay/Responsive), View (VBoundary, VLabel, VText, VForm, VActionForm, VInput/*, VSelect, VDropdown, VSwitch, VImage, VSvg, VBackground, VAnimation, VTooltip, VLoading, VErrorBoundary, VShape/*, VHyperlink, VMask, VFrame, VTheme, VHeader/VNav/VMain/VAside/VFooter, VHR, VSection, VZone, VAudio, VVideo, VShadow), Enums, Types, utilities
 - **web** (`Den.Components`): core + Debug, VGoogleFont, VChromeExtensionValidator, GoogleGrant, GoogleSignin, FigmaSignin, WeComSignin, parseJWT
 - **app** (`Den.Components`): web + VDynamic, VAvatar, VBlock, VCard, VCardMedia, VCardSocial, VCardWindow, VPhoto, VStack, VTree
 - **app** also exports: `Den.FewBox`, `Den.Language`, `Den.Network`, `Den.Store`
@@ -41,35 +41,35 @@ All components extend `IBaseProps` (which extends `IViewProps`) providing these
 |------|------|-------------|
 | `className` | `string` | Additional CSS classes |
 | `style` | `CSSProperties` | Inline styles |
-| `fontSize` | `FontSizeType \| string` | Font size preset or custom value |
+| `fontSize` | `FontSizeType \| Property.FontSize` | Font size preset or custom CSS value |
 | `isAutoSize` | `boolean` | Use auto-responsive font size variant |
 | `fontWeight` | `FontWeightType` | Font weight (Thin through Black) |
-| `frontColor` | `ColorType \| string` | Text/foreground color |
-| `backgroundColor` | `ColorType \| string` | Background color |
-| `borderColor` | `ColorType \| string` | Border color |
+| `frontColor` | `ColorType \| Property.Color` | Text/foreground color |
+| `backgroundColor` | `ColorType \| Property.Color` | Background color |
+| `borderColor` | `ColorType \| Property.Color` | Border color |
 | `borderDirection` | `DirectionType` | Which sides get the border |
-| `borderRadius` | `BorderRadiusType \| string` | Border radius preset or custom |
-| `borderStyle` | `BorderStyleType \| string` | Border style preset or custom |
-| `borderWidth` | `BorderWidthType \| string` | Border width preset or custom |
-| `padding` | `PaddingType \| string` | CSS padding (preset or custom) |
-| `margin` | `MarginType \| string` | CSS margin (preset or custom) |
-| `opacity` | `OpacityType` | Opacity preset |
-| `display` | `DisplayType \| string` | CSS display preset or custom |
-| `visibility` | `VisibilityType \| string` | CSS visibility preset or custom |
-| `cursor` | `CursorType \| string` | CSS cursor preset or custom |
-| `overflow` | `OverflowType \| string` | CSS overflow preset or custom |
-| `overflowX` | `OverflowXType \| string` | CSS overflow-x preset or custom |
-| `overflowY` | `OverflowYType \| string` | CSS overflow-y preset or custom |
-| `width` | `string` | CSS width |
-| `height` | `string` | CSS height |
-| `minWidth` | `string` | CSS min-width |
-| `minHeight` | `string` | CSS min-height |
-| `maxWidth` | `string` | CSS max-width |
-| `maxHeight` | `string` | CSS max-height |
-| `zIndex` | `number` | CSS z-index |
-| `fontFamily` | `string` | CSS font-family |
-| `letterSpacing` | `string` | CSS letter-spacing |
-| `lineHeight` | `string` | CSS line-height |
+| `borderRadius` | `BorderRadiusType \| Property.BorderRadius` | Border radius preset or custom |
+| `borderStyle` | `BorderStyleType \| Property.BorderStyle` | Border style preset or custom |
+| `borderWidth` | `BorderWidthType \| Property.BorderWidth` | Border width preset or custom |
+| `padding` | `PaddingType \| Property.Padding` | CSS padding (preset or custom) |
+| `margin` | `MarginType \| Property.Margin` | CSS margin (preset or custom) |
+| `opacity` | `OpacityType \| Property.Opacity` | Opacity preset or custom CSS value |
+| `display` | `DisplayType \| Property.Display` | CSS display preset or custom |
+| `visibility` | `VisibilityType \| Property.Visibility` | CSS visibility preset or custom |
+| `cursor` | `CursorType \| Property.Cursor` | CSS cursor preset or custom |
+| `overflow` | `OverflowType \| Property.Overflow` | CSS overflow preset or custom |
+| `overflowX` | `OverflowXType \| Property.OverflowX` | CSS overflow-x preset or custom |
+| `overflowY` | `OverflowYType \| Property.OverflowY` | CSS overflow-y preset or custom |
+| `width` | `Property.Width` | CSS width |
+| `height` | `Property.Height` | CSS height |
+| `minWidth` | `Property.Width` | CSS min-width |
+| `minHeight` | `Property.Width` | CSS min-height |
+| `maxWidth` | `Property.Width` | CSS max-width |
+| `maxHeight` | `Property.Width` | CSS max-height |
+| `zIndex` | `Property.ZIndex` | CSS z-index |
+| `fontFamily` | `Property.FontFamily` | CSS font-family |
+| `letterSpacing` | `LetterSpacingType \| Property.LetterSpacing` | Letter spacing preset or custom CSS value |
+| `lineHeight` | `Property.LineHeight` | CSS line-height |
 | `selfShrink` | `number` | flex-shrink for the component itself |
 | `selfGrow` | `number` | flex-grow for the component itself |
 | `selfBasis` | `string` | flex-basis for the component itself |
@@ -146,7 +146,7 @@ FontWeightType.Black         // 900
 
 ### Preset Enums (class-based styling)
 
-These enums generate CSS classes. Pass enum value or a custom string (generates `{prefix}-{value}` class):
+These enums generate CSS classes. All `Full*Type` props accept either a preset enum value (applied as className) or a custom CSS value from `csstype` `Property.*` (applied as inline style):
 
 ```tsx
 // Border Radius
@@ -167,6 +167,9 @@ MarginType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
 // Gap (for layout components)
 GapType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
 
+// Letter Spacing
+LetterSpacingType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
+
 // Opacity
 OpacityType._0 | ._10 | ._20 | ._25 | ._30 | ._40 | ._50 | ._60 | ._70 | ._75 | ._80 | ._90 | ._100
 
@@ -549,6 +552,18 @@ For inline text. Renders as `<span>` by default, configurable to any inline/head
 // Available categories:
 // LabelCategory.Div, Span, H1-H6, Abbr, Strong, Em, Code, Pre,
 // Blockquote, Mark, Del, Ins, Small, Sub, Sup, etc.
+
+// fontWeight/fontSize with heading categories (H1-H6):
+// When fontWeight or fontSize is set, VLabel adds CSS classes
+// (.v-label-inherit-font-weight / .v-label-inherit-font-size)
+// that apply `inherit` to the inner heading element, overriding
+// browser defaults. Without these props, headings keep their
+// browser default styles (e.g., H1 is bold and 2em).
+<Den.Components.VLabel
+  category={Den.Components.LabelCategory.H1}
+  fontWeight={Den.Components.FontWeightType.Thin}
+  caption="Thin H1"
+/>
 ```
 
 ### VText (Block Text)
@@ -739,7 +754,14 @@ const [value, setValue] = useState('');
   downIcon={<DownArrowIcon />}   // required
   upIcon={<UpArrowIcon />}       // required
   enableClear
+  readOnly                        // renders as VLabel (non-interactive)
+  isSelectOnly                    // prevents manual typing, only allows selection from items
+  menuGap="4px"                   // gap between dropdown menu and trigger
+  menuBackgroundColor={Den.Components.ColorType.White}
+  menuZIndex={9999}
   handleChange={(value) => console.log(value)}
+  overWriteDropdownMenu={(items) => <CustomMenu items={items} />}   // custom menu renderer
+  overWriteDropdownItem={(item) => <CustomItem item={item} />}      // custom item renderer
 />
 // IDropdownItemData: { caption: string; value: string; icon?: JSX.Element }
 
@@ -990,7 +1012,9 @@ Den.Components.parseJWT(token)  // returns IUserProfile
 ```tsx
 // Semantic HTML wrappers
 <Den.Components.VHeader>...</Den.Components.VHeader>
+<Den.Components.VNav>...</Den.Components.VNav>
 <Den.Components.VMain>...</Den.Components.VMain>
+<Den.Components.VAside>...</Den.Components.VAside>
 <Den.Components.VFooter>...</Den.Components.VFooter>
 <Den.Components.VSection>...</Den.Components.VSection>
 <Den.Components.VHR />

package/templates/style/_core.scss

@@ -296,6 +296,18 @@ $border-positions: "all", "top", "right", "bottom", "left", "except-top", "excep
         font-weight: var(#{v.$var-prefix}font-weight-#{$font-weight});
     }
 }
+/* gap */
+@each $gap, $value in v.$gaps {
+    .gap-#{$gap} {
+        gap: var(#{v.$var-prefix}gap-#{$gap});
+    }
+}
+/* letter-spacing */
+@each $letter-spacing, $value in v.$letter-spacings {
+    .letter-spacing-#{$letter-spacing} {
+        letter-spacing: var(#{v.$var-prefix}letter-spacing-#{$letter-spacing});
+    }
+}
 /* padding */
 @each $padding, $value in v.$paddings {
     .padding-#{$padding} {

package/templates/style/_root-properties.scss

@@ -75,6 +75,9 @@
     #{v.$var-prefix}font-size: #{v.$font-size};
     #{v.$var-prefix}line-height: #{v.$line-height};
     #{v.$var-prefix}letter-spacing: #{v.$letter-spacing};
+    @each $letter-spacing, $value in v.$letter-spacings {
+        #{v.$var-prefix}letter-spacing-#{$letter-spacing}: #{$value};
+    }
     #{v.$var-prefix}padding: #{v.$padding};
     #{v.$var-prefix}margin: #{v.$margin};
     #{v.$var-prefix}box-sizing: #{v.$box-sizing};

package/templates/style/_variables.scss

@@ -252,6 +252,18 @@ $scrollbar-radius: 8px;
 /*------------------*/
 $line-height: 1.4;
 $letter-spacing: 0.01em;
+$letter-spacing-normal: 0.05em;
+$letter-spacing-extra-small: $letter-spacing-normal * 0.5;
+$letter-spacing-small: $letter-spacing-normal * 0.8;
+$letter-spacing-large: $letter-spacing-normal * 1.4;
+$letter-spacing-extra-large: $letter-spacing-normal * 2.4;
+$letter-spacings: (
+    "normal": $letter-spacing-normal,
+    "extra-small": $letter-spacing-extra-small,
+    "small": $letter-spacing-small,
+    "large": $letter-spacing-large,
+    "extra-large": $letter-spacing-extra-large,
+);
 $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol";
 $font-size: 1em; // 16px * 0.875 = 14px;