ds-one 0.3.0-alpha.1 → 0.3.0-alpha.2

package/dist/index.d.ts

@@ -10,7 +10,6 @@ export * from "./0-face/device";
 export * from "./0-face/i18n";
 export * from "./0-face/preferences";
 export * from "./0-face/pricing";
-export * from "./0-face/scaling";
 export * from "./0-face/theme";
 export * from "./2-core/ds-banner";
 export * from "./2-core/ds-button";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../DS1/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,iBAAiB,CAAC;AAGzB,OAAO,eAAe,CAAC;AAMvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAM/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AAMpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAMlC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../DS1/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,iBAAiB,CAAC;AAGzB,OAAO,eAAe,CAAC;AAMvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAM/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AAMpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAMlC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC"}

package/dist/index.js

@@ -18,7 +18,6 @@ export * from "./0-face/device";
 export * from "./0-face/i18n";
 export * from "./0-face/preferences";
 export * from "./0-face/pricing";
-export * from "./0-face/scaling";
 export * from "./0-face/theme";
 // ============================================================================
 // 2-core: Core Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ds-one",
-  "version": "0.3.0-alpha.1",
+  "version": "0.3.0-alpha.2",
   "description": "A component-based design system built with TypeScript and LitElement that provides reusable UI components with built-in theming, internationalization, and accessibility features.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/DS1/0-face/scaling.ts

@@ -1,152 +0,0 @@
-// scaling.ts
-// Responsive scaling utilities for the design system
-
-import { signal } from "@lit-labs/signals";
-
-export type ScalingMode = "auto" | "fixed" | "fluid";
-
-export interface ScalingConfig {
-  mode: ScalingMode;
-  baseWidth: number;
-  minScale: number;
-  maxScale: number;
-}
-
-const defaultConfig: ScalingConfig = {
-  mode: "auto",
-  baseWidth: 280,
-  minScale: 0.75,
-  maxScale: 2.0,
-};
-
-// Reactive scaling factor signal
-export const scalingFactor = signal<number>(1);
-
-// Current scaling configuration
-export const scalingConfig = signal<ScalingConfig>(defaultConfig);
-
-/**
- * Calculate the scaling factor based on viewport width
- * @param viewportWidth - Current viewport width in pixels
- * @param config - Scaling configuration
- * @returns The calculated scaling factor
- */
-export function calculateScalingFactor(
-  viewportWidth: number,
-  config: ScalingConfig = scalingConfig.get()
-): number {
-  if (config.mode === "fixed") {
-    return 1;
-  }
-
-  const rawScale = viewportWidth / config.baseWidth;
-  const clampedScale = Math.max(
-    config.minScale,
-    Math.min(config.maxScale, rawScale)
-  );
-
-  return Number(clampedScale.toFixed(3));
-}
-
-/**
- * Set the scaling configuration
- * @param config - Partial scaling configuration to apply
- */
-export function setScalingConfig(config: Partial<ScalingConfig>): void {
-  const currentConfig = scalingConfig.get();
-  const newConfig = { ...currentConfig, ...config };
-  scalingConfig.set(newConfig);
-
-  // Recalculate scaling factor if in browser
-  if (typeof window !== "undefined") {
-    updateScalingFactor();
-  }
-}
-
-/**
- * Update the scaling factor based on current viewport
- */
-export function updateScalingFactor(): void {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return;
-  }
-
-  const viewportWidth = document.documentElement.clientWidth;
-  const config = scalingConfig.get();
-  const newFactor = calculateScalingFactor(viewportWidth, config);
-
-  scalingFactor.set(newFactor);
-
-  // Update CSS custom property
-  document.documentElement.style.setProperty("--sf", newFactor.toString());
-
-  // Dispatch event for components that need to react
-  window.dispatchEvent(
-    new CustomEvent("scaling-changed", {
-      detail: { scalingFactor: newFactor, config },
-    })
-  );
-}
-
-/**
- * Get the current scaling factor
- * @returns The current scaling factor
- */
-export function getScalingFactor(): number {
-  return scalingFactor.get();
-}
-
-/**
- * Convert a design pixel value to scaled pixels
- * @param designPx - The design pixel value (based on 280px width)
- * @returns The scaled pixel value
- */
-export function scale(designPx: number): number {
-  return designPx * scalingFactor.get();
-}
-
-/**
- * Convert a scaled pixel value back to design pixels
- * @param scaledPx - The scaled pixel value
- * @returns The design pixel value
- */
-export function unscale(scaledPx: number): number {
-  const factor = scalingFactor.get();
-  return factor === 0 ? scaledPx : scaledPx / factor;
-}
-
-/**
- * Initialize scaling system
- * This is typically called automatically when the module loads
- */
-export function initScaling(): void {
-  if (typeof window === "undefined") {
-    return;
-  }
-
-  // Initial calculation
-  updateScalingFactor();
-
-  // Update on resize (debounced)
-  let resizeTimeout: ReturnType<typeof setTimeout>;
-  window.addEventListener("resize", () => {
-    clearTimeout(resizeTimeout);
-    resizeTimeout = setTimeout(() => {
-      updateScalingFactor();
-    }, 100);
-  });
-
-  // Update on orientation change
-  window.addEventListener("orientationchange", () => {
-    setTimeout(updateScalingFactor, 100);
-  });
-}
-
-// Auto-initialize when module loads in browser
-if (typeof window !== "undefined") {
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initScaling);
-  } else {
-    initScaling();
-  }
-}

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

@@ -1,48 +0,0 @@
-export type ScalingMode = "auto" | "fixed" | "fluid";
-export interface ScalingConfig {
-    mode: ScalingMode;
-    baseWidth: number;
-    minScale: number;
-    maxScale: number;
-}
-export declare const scalingFactor: import("@lit-labs/signals").Signal.State<number>;
-export declare const scalingConfig: import("@lit-labs/signals").Signal.State<ScalingConfig>;
-/**
- * Calculate the scaling factor based on viewport width
- * @param viewportWidth - Current viewport width in pixels
- * @param config - Scaling configuration
- * @returns The calculated scaling factor
- */
-export declare function calculateScalingFactor(viewportWidth: number, config?: ScalingConfig): number;
-/**
- * Set the scaling configuration
- * @param config - Partial scaling configuration to apply
- */
-export declare function setScalingConfig(config: Partial<ScalingConfig>): void;
-/**
- * Update the scaling factor based on current viewport
- */
-export declare function updateScalingFactor(): void;
-/**
- * Get the current scaling factor
- * @returns The current scaling factor
- */
-export declare function getScalingFactor(): number;
-/**
- * Convert a design pixel value to scaled pixels
- * @param designPx - The design pixel value (based on 280px width)
- * @returns The scaled pixel value
- */
-export declare function scale(designPx: number): number;
-/**
- * Convert a scaled pixel value back to design pixels
- * @param scaledPx - The scaled pixel value
- * @returns The design pixel value
- */
-export declare function unscale(scaledPx: number): number;
-/**
- * Initialize scaling system
- * This is typically called automatically when the module loads
- */
-export declare function initScaling(): void;
-//# sourceMappingURL=scaling.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"scaling.d.ts","sourceRoot":"","sources":["../../DS1/0-face/scaling.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAUD,eAAO,MAAM,aAAa,kDAAoB,CAAC;AAG/C,eAAO,MAAM,aAAa,yDAAuC,CAAC;AAElE;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,MAAM,GAAE,aAAmC,GAC1C,MAAM,CAYR;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CASrE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAoB1C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAEzC;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGhD;AAED;;;GAGG;AACH,wBAAgB,WAAW,IAAI,IAAI,CAqBlC"}

package/dist/0-face/scaling.js

@@ -1,114 +0,0 @@
-// scaling.ts
-// Responsive scaling utilities for the design system
-import { signal } from "@lit-labs/signals";
-const defaultConfig = {
-    mode: "auto",
-    baseWidth: 280,
-    minScale: 0.75,
-    maxScale: 2.0,
-};
-// Reactive scaling factor signal
-export const scalingFactor = signal(1);
-// Current scaling configuration
-export const scalingConfig = signal(defaultConfig);
-/**
- * Calculate the scaling factor based on viewport width
- * @param viewportWidth - Current viewport width in pixels
- * @param config - Scaling configuration
- * @returns The calculated scaling factor
- */
-export function calculateScalingFactor(viewportWidth, config = scalingConfig.get()) {
-    if (config.mode === "fixed") {
-        return 1;
-    }
-    const rawScale = viewportWidth / config.baseWidth;
-    const clampedScale = Math.max(config.minScale, Math.min(config.maxScale, rawScale));
-    return Number(clampedScale.toFixed(3));
-}
-/**
- * Set the scaling configuration
- * @param config - Partial scaling configuration to apply
- */
-export function setScalingConfig(config) {
-    const currentConfig = scalingConfig.get();
-    const newConfig = { ...currentConfig, ...config };
-    scalingConfig.set(newConfig);
-    // Recalculate scaling factor if in browser
-    if (typeof window !== "undefined") {
-        updateScalingFactor();
-    }
-}
-/**
- * Update the scaling factor based on current viewport
- */
-export function updateScalingFactor() {
-    if (typeof window === "undefined" || typeof document === "undefined") {
-        return;
-    }
-    const viewportWidth = document.documentElement.clientWidth;
-    const config = scalingConfig.get();
-    const newFactor = calculateScalingFactor(viewportWidth, config);
-    scalingFactor.set(newFactor);
-    // Update CSS custom property
-    document.documentElement.style.setProperty("--sf", newFactor.toString());
-    // Dispatch event for components that need to react
-    window.dispatchEvent(new CustomEvent("scaling-changed", {
-        detail: { scalingFactor: newFactor, config },
-    }));
-}
-/**
- * Get the current scaling factor
- * @returns The current scaling factor
- */
-export function getScalingFactor() {
-    return scalingFactor.get();
-}
-/**
- * Convert a design pixel value to scaled pixels
- * @param designPx - The design pixel value (based on 280px width)
- * @returns The scaled pixel value
- */
-export function scale(designPx) {
-    return designPx * scalingFactor.get();
-}
-/**
- * Convert a scaled pixel value back to design pixels
- * @param scaledPx - The scaled pixel value
- * @returns The design pixel value
- */
-export function unscale(scaledPx) {
-    const factor = scalingFactor.get();
-    return factor === 0 ? scaledPx : scaledPx / factor;
-}
-/**
- * Initialize scaling system
- * This is typically called automatically when the module loads
- */
-export function initScaling() {
-    if (typeof window === "undefined") {
-        return;
-    }
-    // Initial calculation
-    updateScalingFactor();
-    // Update on resize (debounced)
-    let resizeTimeout;
-    window.addEventListener("resize", () => {
-        clearTimeout(resizeTimeout);
-        resizeTimeout = setTimeout(() => {
-            updateScalingFactor();
-        }, 100);
-    });
-    // Update on orientation change
-    window.addEventListener("orientationchange", () => {
-        setTimeout(updateScalingFactor, 100);
-    });
-}
-// Auto-initialize when module loads in browser
-if (typeof window !== "undefined") {
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", initScaling);
-    }
-    else {
-        initScaling();
-    }
-}

package/dist/2-core/styles/ds-banner.css

@@ -1,77 +0,0 @@
-/* ds-banner.css */
-/* Fixed banner component styles for notifications/alerts */
-
-:host {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: calc(var(--unit) * var(--sf, 1));
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 calc(var(--unit) * var(--sf, 1));
-  box-sizing: border-box;
-  z-index: 9999;
-}
-
-:host([variant="warning"]) {
-  background-color: color-mix(in srgb, var(--yellow) 50%, transparent);
-  --banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);
-  --banner-action-color: var(--slate);
-}
-
-:host([variant="info"]) {
-  background-color: rgba(var(--sharp-blue-rgb, 0, 122, 255), 0.7);
-  --banner-text-color: var(--white, #fff);
-  --banner-action-color: var(--white, #fff);
-}
-
-:host([variant="success"]) {
-  background-color: rgba(var(--apple-green-rgb, 52, 199, 89), 0.7);
-  --banner-text-color: var(--white, #fff);
-  --banner-action-color: var(--white, #fff);
-}
-
-:host([variant="error"]) {
-  background-color: rgba(var(--tuned-red-rgb, 255, 59, 48), 0.7);
-  --banner-text-color: var(--white, #fff);
-  --banner-action-color: var(--slate, #1e1e1e);
-}
-
-.text-wrapper {
-  flex: 1;
-  cursor: pointer;
-  user-select: none;
-}
-
-.text-wrapper ds-text,
-.text-wrapper .version {
-  color: var(--banner-text-color);
-}
-
-.action-wrapper {
-  font-size: calc(12px * var(--sf, 1));
-}
-
-.action-wrapper a {
-  color: var(--banner-action-color);
-  text-decoration: none;
-  font-family: var(--typeface-regular);
-  font-size: calc(12px * var(--sf, 1));
-  cursor: pointer;
-  pointer-events: auto;
-  display: inline-block;
-}
-
-.action-wrapper a:hover {
-  opacity: 0.8;
-}
-
-.action-wrapper ds-text {
-  color: var(--banner-action-color);
-  font-family: var(--typeface-regular);
-  font-size: calc(12px * var(--sf, 1));
-  pointer-events: none;
-}

package/dist/2-core/styles/ds-button.css

@@ -1,67 +0,0 @@
-/* ds-button.css */
-/* Core button component styles */
-
-button {
-  max-height: calc(var(--08) * var(--sf));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  padding: 0 calc(0.5px * var(--sf));
-  color: var(--button-text-color);
-  font-family: var(--typeface-regular);
-}
-
-button.title {
-  background-color: var(--button-background-color-secondary);
-  color: var(--button-text-color);
-}
-
-button.primary {
-  background-color: var(--accent-color);
-  color: var(--button-text-color);
-  text-decoration-line: none;
-  font-family: var(--typeface-regular);
-}
-
-button.secondary {
-  background-color: var(--button-background-color-secondary);
-  color: var(--button-text-color);
-  font-family: var(--typeface-regular);
-}
-
-button.text {
-  background-color: transparent;
-  color: var(--button-color, var(--button-text-color));
-  font-family: var(--typeface-regular);
-  padding: 0;
-  text-decoration: none;
-}
-
-button.text:hover {
-  opacity: 0.8;
-  text-decoration: none;
-}
-
-button[bold] {
-  font-weight: var(--type-weight-bold);
-  font-family: var(--typeface-medium);
-}
-
-button[no-background] {
-  background-color: transparent;
-  max-height: var(--1);
-  padding: 0;
-  color: var(--button-color, var(--button-text-color-secondary));
-}
-
-button[no-background][bold] {
-  font-weight: var(--type-weight-bold);
-  font-family: var(--typeface-medium);
-  color: var(--button-color, var(--button-text-color-secondary));
-}
-
-.loading {
-  opacity: 0.7;
-}

package/dist/2-core/styles/ds-cycle.css

@@ -1,21 +0,0 @@
-/* ds-cycle.css */
-/* Cycle component styles for cycling through options */
-
-:host {
-  display: inline-flex;
-  align-items: center;
-}
-
-.cycle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--025);
-}
-
-.color-preview {
-  width: var(--05);
-  height: var(--05);
-  border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--text-color-primary) 20%, transparent);
-  flex: 0 0 auto;
-}

package/dist/2-core/styles/ds-date.css

@@ -1,9 +0,0 @@
-/* ds-date.css */
-/* Date component styles for displaying the current year */
-
-:host {
-  display: inline;
-  font-family: var(--typeface-regular, var(--typeface-regular-regular));
-  font-size: inherit;
-  color: inherit;
-}

package/dist/2-core/styles/ds-gap.css

@@ -1,93 +0,0 @@
-/* ds-gap.css */
-/* Full-width vertical spacer styles */
-
-:host {
-  display: block;
-  width: 100%;
-  /* Default if no attribute is provided */
-  --gap-size: var(--unit);
-  height: var(--gap-size);
-  flex: 0 0 auto;
-}
-
-/* Semantic sizing tokens (from DS1/1-root/one.css) */
-:host([tenth]) {
-  --gap-size: var(--tenth);
-}
-
-:host([quarter]) {
-  --gap-size: var(--quarter);
-}
-
-:host([half]) {
-  --gap-size: var(--half);
-}
-
-:host([eight-tenth]) {
-  --gap-size: var(--eight-tenth);
-}
-
-:host([unit]) {
-  --gap-size: var(--unit);
-}
-
-:host([double]) {
-  --gap-size: var(--double);
-}
-
-:host([triple]) {
-  --gap-size: var(--triple);
-}
-
-:host([quad]) {
-  --gap-size: var(--quad);
-}
-
-:host([oct]) {
-  --gap-size: var(--oct);
-}
-
-:host([dozen]) {
-  --gap-size: var(--dozen);
-}
-
-/* Raw scale sizing (size="...") */
-:host([size="01"]) {
-  --gap-size: var(--01);
-}
-
-:host([size="025"]) {
-  --gap-size: var(--025);
-}
-
-:host([size="05"]) {
-  --gap-size: var(--05);
-}
-
-:host([size="08"]) {
-  --gap-size: var(--08);
-}
-
-:host([size="1"]) {
-  --gap-size: var(--1);
-}
-
-:host([size="2"]) {
-  --gap-size: var(--2);
-}
-
-:host([size="3"]) {
-  --gap-size: var(--3);
-}
-
-:host([size="4"]) {
-  --gap-size: var(--4);
-}
-
-:host([size="8"]) {
-  --gap-size: var(--8);
-}
-
-:host([size="12"]) {
-  --gap-size: var(--12);
-}

package/dist/2-core/styles/ds-icon.css

@@ -1,30 +0,0 @@
-/* ds-icon.css */
-/* Icon component styles */
-
-:host {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: calc(16px * var(--sf));
-  height: calc(16px * var(--sf));
-  /* Notes style color variable for future implementation */
-  --notes-style-color: #ffb6b9;
-}
-
-svg {
-  width: 100%;
-  height: 100%;
-  fill: var(--icon-color, currentColor);
-}
-
-path {
-  fill: var(--icon-color, currentColor);
-}
-
-.icon-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: calc(16px * var(--sf));
-  height: calc(16px * var(--sf));
-}

package/dist/2-core/styles/ds-input.css

@@ -1,46 +0,0 @@
-/* ds-input.css */
-/* Input component styles */
-
-:host {
-  display: block;
-  width: 100%;
-}
-
-input {
-  background: var(--base-light-grey, #e8e8e8);
-  border: none;
-  padding: 0 calc(2px * var(--sf, 1));
-  border-radius: 4px;
-  font-size: var(--type-size-default);
-  font-family: var(
-    --typeface-regular,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    sans-serif
-  );
-  color: var(--base-darker-grey, #797979);
-  line-height: calc(20px * var(--sf, 1));
-  letter-spacing: calc(-0.4px * var(--sf, 1));
-  opacity: 0.5;
-  height: calc(28px * var(--sf, 1));
-  width: 100%;
-  box-sizing: border-box;
-}
-
-input:focus {
-  outline: none;
-  opacity: 1;
-  color: var(--base-slate, #1e1e1e);
-}
-
-input::placeholder {
-  color: var(--base-darker-grey, #797979);
-  opacity: 0.5;
-}
-
-input:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}