@fewbox/den-web 0.2.0-preview.3 → 0.2.0-preview.30

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};
@@ -93,7 +96,7 @@
     #{v.$var-prefix}v-image-size: #{v.$v-image-size};
     #{v.$var-prefix}v-svg-size: #{v.$v-svg-size};
     #{v.$var-prefix}v-window--size: #{v.$v-window-size};
-    
+    #{v.$var-prefix}position-offset: #{v.$position-offset};
 
     *,
     ::before,

package/templates/style/_variables.scss

@@ -129,7 +129,7 @@ $margins: (
     "extra-large": $margin-extra-large,
 );
 //left right top bottom offset
-$self-offset: 1em;
+$position-offset: 1em;
 //border
 $border-radius-normal: 0.4rem;
 $border-radius-extra-small: $border-radius-normal * 0.25;
@@ -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;