ds-one 0.2.5-alpha.1 → 0.2.5-alpha.11

package/DS1/4-page/ds-layout.ts

@@ -17,13 +17,18 @@ export class Layout extends LitElement {
     debug: { type: Boolean },
   };
 
-  mode?: string;
+  mode: string = "portfolio";
   align?: string;
   debug?: boolean;
 
   static styles = css`
     :host {
       display: grid;
+      position: relative;
+      width: 100%;
+    }
+
+    :host([mode="portfolio"]) {
       grid-template-columns: 120px 480px 40px;
       grid-template-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
       grid-template-areas:
@@ -40,8 +45,6 @@ export class Layout extends LitElement {
         ". . .";
       min-height: 600px;
       background-color: rgba(165, 165, 165, 0.03);
-      position: relative;
-      width: 100%;
       max-width: 640px;
       margin: 0 auto;
     }
@@ -75,6 +78,29 @@ export class Layout extends LitElement {
       justify-self: end;
     }
 
+    /* App mode - Base */
+    :host([mode="app"]) {
+      grid-template-columns: 1fr;
+      grid-template-rows: calc(var(--1) * var(--sf)) 20px 1fr auto;
+      grid-template-areas:
+        "banner"
+        "main"
+        "footer";
+      min-height: 100vh;
+      background-color: transparent;
+      width: 100%;
+      margin: 0 auto;
+      gap: 0;
+    }
+
+    /* App mode - with scaling factor */
+    :host([mode="app"]) {
+      max-width: calc(400px * var(--sf, 1));
+      padding: calc(60px * var(--sf, 1)) calc(28px * var(--sf, 1))
+        calc(9.751px * var(--sf, 1));
+      gap: calc(28px * var(--sf, 1));
+    }
+
     .debug-overlay {
       position: absolute;
       margin-left: -1px;
@@ -87,6 +113,9 @@ export class Layout extends LitElement {
       display: grid;
       font-size: 18px;
       font-weight: bold;
+    }
+
+    :host([mode="portfolio"]) .debug-overlay {
       grid-template-columns: 120px 480px;
       grid-template-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
       grid-template-areas:
@@ -122,7 +151,7 @@ export class Layout extends LitElement {
       justify-content: center;
       font-size: 10px;
       font-weight: var(--type-weight-default);
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
       color: var(--black);
       border: 1px solid red;
       opacity: 1;
@@ -158,39 +187,115 @@ export class Layout extends LitElement {
 
     .debug-footer {
       grid-area: footer;
-      border-color: #ffa500;
+      border-color: rgb(24, 147, 73);
+      background-color: rgba(127, 123, 11, 0.1);
     }
 
     .debug-content {
       grid-area: content;
       border-color: rgba(71, 231, 71, 0.63);
     }
+
+    :host([mode="app"]) .debug-overlay {
+      grid-template-columns: 1fr;
+      grid-template-rows:
+        calc(var(--1) * var(--sf))
+        calc(var(--2) * var(--sf))
+        calc(var(--4) * var(--sf))
+        calc(var(--1) * var(--sf));
+      grid-template-areas:
+        "banner"
+        "header"
+        "main"
+        "footer";
+    }
+
+    .debug-banner {
+      grid-area: banner;
+      border-color: #daed09;
+    }
+
+    .debug-header {
+      grid-area: header;
+      border-color: #0000ff;
+      background-color: rgba(127, 123, 11, 0.5);
+    }
+
+    .debug-main {
+      grid-area: main;
+      border-color: #0000ff;
+    }
+
+    .debug-footer-app {
+      grid-area: footer;
+      border-color: #ffa500;
+    }
   `;
 
   render() {
     const isDebug = this.debug || this.mode === "debug";
+    const isPortfolio = this.mode === "portfolio";
     const isCompany = this.mode === "company";
+    const isApp = this.mode === "app";
 
     return html`
       <slot></slot>
       ${isDebug
         ? html`
             <div class="debug-overlay">
-              ${isCompany
+              ${isApp
                 ? html`
-                    <div class="debug-area debug-header">header</div>
-                    <div class="debug-area debug-content">content</div>
-                    <div class="debug-area debug-footer">footer</div>
+                    <div class="debug-area debug-banner">
+                      <ds-text key="banner">banner</ds-text>
+                    </div>
+                    <div class="debug-area debug-header">
+                      <ds-text key="header">header</ds-text>
+                    </div>
+
+                    <div class="debug-area debug-main">
+                      <ds-text key="main">main</ds-text>
+                    </div>
+                    <div class="debug-area debug-footer-app">
+                      <ds-text key="footer">footer</ds-text>
+                    </div>
                   `
-                : html`
-                    <div class="debug-area debug-square">square</div>
-                    <div class="debug-area debug-title">title</div>
-                    <div class="debug-area debug-header">header</div>
-                    <div class="debug-area debug-projects">projects</div>
-                    <div class="debug-area debug-bio">bio</div>
-                    <div class="debug-area debug-nav">nav</div>
-                    <div class="debug-area debug-footer">footer</div>
-                  `}
+                : isCompany
+                  ? html`
+                      <div class="debug-area debug-header">
+                        <ds-text key="header">header</ds-text>
+                      </div>
+                      <div class="debug-area debug-content">
+                        <ds-text key="content">content</ds-text>
+                      </div>
+                      <div class="debug-area debug-footer">
+                        <ds-text key="footer">footer</ds-text>
+                      </div>
+                    `
+                  : isPortfolio
+                    ? html`
+                        <div class="debug-area debug-square">
+                          <ds-text key="square">square</ds-text>
+                        </div>
+                        <div class="debug-area debug-title">
+                          <ds-text key="title">title</ds-text>
+                        </div>
+                        <div class="debug-area debug-header">
+                          <ds-text key="header">header</ds-text>
+                        </div>
+                        <div class="debug-area debug-projects">
+                          <ds-text key="projects">projects</ds-text>
+                        </div>
+                        <div class="debug-area debug-bio">
+                          <ds-text key="bio">bio</ds-text>
+                        </div>
+                        <div class="debug-area debug-nav">
+                          <ds-text key="nav">nav</ds-text>
+                        </div>
+                        <div class="debug-area debug-footer">
+                          <ds-text key="footer">footer</ds-text>
+                        </div>
+                      `
+                    : ""}
             </div>
           `
         : ""}

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Jo4712
+Copyright (c) 2025 0001
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,19 +1,12 @@
-# DS one
+# DS one (0.2.5-alpha.11)
 
-Build modern UIs with web components!
+A plug and play design system
 
-> A component-based design system built with TypeScript and LitElement that provides reusable UI components with built-in theming, internationalization, and accessibility features.
+> A component-based design system built with Lit that provides reusable UI components with built-in theming, internationalization, and accessibility features.
 
-[![npm version](https://img.shields.io/npm/v/ds-one/alpha.svg)](https://www.npmjs.com/package/ds-one)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+**DS one** is a comprehensive modern design system that provides a set of reusable UI components built with Web Components via Lit. Available via CDN or npm.
 
-**DS one** is a modern design system that provides a comprehensive set of reusable UI components built with Web Components. Think "Material Design meets Web Standards"—a simple, accessible component library that works with any framework or vanilla JavaScript.
-
-**📦 Now available on NPM!** Install with `bun add ds-one@alpha` and start building today.
-
-## 🚀 Quick Start
-
-### Install
+## Installation
 
 ```bash
 # Using bun (recommended)
@@ -24,171 +17,92 @@ npm install ds-one@alpha
 
 # Using yarn
 yarn add ds-one@alpha
+
 ```
 
-**Note**: Currently published as alpha version `0.2.0-alpha.3`. Use `@alpha` tag to install.
+**Note**: Currently published as alpha version `0.2.5-alpha.11`
+
+## Quick Start
 
-### Basic Usage (CDN)
+### CDN Usage
 
 ```html
 <!DOCTYPE html>
 <html>
   <head>
-    <!-- Load DS one CSS -->
+    <!-- CSS -->
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/ds-one@alpha/DS1/1-root/one.css"
     />
-    <!-- Load DS one components -->
+    <!-- Bundle -->
     <script type="module">
       import "https://cdn.jsdelivr.net/npm/ds-one@alpha/dist/ds-one.bundle.min.js";
     </script>
   </head>
   <body>
-    <ds-button variant="primary">Get Started</ds-button>
-    <ds-text key="welcome">Welcome to DS one</ds-text>
+    <ds-button variant="primary" key="getStarted"></ds-button>
+    <ds-text key="welcome"></ds-text>
   </body>
 </html>
 ```
 
-### Online demo
+### NPM Usage
 
-Try DS one in your browser: **[dsone.dev](https://dsone.dev)** (documentation slugs to be decided)
+```tsx
+import "ds-one/styles";
+import "ds-one";
+```
 
-## ✨ Features
+## Documentation
 
-### Core Components
+See the full documentation for DS one at: [**dsone.dev**](https://dsone.dev/)
 
-- **Web Components**: Built with LitElement for maximum compatibility
-- **TypeScript support**: Full type definitions and IntelliSense
-- **Accessibility**: ARIA support and keyboard navigation built-in
-- **Responsive design**: Mobile-first with scaling factors
-- **Theme system**: CSS custom properties for easy customization
+## Features
 
 ### Internationalization
 
-- **Language keys**: All text via camelCase keys for full i18n
-- **Notion CMS integration**: Dynamic content management
-- **Fallback support**: Graceful degradation when translations missing
-- **Multi-language**: Built-in language switching
-
-### Developer Experience
-
-- **Zero dependencies**: Pure Web Components, no framework required
-- **Fast loading**: Optimized bundle size and tree-shaking
-- **Hot reload**: Live updates in development
-- **Comprehensive testing**: Full test coverage
+- **Language keys**: Add a `translations.json` to your project and everything is translatable with the cycle type language button
+- **Multi-language**: Automatically switches language based on browser language settings
 
-## Documentation
-
-- **[Component Reference](./docs/components.md)** - Complete component API documentation
-- **[Theming Guide](./docs/theming.md)** - Customization and accent colors
-- **[Internationalization](./docs/i18n.md)** - Language keys and Notion CMS setup
-- **[Examples](./docs/examples.md)** - Usage examples and patterns
-
-## Current Status: v0.2.0-alpha.3
+### Core Components
 
-**⚠️ Alpha Release**: This is an early alpha version. The API may change as we refine the components and architecture.
+- **Web Components**: Built with Lit for maximum compatibility
+- **Responsive design**: Mobile-first approach with scaling factor
+- **Theme system**: CSS custom properties for easy customization
 
 ### Completed Features
 
 - ✅ Core component library (ds-button, ds-text, ds-icon, etc.)
-- ✅ Theming system with accent color support
+- ✅ Theming system with accent colors
 - ✅ Internationalization with language keys
 - ✅ Responsive design with mobile scaling
-- ✅ TypeScript definitions and type safety
-- ✅ Accessibility features and ARIA support
 - ✅ CDN delivery via jsDelivr
 - ✅ NPM package published
 
 ### In Progress
 
-- 🚧 Component naming standardization (ds-\* prefix)
-- 🚧 Enhanced theming documentation
-- 🚧 Component testing suite
-- 🚧 Documentation site refinement
-- 🚧 Additional component variants and states
-
-### Planned for Beta
-
-- 📋 Stable API and naming conventions
-- 📋 Comprehensive documentation with examples
-- 📋 Form components (input, select, checkbox, etc.)
-- 📋 Navigation components
-- 📋 Animation system
-- 📋 Design tokens documentation
+- 🚧 Documentation site
+- 🚧 Additional component variants and states defined in Figma
 
 ## Architecture
 
 ```
 DS one/
+├── dist/             # Built files for NPM
 ├── DS1/
-│   ├── 0-face/       # Device and language detection
+│   ├── 0-face/       # Utilities for device detection, internationalization,
+│   │                 # localStorage preferences, pricing and theme
 │   ├── 1-root/       # Core styles, fonts, and design tokens
-│   ├── 2-core/       # Core components (buttons, text, etc.)
-│   ├── 3-unit/       # Composite components
-│   ├── 4-page/       # Page-level components
-│   ├── x-utils/      # Shared utilities (language, theme, etc.)
+│   │                 # (everything as CSS variables)
+│   ├── 2-core/       # Core components (banner, buttons, text, cycle,
+│   │                 # date, icon, input, tooltip)
+│   ├── 3-unit/       # Composite components (list, row, table)
+│   ├── 4-page/       # Page-level components for layout (layout, grid)
 │   └── x-icon/       # SVG icon library
-├── dist/             # Built files for NPM
 ├── examples/         # HTML examples
 └── docs/             # Documentation
-```
 
-## Roadmap
-
-### v0.2.0-beta (Target: Q2 2025)
-
-- [ ] Finalize component naming (ds-\* prefix for all components)
-- [ ] Complete core component set
-- [ ] Enhanced theming system
-- [ ] Component testing suite
-- [ ] Comprehensive documentation
-
-### v0.5.0 (Target: Q3 2025)
-
-- [ ] Advanced components (forms, navigation, data display)
-- [ ] Animation system
-- [ ] Design tokens
-- [ ] Figma integration
-
-### v1.0.0 (Production - Target: Q4 2025)
-
-- [ ] Complete feature set
-- [ ] Production-ready tooling
-- [ ] Long-term API stability
-- [ ] Performance optimizations
-
-### Development Setup
-
-```bash
-# Clone the repository
-git clone https://github.com/0001-labs/ds-one.git
-cd ds-one
-
-# Install dependencies
-bun install
-
-# Run tests
-bun test
-
-# Start development server
-bun run dev
-
-# Build components
-bun run build
-```
-
-### Release Process
-
-```bash
-# Create a new alpha release (recommended for now)
-bun run release:pre:alpha  # Bumps alpha version (e.g., 0.2.0-alpha.3 → 0.2.0-alpha.3)
-
-# Other release commands (for future use)
-bun run release:patch      # For patch releases
-bun run release:minor      # For minor releases
-bun run release:major      # For major releases
 ```
 
 ## License
@@ -197,11 +111,7 @@ MIT © [DS one](https://github.com/0001-labs/ds-one)
 
 ## 🔗 Links
 
-- **[Website](https://dsone.dev)** - Official website (slugs to be decided)
-- **[GitHub](https://github.com/0001-labs/ds-one)** - Source code and issues
-- **[NPM Package](https://www.npmjs.com/package/ds-one)** - Install with `@alpha` tag
-- **[CDN](https://cdn.jsdelivr.net/npm/ds-one@alpha/)** - Direct browser usage
-
----
-
-**DS one** - _Build modern UIs with web components that work everywhere._
+- [**Website**](https://dsone.dev/) - Official website
+- [**GitHub**](https://github.com/0001-labs/ds-one) - Source code and issues
+- [**NPM Package**](https://www.npmjs.com/package/ds-one) - Install with `@alpha` tag
+- [**CDN**](https://cdn.jsdelivr.net/npm/ds-one@alpha/) - Direct browser usage

package/dist/0-face/device.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA8ChD"}
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CAkDhD"}

package/dist/0-face/device.js

@@ -61,14 +61,18 @@ export function initDeviceDetection() {
         const designWidth = 280;
         const actualWidth = deviceInfo.screenWidth;
         const scalingFactor = actualWidth / designWidth;
-        // Set CSS custom property for scaling
-        document.documentElement.style.setProperty("--scaling-factor-mobile", scalingFactor.toFixed(3));
+        // Set CSS custom property for scaling on html element
+        document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
+        // Also set --sf for backwards compatibility
+        document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
         console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`);
     }
     else {
         // Desktop - no scaling
         if (typeof document !== "undefined") {
-            document.documentElement.style.setProperty("--scaling-factor-mobile", "1");
+            document.documentElement.style.setProperty("--sf", "1");
+            // Also set --sf for backwards compatibility
+            document.documentElement.style.setProperty("--sf", "1");
         }
         console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
     }

package/dist/0-face/i18n.d.ts

@@ -19,8 +19,6 @@ export declare const currentLanguage: {
 export declare function translate(key: string): string;
 export declare function hasTranslation(key: string, language?: LanguageCode): boolean;
 export declare function getText(key: string): string;
-export declare function getNotionText(key: string, language?: LanguageCode): Promise<string | null>;
-export declare function setNotionText(key: string, value: string, language?: LanguageCode): void;
 export declare function getAvailableLanguages(): Promise<LanguageCode[]>;
 export declare function getAvailableLanguagesSync(): LanguageCode[];
 export declare function loadTranslations(language: LanguageCode, translations: TranslationData): void;

package/dist/0-face/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../DS1/0-face/i18n.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAGlC,KAAK,eAAe,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAyDF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;QACtD,wBAAwB,CAAC,EAAE,MAAM,CAAC;KACnC;CACF;AAkSD,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,YAAY,EAClB,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,GAChC,MAAM,CA6CR;AAwDD,wBAAgB,kBAAkB,IAAI,YAAY,CAwBjD;AAWD,eAAO,MAAM,eAAe;;gBAGL,YAAY;CAWlC,CAAC;AAyDF,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAe7C;AAED,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,QAAQ,GAAE,YAAoC,GAC7C,OAAO,CAmBT;AAGD,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE3C;AAGD,wBAAsB,aAAa,CACjC,GAAG,EAAE,MAAM,EACX,QAAQ,GAAE,YAAoC,GAC7C,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAoBxB;AAGD,wBAAgB,aAAa,CAC3B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,QAAQ,GAAE,YAAoC,GAC7C,IAAI,CAKN;AAUD,wBAAgB,qBAAqB,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC,CAS/D;AAGD,wBAAgB,yBAAyB,IAAI,YAAY,EAAE,CAO1D;AAGD,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE,eAAe,GAC5B,IAAI,CAON;AAGD,wBAAgB,WAAW,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAgBxD"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../DS1/0-face/i18n.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAGlC,KAAK,eAAe,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAyDF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;QACtD,wBAAwB,CAAC,EAAE,MAAM,CAAC;KACnC;CACF;AA+RD,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,YAAY,EAClB,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,GAChC,MAAM,CA6CR;AAqDD,wBAAgB,kBAAkB,IAAI,YAAY,CAwBjD;AAWD,eAAO,MAAM,eAAe;;gBAGL,YAAY;CAWlC,CAAC;AAuDF,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAiB7C;AAED,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,QAAQ,GAAE,YAAoC,GAC7C,OAAO,CAmBT;AAGD,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE3C;AAGD,wBAAgB,qBAAqB,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC,CAS/D;AAGD,wBAAgB,yBAAyB,IAAI,YAAY,EAAE,CAO1D;AAGD,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE,eAAe,GAC5B,IAAI,CAON;AAGD,wBAAgB,WAAW,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAgBxD"}