ds-one 0.2.5-alpha.8 → 0.3.0-alpha.1

package/dist/2-core/ds-tooltip.js

@@ -1,9 +1,10 @@
-import { LitElement, html, css } from "lit";
-import { translate, getNotionText } from "../0-face/i18n";
+import { LitElement, html, unsafeCSS } from "lit";
+import { translate } from "../0-face/i18n";
+import styles from "./styles/ds-tooltip.css?inline";
 export class Tooltip extends LitElement {
     constructor() {
         super();
-        this.key = "";
+        this.text = "";
         this.defaultValue = "";
         this._text = "";
         this._visible = false;
@@ -54,29 +55,23 @@ export class Tooltip extends LitElement {
         this.removeEventListener("focusout", this.boundHostHandlers.focusout);
     }
     updated(changed) {
-        if (changed.has("key") || changed.has("defaultValue")) {
+        if (changed.has("text") || changed.has("defaultValue")) {
             this._loadText();
         }
     }
-    async _loadText() {
-        if (!this.key) {
+    _loadText() {
+        if (!this.text) {
             this._text = this.defaultValue || "";
             this.requestUpdate();
             return;
         }
         try {
-            const notionText = await getNotionText(this.key);
-            if (notionText) {
-                this._text = notionText;
-                this.requestUpdate();
-                return;
-            }
-            const t = translate(this.key);
-            this._text = t && t !== this.key ? t : this.defaultValue || this.key;
+            const t = translate(this.text);
+            this._text = t && t !== this.text ? t : this.defaultValue || this.text;
         }
         catch (err) {
-            console.error("ds-tooltip: error loading text for key", this.key, err);
-            this._text = this.defaultValue || this.key;
+            console.error("ds-tooltip: error loading text for text", this.text, err);
+            this._text = this.defaultValue || this.text;
         }
         this.requestUpdate();
     }
@@ -91,57 +86,10 @@ export class Tooltip extends LitElement {
     }
 }
 Tooltip.properties = {
-    key: { type: String, reflect: true },
+    text: { type: String, reflect: true },
     defaultValue: { type: String, reflect: true, attribute: "default-value" },
     _text: { state: true },
     _visible: { state: true },
 };
-Tooltip.styles = css `
-    :host {
-      position: relative;
-      display: inline-block;
-    }
-
-    .slot-wrapper {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .bubble {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      left: 50%;
-      bottom: 100%;
-      transform: translate(-50%, calc(-2px * var(--sf)));
-      z-index: 1000;
-      pointer-events: none;
-      height: calc(var(--08) * var(--sf));
-      opacity: 0;
-      transition:
-        opacity 120ms ease,
-        transform 120ms ease;
-      background-color: light-dark(var(--black), var(--white));
-      color: light-dark(var(--white), var(--black));
-      border-radius: 0;
-      font-size: var(--type-size-default);
-      padding: 0px calc(1px * var(--sf));
-      font-family: var(
-        --typeface,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        sans-serif
-      );
-      font-weight: 500;
-      white-space: nowrap;
-      min-width: max-content;
-    }
-
-    .bubble.visible {
-      opacity: 1;
-    }
-  `;
+Tooltip.styles = unsafeCSS(styles);
 customElements.define("ds-tooltip", Tooltip);

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

@@ -0,0 +1,77 @@
+/* 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

@@ -0,0 +1,67 @@
+/* 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

@@ -0,0 +1,21 @@
+/* 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

@@ -0,0 +1,9 @@
+/* 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

@@ -0,0 +1,93 @@
+/* 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

@@ -0,0 +1,30 @@
+/* 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

@@ -0,0 +1,46 @@
+/* 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;
+}

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

@@ -0,0 +1,26 @@
+/* ds-pagedots.css */
+/* Page dots indicator component styles for carousels and pagination */
+
+:host {
+  display: flex;
+  gap: calc(11.2px * var(--sf, 1));
+  justify-content: center;
+  align-items: center;
+  height: calc(28px * var(--sf, 1));
+}
+
+.dot {
+  width: calc(2.8px * var(--sf, 1));
+  height: calc(2.8px * var(--sf, 1));
+  border-radius: 50%;
+  background: white;
+  border: calc(0.7px * var(--sf, 1)) solid #696969;
+  transition: background 0.2s ease, border 0.2s ease;
+}
+
+.dot.active {
+  background: #666;
+  border: none;
+}
+
+

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

@@ -0,0 +1,29 @@
+/* ds-text.css */
+/* Text component styles for displaying translations */
+
+:host {
+  display: inline;
+  font-family: var(--typeface-regular);
+  font-size: var(--type-size-default);
+  font-weight: var(--type-weight-default);
+  line-height: calc(var(--type-lineheight-default) * var(--sf));
+  letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));
+  text-align: var(--text-align-default);
+  text-transform: var(--text-transform-default);
+  text-decoration: var(--text-decoration-default);
+}
+
+:host([data-language="ja"]) {
+  font-family: var(--typeface-regular-jp);
+}
+
+:host([data-language="zh"]),
+:host([data-language="zh-hant"]) {
+  font-family: var(--typeface-regular-zh-hant);
+  font-weight: 800;
+}
+
+:host([data-language="zh-hans"]) {
+  font-family: var(--typeface-regular-zh-hans);
+  font-weight: 800;
+}

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

@@ -0,0 +1,49 @@
+/* ds-tooltip.css */
+/* Tooltip component styles */
+
+:host {
+  position: relative;
+  display: inline-block;
+}
+
+.slot-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.bubble {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translate(-50%, calc(-2px * var(--sf)));
+  z-index: 1000;
+  pointer-events: none;
+  height: calc(var(--08) * var(--sf));
+  opacity: 0;
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+  background-color: light-dark(var(--black), var(--white));
+  color: light-dark(var(--white), var(--black));
+  border-radius: 0;
+  font-size: var(--type-size-default);
+  padding: 0px calc(1px * var(--sf));
+  font-family: var(
+    --typeface-regular,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif
+  );
+  font-weight: 500;
+  white-space: nowrap;
+  min-width: max-content;
+}
+
+.bubble.visible {
+  opacity: 1;
+}

package/dist/3-unit/ds-accordion.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from "lit";
+import "../2-core/ds-text";
+import "../2-core/ds-icon";
+import "./ds-row";
+/**
+ * Native accordion using <details>/<summary> (no JS toggle logic).
+ *
+ * Usage (with translation text):
+ * <ds-accordion summary="How it began" details="Designed in Hokkaido"></ds-accordion>
+ *
+ * Usage (with slotted details content):
+ * <ds-accordion summary="How it began">
+ *   <div slot="details">Rich HTML content here</div>
+ * </ds-accordion>
+ */
+export declare class Accordion extends LitElement {
+    static properties: {
+        summary: {
+            type: StringConstructor;
+        };
+        details: {
+            type: StringConstructor;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _hasSlottedContent: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+    };
+    summary: string;
+    details: string;
+    open: boolean;
+    _hasSlottedContent: boolean;
+    constructor();
+    static styles: import("lit").CSSResult;
+    private _handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-accordion": Accordion;
+    }
+}
+//# sourceMappingURL=ds-accordion.d.ts.map

package/dist/3-unit/ds-accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-accordion.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAClD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAGlB;;;;;;;;;;GAUG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;MAKf;IAEM,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,OAAO,CAAC;;IAUpC,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,iBAAiB;IAYzB,MAAM;CAkCP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/3-unit/ds-accordion.js

@@ -0,0 +1,75 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import "../2-core/ds-text";
+import "../2-core/ds-icon";
+import "./ds-row";
+import styles from "./styles/ds-accordion.css?inline";
+/**
+ * Native accordion using <details>/<summary> (no JS toggle logic).
+ *
+ * Usage (with translation text):
+ * <ds-accordion summary="How it began" details="Designed in Hokkaido"></ds-accordion>
+ *
+ * Usage (with slotted details content):
+ * <ds-accordion summary="How it began">
+ *   <div slot="details">Rich HTML content here</div>
+ * </ds-accordion>
+ */
+export class Accordion extends LitElement {
+    constructor() {
+        super();
+        this.summary = "";
+        this.details = "";
+        this.open = false;
+        this._hasSlottedContent = false;
+    }
+    _handleSlotChange(e) {
+        const slot = e.target;
+        const assignedNodes = slot.assignedNodes({ flatten: true });
+        // Filter out empty text nodes (whitespace only)
+        const hasContent = assignedNodes.some((node) => node.nodeType === Node.ELEMENT_NODE ||
+            (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
+        this._hasSlottedContent = hasContent;
+    }
+    render() {
+        return html `
+      <details ?open=${this.open}>
+        <summary>
+          <ds-row class="summaryRow" type="centered">
+            <ds-text .text=${this.summary}></ds-text>
+            <ds-icon class="chevron" aria-hidden="true">
+              <svg
+                viewBox="0 0 10.157 8.219"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path
+                  d="M5.078 8.219L0 3.141L1.414 1.727L5.078 5.391L8.743 1.727L10.157 3.141L5.078 8.219Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </ds-icon>
+          </ds-row>
+        </summary>
+
+        <div class="detailsBody">
+          <slot name="details" @slotchange=${this._handleSlotChange}></slot>
+          ${!this._hasSlottedContent
+            ? html `<ds-text
+                class="detailsText"
+                .text=${this.details}
+              ></ds-text>`
+            : ""}
+        </div>
+      </details>
+    `;
+    }
+}
+Accordion.properties = {
+    summary: { type: String },
+    details: { type: String },
+    open: { type: Boolean, reflect: true },
+    _hasSlottedContent: { type: Boolean, state: true },
+};
+Accordion.styles = unsafeCSS(styles);
+customElements.define("ds-accordion", Accordion);