From 46b8207aa6e70694a809faefa0a0684a1798a56f Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Mon, 7 Oct 2024 22:47:30 +0900 Subject: [PATCH 01/30] =?UTF-8?q?DefinitionList=E3=81=AEdt=E5=AE=9F?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../definitionList/sp-definition-list-dt.css | 10 ++++ .../definitionList/sp-definition-list-dt.ts | 48 +++++++++++++++++++ .../sp-definition-list-dt.story.ts | 18 +++++++ 3 files changed, 76 insertions(+) create mode 100644 src/components/definitionList/sp-definition-list-dt.css create mode 100644 src/components/definitionList/sp-definition-list-dt.ts create mode 100644 stories/definitionList/sp-definition-list-dt.story.ts diff --git a/src/components/definitionList/sp-definition-list-dt.css b/src/components/definitionList/sp-definition-list-dt.css new file mode 100644 index 0000000..9ea71fd --- /dev/null +++ b/src/components/definitionList/sp-definition-list-dt.css @@ -0,0 +1,10 @@ +.base { + width: 160px; + height: 28px; + box-sizing: border-box; + padding: 4.5px 0; + color: var(--color-semantic-text-body-regular); + font-size: 12px; + font-weight: bold; + line-height: 1.6; +} diff --git a/src/components/definitionList/sp-definition-list-dt.ts b/src/components/definitionList/sp-definition-list-dt.ts new file mode 100644 index 0000000..e00cfbe --- /dev/null +++ b/src/components/definitionList/sp-definition-list-dt.ts @@ -0,0 +1,48 @@ +// @ts-ignore +import foundationStyle from "../foundation.css?inline" assert { type: "css" }; +// @ts-ignore +import spDefinitionListDtStyle from "./sp-definition-list-dt.css?inline" assert { type: "css" }; + +const styles = new CSSStyleSheet(); +styles.replaceSync(`${foundationStyle} ${spDefinitionListDtStyle}`); + +export class SpDefinitionListDt extends HTMLElement { + #dtElement = document.createElement("dt"); + + set text(value: string) { + this.#dtElement.innerText = value; + } + + static get observedAttributes() { + return ["text"]; + } + + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + this.#dtElement.classList.add("base"); + this.shadowRoot.appendChild(this.#dtElement); + } + + attributeChangedCallback(name: string, oldValue: string, newValue: string) { + if (oldValue === newValue) return; + switch (name) { + case "text": + this.text = newValue; + break; + } + } +} + +customElements.get("sp-definition-list-dt") || + customElements.define("sp-definition-list-dt", SpDefinitionListDt); + +declare global { + interface HTMLElementTagNameMap { + "sp-definition-list-dt": SpDefinitionListDt; + } +} diff --git a/stories/definitionList/sp-definition-list-dt.story.ts b/stories/definitionList/sp-definition-list-dt.story.ts new file mode 100644 index 0000000..d63dcb2 --- /dev/null +++ b/stories/definitionList/sp-definition-list-dt.story.ts @@ -0,0 +1,18 @@ +import "../../src/components/definitionList/sp-definition-list-dt"; +import type { Meta, StoryObj } from "@storybook/web-components"; +import "@sp-design/token/lib/speeda-tokens.css"; + +const meta: Meta = { + component: "sp-definition-list-dt", + argTypes: { + text: { type: "string" }, + }, + args: { + text: "Label", + }, +}; +export default meta; + +type Story = StoryObj; + +export const Basic: Story = {}; From 38b910357b3ad372678f454fbd9a5a1f9562ae16 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Tue, 8 Oct 2024 21:45:35 +0900 Subject: [PATCH 02/30] =?UTF-8?q?DefinitionList=E3=81=AEdd=E5=AE=9F?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../definitionList/sp-definition-list-dd.css | 10 ++++ .../definitionList/sp-definition-list-dd.ts | 48 +++++++++++++++++++ .../sp-definition-list-dd.story.ts | 18 +++++++ 3 files changed, 76 insertions(+) create mode 100644 src/components/definitionList/sp-definition-list-dd.css create mode 100644 src/components/definitionList/sp-definition-list-dd.ts create mode 100644 stories/definitionList/sp-definition-list-dd.story.ts diff --git a/src/components/definitionList/sp-definition-list-dd.css b/src/components/definitionList/sp-definition-list-dd.css new file mode 100644 index 0000000..8a34c1b --- /dev/null +++ b/src/components/definitionList/sp-definition-list-dd.css @@ -0,0 +1,10 @@ +.base { + height: 28px; + box-sizing: border-box; + margin-inline-start: 8px; + padding: 4.5px 0; + color: var(--color-semantic-text-body-regular); + font-size: 12px; + font-weight: normal; + line-height: 1.6; +} diff --git a/src/components/definitionList/sp-definition-list-dd.ts b/src/components/definitionList/sp-definition-list-dd.ts new file mode 100644 index 0000000..5d6624b --- /dev/null +++ b/src/components/definitionList/sp-definition-list-dd.ts @@ -0,0 +1,48 @@ +// @ts-ignore +import foundationStyle from "../foundation.css?inline" assert { type: "css" }; +// @ts-ignore +import spDefinitionListDdStyle from "./sp-definition-list-dd.css?inline" assert { type: "css" }; + +const styles = new CSSStyleSheet(); +styles.replaceSync(`${foundationStyle} ${spDefinitionListDdStyle}`); + +export class SpDefinitionListDd extends HTMLElement { + #ddElement = document.createElement("dd"); + + set text(value: string) { + this.#ddElement.innerText = value; + } + + static get observedAttributes() { + return ["text"]; + } + + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + this.#ddElement.classList.add("base"); + this.shadowRoot.appendChild(this.#ddElement); + } + + attributeChangedCallback(name: string, oldValue: string, newValue: string) { + if (oldValue === newValue) return; + switch (name) { + case "text": + this.text = newValue; + break; + } + } +} + +customElements.get("sp-definition-list-dd") || + customElements.define("sp-definition-list-dd", SpDefinitionListDd); + +declare global { + interface HTMLElementTagNameMap { + "sp-definition-list-dd": SpDefinitionListDd; + } +} diff --git a/stories/definitionList/sp-definition-list-dd.story.ts b/stories/definitionList/sp-definition-list-dd.story.ts new file mode 100644 index 0000000..53098b0 --- /dev/null +++ b/stories/definitionList/sp-definition-list-dd.story.ts @@ -0,0 +1,18 @@ +import "../../src/components/definitionList/sp-definition-list-dd"; +import type { Meta, StoryObj } from "@storybook/web-components"; +import "@sp-design/token/lib/speeda-tokens.css"; + +const meta: Meta = { + component: "sp-definition-list-dd", + argTypes: { + text: { type: "string" }, + }, + args: { + text: "Text", + }, +}; +export default meta; + +type Story = StoryObj; + +export const Basic: Story = {}; From d3c453e9bcfa00868152b9cb5f909cac3a75d5fe Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Tue, 8 Oct 2024 22:25:59 +0900 Subject: [PATCH 03/30] =?UTF-8?q?text=E3=82=92args=E3=81=A7=E3=81=AF?= =?UTF-8?q?=E3=81=AA=E3=81=8Fchildren=E3=81=A7=E6=B8=A1=E3=81=99=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../definitionList/sp-definition-list-dd.css | 2 ++ .../definitionList/sp-definition-list-dd.ts | 17 ++-------- .../definitionList/sp-definition-list-dt.css | 1 + .../definitionList/sp-definition-list-dt.ts | 17 ++-------- .../sp-definition-list-dd.story.ts | 5 ++- .../sp-definition-list-dt.story.ts | 5 ++- .../sp-definition-list.story.ts | 34 +++++++++++++++++++ 7 files changed, 45 insertions(+), 36 deletions(-) create mode 100644 stories/definitionList/sp-definition-list.story.ts diff --git a/src/components/definitionList/sp-definition-list-dd.css b/src/components/definitionList/sp-definition-list-dd.css index 8a34c1b..f4fb676 100644 --- a/src/components/definitionList/sp-definition-list-dd.css +++ b/src/components/definitionList/sp-definition-list-dd.css @@ -1,4 +1,6 @@ .base { + display: inline-block; + width: 480px; height: 28px; box-sizing: border-box; margin-inline-start: 8px; diff --git a/src/components/definitionList/sp-definition-list-dd.ts b/src/components/definitionList/sp-definition-list-dd.ts index 5d6624b..f7e8b77 100644 --- a/src/components/definitionList/sp-definition-list-dd.ts +++ b/src/components/definitionList/sp-definition-list-dd.ts @@ -9,14 +9,6 @@ styles.replaceSync(`${foundationStyle} ${spDefinitionListDdStyle}`); export class SpDefinitionListDd extends HTMLElement { #ddElement = document.createElement("dd"); - set text(value: string) { - this.#ddElement.innerText = value; - } - - static get observedAttributes() { - return ["text"]; - } - constructor() { super(); this.attachShadow({ mode: "open" }); @@ -28,13 +20,8 @@ export class SpDefinitionListDd extends HTMLElement { this.shadowRoot.appendChild(this.#ddElement); } - attributeChangedCallback(name: string, oldValue: string, newValue: string) { - if (oldValue === newValue) return; - switch (name) { - case "text": - this.text = newValue; - break; - } + connectedCallback() { + this.#ddElement.textContent = this.textContent; } } diff --git a/src/components/definitionList/sp-definition-list-dt.css b/src/components/definitionList/sp-definition-list-dt.css index 9ea71fd..19770ec 100644 --- a/src/components/definitionList/sp-definition-list-dt.css +++ b/src/components/definitionList/sp-definition-list-dt.css @@ -1,4 +1,5 @@ .base { + display: inline-block; width: 160px; height: 28px; box-sizing: border-box; diff --git a/src/components/definitionList/sp-definition-list-dt.ts b/src/components/definitionList/sp-definition-list-dt.ts index e00cfbe..8a4176e 100644 --- a/src/components/definitionList/sp-definition-list-dt.ts +++ b/src/components/definitionList/sp-definition-list-dt.ts @@ -9,14 +9,6 @@ styles.replaceSync(`${foundationStyle} ${spDefinitionListDtStyle}`); export class SpDefinitionListDt extends HTMLElement { #dtElement = document.createElement("dt"); - set text(value: string) { - this.#dtElement.innerText = value; - } - - static get observedAttributes() { - return ["text"]; - } - constructor() { super(); this.attachShadow({ mode: "open" }); @@ -28,13 +20,8 @@ export class SpDefinitionListDt extends HTMLElement { this.shadowRoot.appendChild(this.#dtElement); } - attributeChangedCallback(name: string, oldValue: string, newValue: string) { - if (oldValue === newValue) return; - switch (name) { - case "text": - this.text = newValue; - break; - } + connectedCallback() { + this.#dtElement.textContent = this.textContent; } } diff --git a/stories/definitionList/sp-definition-list-dd.story.ts b/stories/definitionList/sp-definition-list-dd.story.ts index 53098b0..3a64ac5 100644 --- a/stories/definitionList/sp-definition-list-dd.story.ts +++ b/stories/definitionList/sp-definition-list-dd.story.ts @@ -4,12 +4,11 @@ import "@sp-design/token/lib/speeda-tokens.css"; const meta: Meta = { component: "sp-definition-list-dd", - argTypes: { - text: { type: "string" }, - }, args: { text: "Text", }, + render: ({ text }) => + `${text}`, }; export default meta; diff --git a/stories/definitionList/sp-definition-list-dt.story.ts b/stories/definitionList/sp-definition-list-dt.story.ts index d63dcb2..bd6b55c 100644 --- a/stories/definitionList/sp-definition-list-dt.story.ts +++ b/stories/definitionList/sp-definition-list-dt.story.ts @@ -4,12 +4,11 @@ import "@sp-design/token/lib/speeda-tokens.css"; const meta: Meta = { component: "sp-definition-list-dt", - argTypes: { - text: { type: "string" }, - }, args: { text: "Label", }, + render: ({ text }) => + `${text}`, }; export default meta; diff --git a/stories/definitionList/sp-definition-list.story.ts b/stories/definitionList/sp-definition-list.story.ts new file mode 100644 index 0000000..fbed426 --- /dev/null +++ b/stories/definitionList/sp-definition-list.story.ts @@ -0,0 +1,34 @@ +import "../../src/components/definitionList/sp-definition-list-dt"; +import "../../src/components/definitionList/sp-definition-list-dd"; +import type { Meta, StoryObj } from "@storybook/web-components"; +import "@sp-design/token/lib/speeda-tokens.css"; +import { html } from "lit"; + +const DefinitionList = (termText: string, definitionText: string) => html` +
+ ${termText} + ${definitionText} +
+`; + +const meta: Meta = { + args: { + termText: "Term", + definitionText: "Definition", + }, + render: ({ termText, definitionText }) => + DefinitionList(termText, definitionText), +}; +export default meta; + +type Story = StoryObj; + +export const Basic: Story = {}; + +export const OverflowWrap: Story = { + args: { + termText: "Term", + definitionText: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + }, +}; From 6d76c0c199956d5d3060129703c6acb0a6e6adb3 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Thu, 17 Oct 2024 22:31:26 +0900 Subject: [PATCH 04/30] reset.css --- src/components/definitionList/sp-definition-list-dd.css | 1 - src/components/definitionList/sp-definition-list-dd.ts | 4 +++- src/components/definitionList/sp-definition-list-dt.css | 1 - src/components/definitionList/sp-definition-list-dt.ts | 4 +++- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/definitionList/sp-definition-list-dd.css b/src/components/definitionList/sp-definition-list-dd.css index f4fb676..efa5759 100644 --- a/src/components/definitionList/sp-definition-list-dd.css +++ b/src/components/definitionList/sp-definition-list-dd.css @@ -2,7 +2,6 @@ display: inline-block; width: 480px; height: 28px; - box-sizing: border-box; margin-inline-start: 8px; padding: 4.5px 0; color: var(--color-semantic-text-body-regular); diff --git a/src/components/definitionList/sp-definition-list-dd.ts b/src/components/definitionList/sp-definition-list-dd.ts index f7e8b77..a10f3de 100644 --- a/src/components/definitionList/sp-definition-list-dd.ts +++ b/src/components/definitionList/sp-definition-list-dd.ts @@ -1,10 +1,12 @@ // @ts-ignore +import resetStyle from "@acab/reset.css?inline" assert { type: "css" }; +// @ts-ignore import foundationStyle from "../foundation.css?inline" assert { type: "css" }; // @ts-ignore import spDefinitionListDdStyle from "./sp-definition-list-dd.css?inline" assert { type: "css" }; const styles = new CSSStyleSheet(); -styles.replaceSync(`${foundationStyle} ${spDefinitionListDdStyle}`); +styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListDdStyle}`); export class SpDefinitionListDd extends HTMLElement { #ddElement = document.createElement("dd"); diff --git a/src/components/definitionList/sp-definition-list-dt.css b/src/components/definitionList/sp-definition-list-dt.css index 19770ec..adc5692 100644 --- a/src/components/definitionList/sp-definition-list-dt.css +++ b/src/components/definitionList/sp-definition-list-dt.css @@ -2,7 +2,6 @@ display: inline-block; width: 160px; height: 28px; - box-sizing: border-box; padding: 4.5px 0; color: var(--color-semantic-text-body-regular); font-size: 12px; diff --git a/src/components/definitionList/sp-definition-list-dt.ts b/src/components/definitionList/sp-definition-list-dt.ts index 8a4176e..2b761c4 100644 --- a/src/components/definitionList/sp-definition-list-dt.ts +++ b/src/components/definitionList/sp-definition-list-dt.ts @@ -1,10 +1,12 @@ // @ts-ignore +import resetStyle from "@acab/reset.css?inline" assert { type: "css" }; +// @ts-ignore import foundationStyle from "../foundation.css?inline" assert { type: "css" }; // @ts-ignore import spDefinitionListDtStyle from "./sp-definition-list-dt.css?inline" assert { type: "css" }; const styles = new CSSStyleSheet(); -styles.replaceSync(`${foundationStyle} ${spDefinitionListDtStyle}`); +styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListDtStyle}`); export class SpDefinitionListDt extends HTMLElement { #dtElement = document.createElement("dt"); From 77411895d4ca6de7f5db56e78f404b19659f871e Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Thu, 17 Oct 2024 22:40:14 +0900 Subject: [PATCH 05/30] =?UTF-8?q?width=E3=81=A8height=E3=82=92=E4=BD=BF?= =?UTF-8?q?=E3=82=8F=E3=81=AA=E3=81=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/definitionList/sp-definition-list-dd.css | 2 -- src/components/definitionList/sp-definition-list-dt.css | 3 +-- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/definitionList/sp-definition-list-dd.css b/src/components/definitionList/sp-definition-list-dd.css index efa5759..f3eacb4 100644 --- a/src/components/definitionList/sp-definition-list-dd.css +++ b/src/components/definitionList/sp-definition-list-dd.css @@ -1,7 +1,5 @@ .base { display: inline-block; - width: 480px; - height: 28px; margin-inline-start: 8px; padding: 4.5px 0; color: var(--color-semantic-text-body-regular); diff --git a/src/components/definitionList/sp-definition-list-dt.css b/src/components/definitionList/sp-definition-list-dt.css index adc5692..7e63ed1 100644 --- a/src/components/definitionList/sp-definition-list-dt.css +++ b/src/components/definitionList/sp-definition-list-dt.css @@ -1,7 +1,6 @@ .base { display: inline-block; - width: 160px; - height: 28px; + min-width: 160px; padding: 4.5px 0; color: var(--color-semantic-text-body-regular); font-size: 12px; From 7cc35f6cf02eb5ca7ec4d75f8ca0be747d871ac7 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Thu, 17 Oct 2024 22:42:36 +0900 Subject: [PATCH 06/30] =?UTF-8?q?inline-block=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/definitionList/sp-definition-list-dd.css | 2 -- src/components/definitionList/sp-definition-list-dt.css | 1 - 2 files changed, 3 deletions(-) diff --git a/src/components/definitionList/sp-definition-list-dd.css b/src/components/definitionList/sp-definition-list-dd.css index f3eacb4..d2b4cd6 100644 --- a/src/components/definitionList/sp-definition-list-dd.css +++ b/src/components/definitionList/sp-definition-list-dd.css @@ -1,6 +1,4 @@ .base { - display: inline-block; - margin-inline-start: 8px; padding: 4.5px 0; color: var(--color-semantic-text-body-regular); font-size: 12px; diff --git a/src/components/definitionList/sp-definition-list-dt.css b/src/components/definitionList/sp-definition-list-dt.css index 7e63ed1..9fd69ea 100644 --- a/src/components/definitionList/sp-definition-list-dt.css +++ b/src/components/definitionList/sp-definition-list-dt.css @@ -1,5 +1,4 @@ .base { - display: inline-block; min-width: 160px; padding: 4.5px 0; color: var(--color-semantic-text-body-regular); From 8e35c6463f13f60cbfa514e70b0d5ac188a14c2d Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Thu, 17 Oct 2024 22:59:54 +0900 Subject: [PATCH 07/30] =?UTF-8?q?definition-list=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../definitionList/sp-definition-list.css | 5 +++ .../definitionList/sp-definition-list.ts | 39 +++++++++++++++++++ .../sp-definition-list.story.ts | 7 +++- 3 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 src/components/definitionList/sp-definition-list.css create mode 100644 src/components/definitionList/sp-definition-list.ts diff --git a/src/components/definitionList/sp-definition-list.css b/src/components/definitionList/sp-definition-list.css new file mode 100644 index 0000000..1006b41 --- /dev/null +++ b/src/components/definitionList/sp-definition-list.css @@ -0,0 +1,5 @@ +.base { + display: grid; + grid-template-columns: 160px 1fr; + gap: 16px 8px; +} diff --git a/src/components/definitionList/sp-definition-list.ts b/src/components/definitionList/sp-definition-list.ts new file mode 100644 index 0000000..13f0ee2 --- /dev/null +++ b/src/components/definitionList/sp-definition-list.ts @@ -0,0 +1,39 @@ +// @ts-ignore +import resetStyle from "@acab/reset.css?inline" assert { type: "css" }; +// @ts-ignore +import foundationStyle from "../foundation.css?inline" assert { type: "css" }; +// @ts-ignore +import spDefinitionListStyle from "./sp-definition-list.css?inline" assert { type: "css" }; + +const styles = new CSSStyleSheet(); +styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListStyle}`); + +export class SpDefinitionList extends HTMLElement { + #dlElement = document.createElement("dl"); + + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + this.#dlElement.classList.add("base"); + this.shadowRoot.appendChild(this.#dlElement); + } + + connectedCallback() { + while (this.firstChild) { + this.#dlElement.appendChild(this.firstChild); + } + } +} + +customElements.get("sp-definition-list") || + customElements.define("sp-definition-list", SpDefinitionList); + +declare global { + interface HTMLElementTagNameMap { + "sp-definition-list": SpDefinitionList; + } +} diff --git a/stories/definitionList/sp-definition-list.story.ts b/stories/definitionList/sp-definition-list.story.ts index fbed426..190a38e 100644 --- a/stories/definitionList/sp-definition-list.story.ts +++ b/stories/definitionList/sp-definition-list.story.ts @@ -1,14 +1,17 @@ import "../../src/components/definitionList/sp-definition-list-dt"; import "../../src/components/definitionList/sp-definition-list-dd"; +import "../../src/components/definitionList/sp-definition-list"; import type { Meta, StoryObj } from "@storybook/web-components"; import "@sp-design/token/lib/speeda-tokens.css"; import { html } from "lit"; const DefinitionList = (termText: string, definitionText: string) => html` -
+ ${termText} ${definitionText} -
+ ${termText} + ${definitionText} + `; const meta: Meta = { From 30bc57d2a03c6e9eec39b7fd7a0d0c7bd65a65e5 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Thu, 17 Oct 2024 23:07:24 +0900 Subject: [PATCH 08/30] overflow-wrap --- src/components/definitionList/sp-definition-list-dd.css | 1 + src/components/definitionList/sp-definition-list-dt.css | 2 +- stories/definitionList/sp-definition-list.story.ts | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/definitionList/sp-definition-list-dd.css b/src/components/definitionList/sp-definition-list-dd.css index d2b4cd6..19ddf4f 100644 --- a/src/components/definitionList/sp-definition-list-dd.css +++ b/src/components/definitionList/sp-definition-list-dd.css @@ -4,4 +4,5 @@ font-size: 12px; font-weight: normal; line-height: 1.6; + overflow-wrap: break-word; } diff --git a/src/components/definitionList/sp-definition-list-dt.css b/src/components/definitionList/sp-definition-list-dt.css index 9fd69ea..cbe8d0a 100644 --- a/src/components/definitionList/sp-definition-list-dt.css +++ b/src/components/definitionList/sp-definition-list-dt.css @@ -1,8 +1,8 @@ .base { - min-width: 160px; padding: 4.5px 0; color: var(--color-semantic-text-body-regular); font-size: 12px; font-weight: bold; line-height: 1.6; + overflow-wrap: break-word; } diff --git a/stories/definitionList/sp-definition-list.story.ts b/stories/definitionList/sp-definition-list.story.ts index 190a38e..f52b52b 100644 --- a/stories/definitionList/sp-definition-list.story.ts +++ b/stories/definitionList/sp-definition-list.story.ts @@ -30,8 +30,8 @@ export const Basic: Story = {}; export const OverflowWrap: Story = { args: { - termText: "Term", + termText: "LongTermLongTermLongTermLongTerm", definitionText: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", }, }; From 7655184aacc10c7c5d173ce6194936d8dedd5f18 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Thu, 17 Oct 2024 23:16:22 +0900 Subject: [PATCH 09/30] format --- src/components/definitionList/sp-definition-list-dd.ts | 4 +++- src/components/definitionList/sp-definition-list-dt.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/definitionList/sp-definition-list-dd.ts b/src/components/definitionList/sp-definition-list-dd.ts index a10f3de..24bc2c4 100644 --- a/src/components/definitionList/sp-definition-list-dd.ts +++ b/src/components/definitionList/sp-definition-list-dd.ts @@ -6,7 +6,9 @@ import foundationStyle from "../foundation.css?inline" assert { type: "css" }; import spDefinitionListDdStyle from "./sp-definition-list-dd.css?inline" assert { type: "css" }; const styles = new CSSStyleSheet(); -styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListDdStyle}`); +styles.replaceSync( + `${resetStyle} ${foundationStyle} ${spDefinitionListDdStyle}`, +); export class SpDefinitionListDd extends HTMLElement { #ddElement = document.createElement("dd"); diff --git a/src/components/definitionList/sp-definition-list-dt.ts b/src/components/definitionList/sp-definition-list-dt.ts index 2b761c4..9338c3b 100644 --- a/src/components/definitionList/sp-definition-list-dt.ts +++ b/src/components/definitionList/sp-definition-list-dt.ts @@ -6,7 +6,9 @@ import foundationStyle from "../foundation.css?inline" assert { type: "css" }; import spDefinitionListDtStyle from "./sp-definition-list-dt.css?inline" assert { type: "css" }; const styles = new CSSStyleSheet(); -styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListDtStyle}`); +styles.replaceSync( + `${resetStyle} ${foundationStyle} ${spDefinitionListDtStyle}`, +); export class SpDefinitionListDt extends HTMLElement { #dtElement = document.createElement("dt"); From a270be7047bea6239cd453a97a12a0ba624556db Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Mon, 28 Oct 2024 23:06:58 +0900 Subject: [PATCH 10/30] remove word-break --- src/components/definitionList/sp-definition-list-dd.css | 1 - src/components/definitionList/sp-definition-list-dt.css | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/definitionList/sp-definition-list-dd.css b/src/components/definitionList/sp-definition-list-dd.css index 19ddf4f..d2b4cd6 100644 --- a/src/components/definitionList/sp-definition-list-dd.css +++ b/src/components/definitionList/sp-definition-list-dd.css @@ -4,5 +4,4 @@ font-size: 12px; font-weight: normal; line-height: 1.6; - overflow-wrap: break-word; } diff --git a/src/components/definitionList/sp-definition-list-dt.css b/src/components/definitionList/sp-definition-list-dt.css index cbe8d0a..80e45b0 100644 --- a/src/components/definitionList/sp-definition-list-dt.css +++ b/src/components/definitionList/sp-definition-list-dt.css @@ -4,5 +4,4 @@ font-size: 12px; font-weight: bold; line-height: 1.6; - overflow-wrap: break-word; } From 19b0ec199958db2ef980f1c296e40301cf6d6a88 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Mon, 28 Oct 2024 23:22:56 +0900 Subject: [PATCH 11/30] =?UTF-8?q?DOM=E6=93=8D=E4=BD=9C=E3=82=92constructor?= =?UTF-8?q?=E3=81=8B=E3=82=89connectedCallback=E3=81=AB=E7=A7=BB=E5=8B=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/definitionList/sp-definition-list-dd.ts | 8 ++++---- src/components/definitionList/sp-definition-list-dt.ts | 8 ++++---- src/components/definitionList/sp-definition-list.ts | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/definitionList/sp-definition-list-dd.ts b/src/components/definitionList/sp-definition-list-dd.ts index 24bc2c4..67c3973 100644 --- a/src/components/definitionList/sp-definition-list-dd.ts +++ b/src/components/definitionList/sp-definition-list-dd.ts @@ -16,16 +16,16 @@ export class SpDefinitionListDd extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); + } + + connectedCallback() { this.shadowRoot.adoptedStyleSheets = [ ...this.shadowRoot.adoptedStyleSheets, styles, ]; this.#ddElement.classList.add("base"); - this.shadowRoot.appendChild(this.#ddElement); - } - - connectedCallback() { this.#ddElement.textContent = this.textContent; + this.shadowRoot.appendChild(this.#ddElement); } } diff --git a/src/components/definitionList/sp-definition-list-dt.ts b/src/components/definitionList/sp-definition-list-dt.ts index 9338c3b..edf394e 100644 --- a/src/components/definitionList/sp-definition-list-dt.ts +++ b/src/components/definitionList/sp-definition-list-dt.ts @@ -16,16 +16,16 @@ export class SpDefinitionListDt extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); + } + + connectedCallback() { this.shadowRoot.adoptedStyleSheets = [ ...this.shadowRoot.adoptedStyleSheets, styles, ]; this.#dtElement.classList.add("base"); - this.shadowRoot.appendChild(this.#dtElement); - } - - connectedCallback() { this.#dtElement.textContent = this.textContent; + this.shadowRoot.appendChild(this.#dtElement); } } diff --git a/src/components/definitionList/sp-definition-list.ts b/src/components/definitionList/sp-definition-list.ts index 13f0ee2..357e7be 100644 --- a/src/components/definitionList/sp-definition-list.ts +++ b/src/components/definitionList/sp-definition-list.ts @@ -14,18 +14,18 @@ export class SpDefinitionList extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); + } + + connectedCallback() { this.shadowRoot.adoptedStyleSheets = [ ...this.shadowRoot.adoptedStyleSheets, styles, ]; this.#dlElement.classList.add("base"); - this.shadowRoot.appendChild(this.#dlElement); - } - - connectedCallback() { while (this.firstChild) { this.#dlElement.appendChild(this.firstChild); } + this.shadowRoot.appendChild(this.#dlElement); } } From e8f8dfc2b75fa11dacc53dc6b8a678fca2aba62c Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Tue, 29 Oct 2024 00:05:25 +0900 Subject: [PATCH 12/30] =?UTF-8?q?dd=E3=81=ABhtml=E3=82=92=E6=B8=A1?= =?UTF-8?q?=E3=81=9B=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/definitionList/sp-definition-list-dd.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/definitionList/sp-definition-list-dd.ts b/src/components/definitionList/sp-definition-list-dd.ts index 67c3973..8afc83d 100644 --- a/src/components/definitionList/sp-definition-list-dd.ts +++ b/src/components/definitionList/sp-definition-list-dd.ts @@ -24,7 +24,7 @@ export class SpDefinitionListDd extends HTMLElement { styles, ]; this.#ddElement.classList.add("base"); - this.#ddElement.textContent = this.textContent; + this.#ddElement.innerHTML = this.innerHTML; this.shadowRoot.appendChild(this.#ddElement); } } From 99cde7a3cfffebfc51ee306bd287b183563d7a5f Mon Sep 17 00:00:00 2001 From: oki07 Date: Tue, 29 Oct 2024 20:25:53 +0900 Subject: [PATCH 13/30] =?UTF-8?q?tsconfig=E3=81=AB=E3=83=AA=E3=83=B3?= =?UTF-8?q?=E3=83=88=E7=B3=BB=E3=81=AE=E3=82=AA=E3=83=97=E3=82=B7=E3=83=A7?= =?UTF-8?q?=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/button/sp-button.ts | 12 ++++++++---- src/components/checkbox/sp-checkbox-list.ts | 11 +++++++---- src/components/checkbox/sp-checkbox-text.ts | 11 +++++++---- src/components/checkbox/sp-checkbox.ts | 11 +++++++---- src/components/icon/sp-icon.ts | 11 +++++++---- .../radio/sp-radio-button-text-group.ts | 11 +++++++---- .../segmentedControl/sp-segmented-control.ts | 11 +++++++---- stories/button/sp-button.story.ts | 2 +- stories/checkbox/sp-checkbox-list.story.ts | 4 ++-- stories/checkbox/sp-checkbox-text.story.ts | 4 ++-- stories/checkbox/sp-checkbox.story.ts | 2 +- .../radio/sp-radio-button-text-group.story.ts | 2 +- .../sp-segmented-control.story.ts | 2 +- tests/utils/icon.ts | 2 +- tools/figma-icon.ts | 16 +++++++++++++++- tsconfig-build.json | 8 ++++++-- tsconfig.json | 6 +++++- 17 files changed, 85 insertions(+), 41 deletions(-) diff --git a/src/components/button/sp-button.ts b/src/components/button/sp-button.ts index 6fcda01..2073696 100644 --- a/src/components/button/sp-button.ts +++ b/src/components/button/sp-button.ts @@ -33,10 +33,14 @@ export class SpButton extends UbButton { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot!.adoptedStyleSheets, + styles, + ]; + } + this.#iconElement.classList.add("base__icon"); this.#iconElement.size = "small"; } diff --git a/src/components/checkbox/sp-checkbox-list.ts b/src/components/checkbox/sp-checkbox-list.ts index dfc5eb2..559abe7 100644 --- a/src/components/checkbox/sp-checkbox-list.ts +++ b/src/components/checkbox/sp-checkbox-list.ts @@ -12,10 +12,13 @@ styles.replaceSync(`${foundationStyle} ${checkmarkStyle} ${checkboxListStyle}`); export class SpCheckboxList extends UbCheckboxText { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } } diff --git a/src/components/checkbox/sp-checkbox-text.ts b/src/components/checkbox/sp-checkbox-text.ts index cfe15d4..9f68383 100644 --- a/src/components/checkbox/sp-checkbox-text.ts +++ b/src/components/checkbox/sp-checkbox-text.ts @@ -12,10 +12,13 @@ styles.replaceSync(`${foundationStyle} ${checkmarkStyle} ${checkboxTextStyle}`); export class SpCheckboxText extends UbCheckboxText { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } } diff --git a/src/components/checkbox/sp-checkbox.ts b/src/components/checkbox/sp-checkbox.ts index cb5eec9..5b029fe 100644 --- a/src/components/checkbox/sp-checkbox.ts +++ b/src/components/checkbox/sp-checkbox.ts @@ -12,10 +12,13 @@ styles.replaceSync(`${foundationStyle} ${checkmarkStyle} ${checkboxStyle}`); export class SpCheckbox extends UbCheckbox { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } } diff --git a/src/components/icon/sp-icon.ts b/src/components/icon/sp-icon.ts index 625bff4..34fa224 100644 --- a/src/components/icon/sp-icon.ts +++ b/src/components/icon/sp-icon.ts @@ -16,10 +16,13 @@ export class SpIcon extends UbIcon { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } set type(value: string) { diff --git a/src/components/radio/sp-radio-button-text-group.ts b/src/components/radio/sp-radio-button-text-group.ts index d959564..d8d7fc6 100644 --- a/src/components/radio/sp-radio-button-text-group.ts +++ b/src/components/radio/sp-radio-button-text-group.ts @@ -10,10 +10,13 @@ styles.replaceSync(`${foundationStyle} ${radioButtonTextGroupStyle}`); export class SpRadioButtonTextGroup extends UbRadioButtonTextGroup { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } } diff --git a/src/components/segmentedControl/sp-segmented-control.ts b/src/components/segmentedControl/sp-segmented-control.ts index bb0dbe3..b5f3be2 100644 --- a/src/components/segmentedControl/sp-segmented-control.ts +++ b/src/components/segmentedControl/sp-segmented-control.ts @@ -10,10 +10,13 @@ styles.replaceSync(`${foundationStyle} ${segmentedControlStyle}`); export class SpSegmentedControl extends UbRadioButtonTextGroup { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } } diff --git a/stories/button/sp-button.story.ts b/stories/button/sp-button.story.ts index 762215a..d6e6d0e 100644 --- a/stories/button/sp-button.story.ts +++ b/stories/button/sp-button.story.ts @@ -91,7 +91,7 @@ export const AttributeHTML: Story = { }; export const OverflowWrap: Story = { - render: (args) => html` + render: () => html`

texttexttexttexttexttexttextttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttextexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

diff --git a/stories/checkbox/sp-checkbox-list.story.ts b/stories/checkbox/sp-checkbox-list.story.ts index a0ed33b..2836c64 100644 --- a/stories/checkbox/sp-checkbox-list.story.ts +++ b/stories/checkbox/sp-checkbox-list.story.ts @@ -103,7 +103,7 @@ export const Form: Story = { }; export const OverflowWrap: Story = { - render: (args) => html` + render: () => html` @@ -123,7 +123,7 @@ export const OverflowWrap: Story = { }; export const ALL: Story = { - render: (args) => html` + render: () => html` diff --git a/stories/checkbox/sp-checkbox-text.story.ts b/stories/checkbox/sp-checkbox-text.story.ts index 9b87f94..8e23e51 100644 --- a/stories/checkbox/sp-checkbox-text.story.ts +++ b/stories/checkbox/sp-checkbox-text.story.ts @@ -103,7 +103,7 @@ export const Form: Story = { }; export const OverflowWrap: Story = { - render: (args) => html` + render: () => html` @@ -123,7 +123,7 @@ export const OverflowWrap: Story = { }; export const ALL: Story = { - render: (args) => html` + render: () => html`
diff --git a/stories/checkbox/sp-checkbox.story.ts b/stories/checkbox/sp-checkbox.story.ts index 768d958..e08675e 100644 --- a/stories/checkbox/sp-checkbox.story.ts +++ b/stories/checkbox/sp-checkbox.story.ts @@ -98,7 +98,7 @@ export const Form: Story = { }; export const ALL: Story = { - render: (args) => html` + render: () => html`
diff --git a/stories/radio/sp-radio-button-text-group.story.ts b/stories/radio/sp-radio-button-text-group.story.ts index 7a047e1..c8018c6 100644 --- a/stories/radio/sp-radio-button-text-group.story.ts +++ b/stories/radio/sp-radio-button-text-group.story.ts @@ -113,7 +113,7 @@ export const OverflowWrap: Story = { }; export const ALL: Story = { - render: (args) => html` + render: () => html`
diff --git a/stories/segmentedControl/sp-segmented-control.story.ts b/stories/segmentedControl/sp-segmented-control.story.ts index 2cc775c..e2ab7cb 100644 --- a/stories/segmentedControl/sp-segmented-control.story.ts +++ b/stories/segmentedControl/sp-segmented-control.story.ts @@ -58,7 +58,7 @@ type Story = StoryObj; export const Basic: Story = {}; export const ALL: Story = { - render: (args) => html` + render: () => html`
diff --git a/tests/utils/icon.ts b/tests/utils/icon.ts index 0338410..fbea692 100644 --- a/tests/utils/icon.ts +++ b/tests/utils/icon.ts @@ -5,5 +5,5 @@ export function isElementMatchingSpeedaIcon( iconName: keyof typeof speedaIconPaths, ) { const path = svg.querySelector("path"); - return `` === speedaIconPaths[iconName]; + return `` === speedaIconPaths[iconName]; } diff --git a/tools/figma-icon.ts b/tools/figma-icon.ts index eee0022..404678b 100644 --- a/tools/figma-icon.ts +++ b/tools/figma-icon.ts @@ -2,6 +2,14 @@ import { promisify } from "util"; import * as fs from "fs"; import * as path from "path"; +if (!process.env.FIGMA_TOKEN) { + throw new Error("FIGMA_TOKENが設定されていません"); +} + +if (!process.env.FIGMA_DESIGN_FILE_KEY) { + throw new Error("FIGMA_DESIGN_FILE_KEYが設定されていません"); +} + const TOKEN = process.env.FIGMA_TOKEN; const FIGMA_FILE_KEY = process.env.FIGMA_DESIGN_FILE_KEY; @@ -45,6 +53,9 @@ async function fetchFigma( async function fetchImageAndExtractPath(url: string): Promise { const response: any = await fetch(url).then((response) => response.text()); const match = /([\s\S]*?)<\/svg>/.exec(response); + if (!match) { + throw new Error("SVGが見つかりません"); + } return match[1].replace(/\sfill=".*"/, "").replace(/\n|\r/g, ""); } @@ -81,7 +92,10 @@ const main = async () => { await Promise.all( Object.entries(images).map(async ([key, value]) => { const path = await fetchImageAndExtractPath(String(value)); // TODO:型がよくわからん - icons.find((icon) => icon.id === key).path = path; + const icon = icons.find((icon) => icon.id === key); + if (icon) { + icon.path = path; + } }), ); diff --git a/tsconfig-build.json b/tsconfig-build.json index 4b10080..d6babc2 100644 --- a/tsconfig-build.json +++ b/tsconfig-build.json @@ -9,7 +9,11 @@ "experimentalDecorators": true, "useDefineForClassFields": false, "outDir": "dist", - "skipLibCheck": true + "skipLibCheck": true, + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true }, - "exclude": ["example", "stories", "dist", "tools"] + "exclude": ["example", "stories", "tests", "dist", "tools"] } diff --git a/tsconfig.json b/tsconfig.json index d6d5f1f..1dc7660 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,11 @@ "experimentalDecorators": true, "useDefineForClassFields": false, "outDir": "dist", - "skipLibCheck": true + "skipLibCheck": true, + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true }, "exclude": ["example", "dist"] } From 441b1b32a8c2654bc01c92bab063870b7ade63f4 Mon Sep 17 00:00:00 2001 From: "hazuki.okuda" Date: Wed, 30 Oct 2024 14:40:37 +0900 Subject: [PATCH 14/30] =?UTF-8?q?tab=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?= =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E3=81=A4=E3=81=8F=E3=81=A3?= =?UTF-8?q?=E3=81=A6=E3=81=BF=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/tab/sp-tab.ts | 142 ++++++++++++++++++++++++++++++ src/components/tab/tab.css | 160 ++++++++++++++++++++++++++++++++++ src/index.ts | 1 + stories/tab/sp-tab.story.ts | 164 +++++++++++++++++++++++++++++++++++ 4 files changed, 467 insertions(+) create mode 100644 src/components/tab/sp-tab.ts create mode 100644 src/components/tab/tab.css create mode 100644 stories/tab/sp-tab.story.ts diff --git a/src/components/tab/sp-tab.ts b/src/components/tab/sp-tab.ts new file mode 100644 index 0000000..d1cfc33 --- /dev/null +++ b/src/components/tab/sp-tab.ts @@ -0,0 +1,142 @@ +// @ts-ignore +import foundationStyle from "../foundation.css?inline" assert { type: "css" }; +// @ts-ignore +import tabStyle from "./tab.css?inline" assert { type: "css" }; +import { SpeedaIconTypes } from "../icon/icons"; +import { SpIcon } from "../icon/sp-icon"; + +type TabType = "tabWhite" | "tabGray"; + +const styles = new CSSStyleSheet(); +styles.replaceSync(`${foundationStyle} ${tabStyle}`); + +export class SpTab extends HTMLElement { + #selected: boolean; + #disabled: boolean; + #type: TabType; + #createNewIcon: boolean; + #createNewIconElement = new SpIcon(); + tabElement = document.createElement("button"); + textElement = document.createElement("span"); + + set text(value: string) { + this.textElement.innerText = value; + } + + get selected() { + return this.#selected; + } + set selected(value: boolean) { + this.#selected = value; + value ? this.#onSelectedAdd() : this.#onSelectedRemove(); + } + + get disabled() { + return this.#disabled; + } + set disabled(value: boolean) { + const tab = this.tabElement; + this.#disabled = value; + value ? tab.classList.add("isDisable") : tab.classList.remove("isDisable"); + this.#tabDisabledUpdate(); + } + + get type() { + return this.#type; + } + set type(value: TabType) { + const tab = this.tabElement; + const typeClassList = { + tabWhite: "-white", + tabGray: "-gray", + }; + tab.classList.remove(typeClassList[this.#type]); + tab.classList.add(typeClassList[value]); + this.#type = value; + } + get createNewIcon() { + return this.#createNewIcon; + } + set createNewIcon(value: boolean) { + this.#createNewIcon = value; + if (value === true) { + this.tabElement.insertBefore( + this.#createNewIconElement, + this.textElement, + ); + } else { + this.#createNewIconElement.remove(); + } + } + + static get observedAttributes() { + return ["text", "selected", "create-new-icon", "disabled", "type"]; + } + + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + this.tabElement.classList.add("spds__tab"); + this.tabElement.setAttribute("role", "tab"); + this.tabElement.setAttribute("aria-tabindex", "0"); + this.textElement.classList.add("spds__tabText"); + this.tabElement.appendChild(this.textElement); + } + connectedCallback() { + this.#createNewIconElement.classList.add("base__icon"); + this.#createNewIconElement.size = "small"; + this.#createNewIconElement.type = "plus"; + if (typeof this.selected === "undefined") { + // this.selected = false; + this.tabElement.setAttribute("aria-selected", "false"); + } + if (typeof this.type === "undefined") this.type = "tabWhite"; + this.setAttribute("role", "tablist"); + this.shadowRoot.appendChild(this.tabElement); + } + attributeChangedCallback(name: string, oldValue: string, newValue: string) { + if (oldValue === newValue) return; + switch (name) { + case "text": + this.text = newValue; + break; + case "selected": + this.selected = newValue === "true" || newValue === ""; + break; + case "disabled": + this.disabled = newValue === "true" || newValue === ""; + break; + case "type": + this.type = newValue as TabType; + break; + case "create-new-icon": + this.createNewIcon = newValue === "true" || newValue === ""; + break; + } + } + + #onSelectedAdd() { + this.tabElement.classList.add("-selected"); + this.tabElement.setAttribute("aria-selected", "true"); + } + #onSelectedRemove() { + this.tabElement.classList.remove("-selected"); + this.tabElement.setAttribute("aria-selected", "false"); + } + + #tabDisabledUpdate() { + this.tabElement.disabled = this.disabled; + } +} + +customElements.get("sp-tab") || customElements.define("sp-tab", SpTab); + +declare global { + interface HTMLElementTagNameMap { + "sp-tab": SpTab; + } +} diff --git a/src/components/tab/tab.css b/src/components/tab/tab.css new file mode 100644 index 0000000..67dbc55 --- /dev/null +++ b/src/components/tab/tab.css @@ -0,0 +1,160 @@ +:host { + --icon-color: var(--color-semantic-text-button-outline-default); + --padding-inline: 16px; + + display: inline-block; + min-width: 0; + max-width: 100%; +} + +.tabList{ + display: flex; + gap: 8px +} + +.spds__tab { + outline: none; + font: inherit; + background: none; + display: inline-flex; + min-width: 80px; + padding: 2px 16px; + justify-content: center; + align-items: center; + color: var(--color-semantic-text-body-regular); + font-size:14px; + border-radius: 14px; + min-height: 28px; + + &:hover{ + cursor:pointer; + } + + &:disabled{ + border: 1px solid var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + color: var(--color-semantic-text-disabled); + cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); + } + + &.-selected{ + border: 1px solid var(--color-semantic-border-selected); + background-color: var(--color-semantic-surface-selected); + color: var(--color-semantic-text-inverse); + + --icon-color: var(--color-semantic-text-button-selected); + + font-weight: bold; + + &:hover{ + border: 1px solid var(--color-semantic-surface-selected-hover); + background-color: var(--color-semantic-surface-selected-hover); + } + + &:disabled{ + border: 1px solid var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + + --icon-color: var(--color-semantic-text-disabled); + + color: var(--color-semantic-text-disabled); + cursor: not-allowed; + font-weight: normal; + } + } + + &.-gray{ + border: 1px solid var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + + &:hover{ + background-color: var(--color-semantic-surface-regular-4); + } + + &.-selected { + border: 1px solid var(--color-semantic-border-selected); + background-color: var(--color-semantic-surface-selected); + color: var(--color-semantic-text-inverse); + + &:hover { + border: 1px solid var(--color-semantic-surface-selected-hover); + background-color: var(--color-semantic-surface-selected-hover); + } + + &:disabled{ + border: 1px solid var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + color: var(--color-semantic-text-disabled); + cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); + } + &:disabled{ + border: 1px solid var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + color: var(--color-semantic-text-disabled); + cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); + } + } + &:disabled{ + border: 1px solid var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + color: var(--color-semantic-text-disabled); + cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); + } + } + + &.-white{ + border: 1px solid var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-1); + + &:hover{ + background-color: var(--color-semantic-surface-regular-3); + } + &.-selected { + border: 1px solid var(--color-semantic-border-selected); + background-color: var(--color-semantic-surface-selected); + color: var(--color-semantic-text-inverse); + &:hover { + border: 1px solid var(--color-semantic-surface-selected-hover); + background-color: var(--color-semantic-surface-selected-hover); + } + &:disabled{ + border: 1px solid var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + color: var(--color-semantic-text-disabled); + cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); + } + } + &:disabled{ + border: 1px solid var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + color: var(--color-semantic-text-disabled); + cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); + } + } + + &:focus-visible{ + outline: canvastext solid 3px; + box-shadow: canvas 0 0 0 5px; + outline-offset: 1px; + background-color: var(--color-semantic-surface-regular-4); + } +} + + + + + + + + + + + + + diff --git a/src/index.ts b/src/index.ts index 483aed7..5c52c9b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,3 +4,4 @@ export { SpCheckboxText } from "./components/checkbox/sp-checkbox-text"; export { SpCheckboxList } from "./components/checkbox/sp-checkbox-list"; export { SpIcon } from "./components/icon/sp-icon"; export { SpRadioButtonTextGroup } from "./components/radio/sp-radio-button-text-group"; +export { SpTab } from "./components/tab/sp-tab"; diff --git a/stories/tab/sp-tab.story.ts b/stories/tab/sp-tab.story.ts new file mode 100644 index 0000000..36da4e2 --- /dev/null +++ b/stories/tab/sp-tab.story.ts @@ -0,0 +1,164 @@ +import "../../src/components/tab/sp-tab"; +import type { Meta, StoryObj } from "@storybook/web-components"; +import "@sp-design/token/lib/speeda-tokens.css"; +import { action } from "@storybook/addon-actions"; +import { html } from "lit"; + +const meta: Meta = { + component: "sp-tab", + argTypes: { + text: { type: "string" }, + type: { + control: { type: "select" }, + options: ["tabWhite", "tabGray"], + }, + createNewIcon: { type: "boolean" }, + selected: { type: "boolean" }, + disabled: { type: "boolean" }, + onclick: { + action: "onclick", + }, + }, + args: { + text: "sp-tab", + type: "tabGray", + createNewIcon: false, + selected: false, + disabled: false, + onclick: action("onclick"), + }, +}; +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: { + type: undefined, + createNewIcon: undefined, + selected: undefined, + disabled: undefined, + }, +}; +export const typeGray: Story = { + args: { + type: "tabGray", + createNewIcon: undefined, + selected: undefined, + disabled: undefined, + }, +}; +export const typeWhite: Story = { + args: { + type: "tabWhite", + createNewIcon: undefined, + selected: undefined, + disabled: undefined, + }, +}; +export const createNewIcon: Story = { + args: { + type: undefined, + createNewIcon: true, + selected: undefined, + disabled: undefined, + }, +}; + +export const list: Story = { + render: (args) => + html`
+ + + +
`, +}; + +export const All: Story = { + render: (args) => html` +
+
+

type:Gray

+
+ +
+
+
+

type:White

+
+ +
+
+
+

Create New Icon

+
+ +
+
+
+

List

+
+
+ + + +
+
+
+
+ `, +}; From 89dbf83d569c659a42bedc7d480000256a5a61fd Mon Sep 17 00:00:00 2001 From: "hazuki.okuda" Date: Wed, 30 Oct 2024 15:00:49 +0900 Subject: [PATCH 15/30] =?UTF-8?q?=20currentcolor=E3=82=92=E9=81=A9?= =?UTF-8?q?=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/components/button/button.css | 12 ------------ src/components/icon/icon.css | 4 ++-- src/components/tab/tab.css | 24 +++++------------------- 3 files changed, 7 insertions(+), 33 deletions(-) diff --git a/dist/components/button/button.css b/dist/components/button/button.css index 3f1cc87..cf5f7b1 100644 --- a/dist/components/button/button.css +++ b/dist/components/button/button.css @@ -1,5 +1,4 @@ :host { - --icon-color: var(--color-semantic-text-button-outline-default); --padding-inline: 16px; display: inline-block; @@ -37,21 +36,18 @@ } .type__default.appearance__outline:hover:not(:disabled) { - --icon-color: var(--color-semantic-text-button-outline-hover); border-color: var(--color-semantic-border-button-outline-hover); color: var(--color-semantic-text-button-outline-hover); } .type__default.appearance__outline:focus-visible:not(:is(:disabled, .isSelected)) { - --icon-color: var(--color-semantic-text-button-outline-focus); border-color: var(--color-semantic-border-button-outline-focus); color: var(--color-semantic-text-button-outline-focus); } .type__default.appearance__fill { - --icon-color: var(--color-semantic-text-button-fill-default); border-color: var(--color-semantic-border-button-fill-default); background-color: var(--color-semantic-surface-button-fill-default); @@ -84,7 +80,6 @@ } .type__default.isSelected { - --icon-color: var(--color-semantic-text-button-selected); border-color: var(--color-semantic-border-button-selected); background-color: var(--color-semantic-surface-button-selected); @@ -92,7 +87,6 @@ } .type__default.isSelected:hover:not(:disabled) { - --icon-color: var(--color-semantic-text-button-selected); border-color: var(--color-semantic-border-button-selected-hover); background-color: var(--color-semantic-surface-button-selected-hover); @@ -100,28 +94,24 @@ } .type__destructive.appearance__outline { - --icon-color: var(--color-semantic-text-button-outline-destructive-default); border-color: var(--color-semantic-border-button-outline-destructive-default); color: var(--color-semantic-text-button-outline-destructive-default); } .type__destructive.appearance__outline:hover:not(:disabled) { - --icon-color: var(--color-semantic-text-button-outline-destructive-hover); border-color: var(--color-semantic-border-button-outline-destructive-hover); color: var(--color-semantic-text-button-outline-destructive-hover); } .type__destructive.appearance__outline:focus-visible:not(:disabled) { - --icon-color: var(--color-semantic-text-button-outline-destructive-focus); border-color: var(--color-semantic-border-button-outline-destructive-focus); color: var(--color-semantic-text-button-outline-destructive-focus); } .type__destructive.appearance__fill { - --icon-color: var(--color-semantic-text-button-fill-destructive-default); border-color: var(--color-semantic-border-button-fill-destructive-default); background-color: var( @@ -141,7 +131,6 @@ } .type__destructive.appearance__text { - --icon-color: var(--color-semantic-text-button-text-destructive-default); border-color: transparent; background-color: transparent; @@ -160,7 +149,6 @@ /* disabledとisLoadingにおいては、上記の詳細度と同等とするために:isを不可している */ :is(.type__default, .type__destructive):disabled { - --icon-color: var(--color-semantic-text-button-disabled); border-color: var(--color-semantic-border-button-disabled); background-color: var(--color-semantic-surface-button-disabled); diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css index a4533d5..3da83df 100644 --- a/src/components/icon/icon.css +++ b/src/components/icon/icon.css @@ -8,7 +8,7 @@ .icon { display: inline-block; - fill: var(--icon-color, var(--color-primitive-neutral-100)); + fill: currentcolor; } .size__small { @@ -19,4 +19,4 @@ .size__medium { width: 24px; height: 24px; -} \ No newline at end of file +} diff --git a/src/components/tab/tab.css b/src/components/tab/tab.css index 67dbc55..1002cd9 100644 --- a/src/components/tab/tab.css +++ b/src/components/tab/tab.css @@ -1,5 +1,4 @@ :host { - --icon-color: var(--color-semantic-text-button-outline-default); --padding-inline: 16px; display: inline-block; @@ -35,16 +34,12 @@ background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); } &.-selected{ border: 1px solid var(--color-semantic-border-selected); background-color: var(--color-semantic-surface-selected); color: var(--color-semantic-text-inverse); - - --icon-color: var(--color-semantic-text-button-selected); - font-weight: bold; &:hover{ @@ -55,9 +50,6 @@ &:disabled{ border: 1px solid var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); - - --icon-color: var(--color-semantic-text-disabled); - color: var(--color-semantic-text-disabled); cursor: not-allowed; font-weight: normal; @@ -87,22 +79,14 @@ background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); - } - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); } } + &:disabled{ border: 1px solid var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); } } @@ -113,28 +97,30 @@ &:hover{ background-color: var(--color-semantic-surface-regular-3); } + &.-selected { border: 1px solid var(--color-semantic-border-selected); background-color: var(--color-semantic-surface-selected); color: var(--color-semantic-text-inverse); + &:hover { border: 1px solid var(--color-semantic-surface-selected-hover); background-color: var(--color-semantic-surface-selected-hover); } + &:disabled{ border: 1px solid var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); } } + &:disabled{ border: 1px solid var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); } } From b7b9bfb4337d5b15db14bd80e4905fb48249e1f0 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Wed, 30 Oct 2024 22:58:44 +0900 Subject: [PATCH 16/30] =?UTF-8?q?dt=E3=81=ABhtml=E3=82=92=E6=B8=A1?= =?UTF-8?q?=E3=81=9B=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/definitionList/sp-definition-list-dt.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/definitionList/sp-definition-list-dt.ts b/src/components/definitionList/sp-definition-list-dt.ts index edf394e..7c0a005 100644 --- a/src/components/definitionList/sp-definition-list-dt.ts +++ b/src/components/definitionList/sp-definition-list-dt.ts @@ -17,14 +17,14 @@ export class SpDefinitionListDt extends HTMLElement { super(); this.attachShadow({ mode: "open" }); } - + connectedCallback() { this.shadowRoot.adoptedStyleSheets = [ ...this.shadowRoot.adoptedStyleSheets, styles, ]; this.#dtElement.classList.add("base"); - this.#dtElement.textContent = this.textContent; + this.#dtElement.innerHTML = this.innerHTML; this.shadowRoot.appendChild(this.#dtElement); } } From 41d56611ea34808dd2321fb2712d15ae52da2a66 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Wed, 30 Oct 2024 23:06:49 +0900 Subject: [PATCH 17/30] =?UTF-8?q?=E6=94=B9=E8=A1=8C=E3=81=AEStory=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sp-definition-list.story.ts | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/stories/definitionList/sp-definition-list.story.ts b/stories/definitionList/sp-definition-list.story.ts index f52b52b..62dbb70 100644 --- a/stories/definitionList/sp-definition-list.story.ts +++ b/stories/definitionList/sp-definition-list.story.ts @@ -5,22 +5,19 @@ import type { Meta, StoryObj } from "@storybook/web-components"; import "@sp-design/token/lib/speeda-tokens.css"; import { html } from "lit"; -const DefinitionList = (termText: string, definitionText: string) => html` - - ${termText} - ${definitionText} - ${termText} - ${definitionText} - -`; - const meta: Meta = { args: { termText: "Term", definitionText: "Definition", }, - render: ({ termText, definitionText }) => - DefinitionList(termText, definitionText), + render: ({ termText, definitionText }) => html` + + ${termText} + ${definitionText} + ${termText} + ${definitionText} + + `, }; export default meta; @@ -35,3 +32,9 @@ export const OverflowWrap: Story = { "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", }, }; + +export const Break: Story = { + args: { + definitionText: html`break
break`, + }, +}; From 8e7fd14209e1f801e644c22ba6df35da756d9ff8 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Mon, 4 Nov 2024 22:06:07 +0900 Subject: [PATCH 18/30] =?UTF-8?q?slot=E3=82=92=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/definitionList/sp-definition-list.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/definitionList/sp-definition-list.ts b/src/components/definitionList/sp-definition-list.ts index 357e7be..93f5d96 100644 --- a/src/components/definitionList/sp-definition-list.ts +++ b/src/components/definitionList/sp-definition-list.ts @@ -10,6 +10,7 @@ styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListStyle}`); export class SpDefinitionList extends HTMLElement { #dlElement = document.createElement("dl"); + #slotElement = document.createElement("slot"); constructor() { super(); @@ -22,9 +23,7 @@ export class SpDefinitionList extends HTMLElement { styles, ]; this.#dlElement.classList.add("base"); - while (this.firstChild) { - this.#dlElement.appendChild(this.firstChild); - } + this.#dlElement.appendChild(this.#slotElement); this.shadowRoot.appendChild(this.#dlElement); } } From eb3f80bb235d013e7a44ffde6c652da9ec37c2e4 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Mon, 4 Nov 2024 22:17:37 +0900 Subject: [PATCH 19/30] =?UTF-8?q?html=E6=A7=8B=E9=80=A0=E3=81=8C=E8=A6=8B?= =?UTF-8?q?=E3=82=84=E3=81=99=E3=81=84=E3=82=88=E3=81=86=E3=81=AB=E3=81=97?= =?UTF-8?q?=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/definitionList/sp-definition-list.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/definitionList/sp-definition-list.ts b/src/components/definitionList/sp-definition-list.ts index 93f5d96..b45b239 100644 --- a/src/components/definitionList/sp-definition-list.ts +++ b/src/components/definitionList/sp-definition-list.ts @@ -9,9 +9,6 @@ const styles = new CSSStyleSheet(); styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListStyle}`); export class SpDefinitionList extends HTMLElement { - #dlElement = document.createElement("dl"); - #slotElement = document.createElement("slot"); - constructor() { super(); this.attachShadow({ mode: "open" }); @@ -22,9 +19,11 @@ export class SpDefinitionList extends HTMLElement { ...this.shadowRoot.adoptedStyleSheets, styles, ]; - this.#dlElement.classList.add("base"); - this.#dlElement.appendChild(this.#slotElement); - this.shadowRoot.appendChild(this.#dlElement); + this.shadowRoot.innerHTML = ` +
+ +
+ `; } } From f30dd3051d36df4cac26b75313fdffa608d3cc28 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Mon, 4 Nov 2024 22:31:50 +0900 Subject: [PATCH 20/30] =?UTF-8?q?Revert=20"html=E6=A7=8B=E9=80=A0=E3=81=8C?= =?UTF-8?q?=E8=A6=8B=E3=82=84=E3=81=99=E3=81=84=E3=82=88=E3=81=86=E3=81=AB?= =?UTF-8?q?=E3=81=97=E3=81=9F"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit eb3f80bb235d013e7a44ffde6c652da9ec37c2e4. --- src/components/definitionList/sp-definition-list.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/definitionList/sp-definition-list.ts b/src/components/definitionList/sp-definition-list.ts index b45b239..93f5d96 100644 --- a/src/components/definitionList/sp-definition-list.ts +++ b/src/components/definitionList/sp-definition-list.ts @@ -9,6 +9,9 @@ const styles = new CSSStyleSheet(); styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListStyle}`); export class SpDefinitionList extends HTMLElement { + #dlElement = document.createElement("dl"); + #slotElement = document.createElement("slot"); + constructor() { super(); this.attachShadow({ mode: "open" }); @@ -19,11 +22,9 @@ export class SpDefinitionList extends HTMLElement { ...this.shadowRoot.adoptedStyleSheets, styles, ]; - this.shadowRoot.innerHTML = ` -
- -
- `; + this.#dlElement.classList.add("base"); + this.#dlElement.appendChild(this.#slotElement); + this.shadowRoot.appendChild(this.#dlElement); } } From a287d95aa00ac7ab499a414f4f39692eccfe236d Mon Sep 17 00:00:00 2001 From: oki07 Date: Thu, 7 Nov 2024 20:54:59 +0900 Subject: [PATCH 21/30] =?UTF-8?q?sp-design-token=E3=81=AE=E3=83=90?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=83=A7=E3=83=B3=E3=82=928.0.0=E3=81=AB?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/components/button/button.css | 229 ------------------ dist/components/button/sp-button.d.ts.map | 1 - dist/components/checkbox/checkbox-list.css | 46 ---- dist/components/checkbox/checkbox-text.css | 44 ---- dist/components/checkbox/checkbox.css | 17 -- dist/components/checkbox/checkmark.css | 51 ---- .../checkbox/sp-checkbox-list.d.ts.map | 1 - .../checkbox/sp-checkbox-text.d.ts.map | 1 - dist/components/checkbox/sp-checkbox.d.ts.map | 1 - dist/components/foundation.css | 7 - dist/components/icon/icon.css | 22 -- dist/components/icon/icons.d.ts | 55 ----- dist/components/icon/icons.d.ts.map | 1 - dist/components/icon/sp-icon.d.ts.map | 1 - dist/components/icon/sp-icon.js | 17 -- .../radio/radio-button-text-group.css | 111 --------- .../radio/sp-radio-button-text-group.d.ts.map | 1 - .../segmentedControl/segmented-control.css | 89 ------- .../sp-segmented-control.d.ts.map | 1 - dist/index.d.ts.map | 1 - .../components/button/sp-button.d.ts | 5 +- dist/src/components/button/sp-button.d.ts.map | 1 + dist/{ => src}/components/button/sp-button.js | 10 +- .../components/checkbox/sp-checkbox-list.d.ts | 0 .../checkbox/sp-checkbox-list.d.ts.map | 1 + .../components/checkbox/sp-checkbox-list.js | 10 +- .../components/checkbox/sp-checkbox-text.d.ts | 0 .../checkbox/sp-checkbox-text.d.ts.map | 1 + .../components/checkbox/sp-checkbox-text.js | 10 +- .../components/checkbox/sp-checkbox.d.ts | 0 .../components/checkbox/sp-checkbox.d.ts.map | 1 + .../components/checkbox/sp-checkbox.js | 10 +- dist/src/components/icon/icons.d.ts | 6 + dist/src/components/icon/icons.d.ts.map | 1 + dist/{ => src}/components/icon/icons.js | 0 dist/{ => src}/components/icon/sp-icon.d.ts | 3 + dist/src/components/icon/sp-icon.d.ts.map | 1 + dist/src/components/icon/sp-icon.js | 34 +++ .../radio/sp-radio-button-text-group.d.ts | 0 .../radio/sp-radio-button-text-group.d.ts.map | 1 + .../radio/sp-radio-button-text-group.js | 10 +- .../sp-segmented-control.d.ts | 0 .../sp-segmented-control.d.ts.map | 1 + .../segmentedControl/sp-segmented-control.js | 10 +- dist/src/components/tab/sp-tab.d.ts | 26 ++ dist/src/components/tab/sp-tab.d.ts.map | 1 + dist/src/components/tab/sp-tab.js | 133 ++++++++++ dist/{ => src}/index.d.ts | 1 + dist/src/index.d.ts.map | 1 + dist/{ => src}/index.js | 1 + dist/vitest.config.d.ts | 3 + dist/vitest.config.d.ts.map | 1 + dist/vitest.config.js | 6 + package-lock.json | 10 +- package.json | 2 +- src/components/checkbox/checkbox-list.css | 4 +- src/components/checkbox/checkbox-text.css | 4 +- src/components/checkbox/checkbox.css | 2 +- .../radio/radio-button-text-group.css | 2 +- .../segmentedControl/segmented-control.css | 2 +- src/components/tab/tab.css | 2 +- 61 files changed, 276 insertions(+), 738 deletions(-) delete mode 100644 dist/components/button/button.css delete mode 100644 dist/components/button/sp-button.d.ts.map delete mode 100644 dist/components/checkbox/checkbox-list.css delete mode 100644 dist/components/checkbox/checkbox-text.css delete mode 100644 dist/components/checkbox/checkbox.css delete mode 100644 dist/components/checkbox/checkmark.css delete mode 100644 dist/components/checkbox/sp-checkbox-list.d.ts.map delete mode 100644 dist/components/checkbox/sp-checkbox-text.d.ts.map delete mode 100644 dist/components/checkbox/sp-checkbox.d.ts.map delete mode 100644 dist/components/foundation.css delete mode 100644 dist/components/icon/icon.css delete mode 100644 dist/components/icon/icons.d.ts delete mode 100644 dist/components/icon/icons.d.ts.map delete mode 100644 dist/components/icon/sp-icon.d.ts.map delete mode 100644 dist/components/icon/sp-icon.js delete mode 100644 dist/components/radio/radio-button-text-group.css delete mode 100644 dist/components/radio/sp-radio-button-text-group.d.ts.map delete mode 100644 dist/components/segmentedControl/segmented-control.css delete mode 100644 dist/components/segmentedControl/sp-segmented-control.d.ts.map delete mode 100644 dist/index.d.ts.map rename dist/{ => src}/components/button/sp-button.d.ts (76%) create mode 100644 dist/src/components/button/sp-button.d.ts.map rename dist/{ => src}/components/button/sp-button.js (95%) rename dist/{ => src}/components/checkbox/sp-checkbox-list.d.ts (100%) create mode 100644 dist/src/components/checkbox/sp-checkbox-list.d.ts.map rename dist/{ => src}/components/checkbox/sp-checkbox-list.js (78%) rename dist/{ => src}/components/checkbox/sp-checkbox-text.d.ts (100%) create mode 100644 dist/src/components/checkbox/sp-checkbox-text.d.ts.map rename dist/{ => src}/components/checkbox/sp-checkbox-text.js (78%) rename dist/{ => src}/components/checkbox/sp-checkbox.d.ts (100%) create mode 100644 dist/src/components/checkbox/sp-checkbox.d.ts.map rename dist/{ => src}/components/checkbox/sp-checkbox.js (77%) create mode 100644 dist/src/components/icon/icons.d.ts create mode 100644 dist/src/components/icon/icons.d.ts.map rename dist/{ => src}/components/icon/icons.js (100%) rename dist/{ => src}/components/icon/sp-icon.d.ts (92%) create mode 100644 dist/src/components/icon/sp-icon.d.ts.map create mode 100644 dist/src/components/icon/sp-icon.js rename dist/{ => src}/components/radio/sp-radio-button-text-group.d.ts (100%) create mode 100644 dist/src/components/radio/sp-radio-button-text-group.d.ts.map rename dist/{ => src}/components/radio/sp-radio-button-text-group.js (77%) rename dist/{ => src}/components/segmentedControl/sp-segmented-control.d.ts (100%) create mode 100644 dist/src/components/segmentedControl/sp-segmented-control.d.ts.map rename dist/{ => src}/components/segmentedControl/sp-segmented-control.js (76%) create mode 100644 dist/src/components/tab/sp-tab.d.ts create mode 100644 dist/src/components/tab/sp-tab.d.ts.map create mode 100644 dist/src/components/tab/sp-tab.js rename dist/{ => src}/index.d.ts (90%) create mode 100644 dist/src/index.d.ts.map rename dist/{ => src}/index.js (89%) create mode 100644 dist/vitest.config.d.ts create mode 100644 dist/vitest.config.d.ts.map create mode 100644 dist/vitest.config.js diff --git a/dist/components/button/button.css b/dist/components/button/button.css deleted file mode 100644 index cf5f7b1..0000000 --- a/dist/components/button/button.css +++ /dev/null @@ -1,229 +0,0 @@ -:host { - --padding-inline: 16px; - - display: inline-block; - min-width: 0; - max-width: 100%; -} - -.base { - display: inline-flex; - align-items: center; - justify-content: center; - column-gap: 4px; - color: var(--color-semantic-text-button-outline-default); - border-radius: 5px; - border: 1px solid transparent; - background-color: transparent; - min-height: 28px; - max-width: calc(100% - var(--padding-inline)*2); - padding-inline: var(--padding-inline); - position: relative; - overflow: hidden; - cursor: pointer; -} - -.base__text { - min-width: 0; - font-size: 10px; - font-weight: bold; - line-height: 1; - overflow-wrap : break-word; -} - -.type__default.appearance__outline { - border-color: var(--color-semantic-border-button-outline-default); -} - -.type__default.appearance__outline:hover:not(:disabled) { - - border-color: var(--color-semantic-border-button-outline-hover); - color: var(--color-semantic-text-button-outline-hover); -} - -.type__default.appearance__outline:focus-visible:not(:is(:disabled, .isSelected)) { - - border-color: var(--color-semantic-border-button-outline-focus); - color: var(--color-semantic-text-button-outline-focus); -} - -.type__default.appearance__fill { - - border-color: var(--color-semantic-border-button-fill-default); - background-color: var(--color-semantic-surface-button-fill-default); - color: var(--color-semantic-text-button-fill-default); -} - -.type__default.appearance__fill:hover:not(:disabled) { - border-color: var(--color-semantic-border-button-fill-hover); - background-color: var(--color-semantic-surface-button-fill-hover); -} - -.type__default.appearance__fill:focus-visible:not(:is(:disabled, .isSelected)) { - border-color: var(--color-semantic-border-button-fill-focus); - background-color: var(--color-semantic-surface-button-fill-focus); -} - -.type__default.appearance__text { - border-color: var(--color-semantic-border-button-text-default); - background-color: var(--color-semantic-surface-button-text-default); -} - -.type__default.appearance__text:hover:not(:disabled) { - border-color: var(--color-semantic-border-button-text-hover); - background-color: var(--color-semantic-surface-button-text-hover); -} - -.type__default.appearance__text:focus-visible:not(:is(:disabled, .isSelected)) { - border-color: var(--color-semantic-border-button-text-focus); - background-color: var(--color-semantic-surface-button-text-focus); -} - -.type__default.isSelected { - - border-color: var(--color-semantic-border-button-selected); - background-color: var(--color-semantic-surface-button-selected); - color: var(--color-semantic-text-button-selected); -} - -.type__default.isSelected:hover:not(:disabled) { - - border-color: var(--color-semantic-border-button-selected-hover); - background-color: var(--color-semantic-surface-button-selected-hover); - color: var(--color-semantic-text-button-selected); -} - -.type__destructive.appearance__outline { - - border-color: var(--color-semantic-border-button-outline-destructive-default); - color: var(--color-semantic-text-button-outline-destructive-default); -} - -.type__destructive.appearance__outline:hover:not(:disabled) { - - border-color: var(--color-semantic-border-button-outline-destructive-hover); - color: var(--color-semantic-text-button-outline-destructive-hover); -} - -.type__destructive.appearance__outline:focus-visible:not(:disabled) { - - border-color: var(--color-semantic-border-button-outline-destructive-focus); - color: var(--color-semantic-text-button-outline-destructive-focus); -} - -.type__destructive.appearance__fill { - - border-color: var(--color-semantic-border-button-fill-destructive-default); - background-color: var( - --color-semantic-surface-button-fill-destructive-default - ); - color: var(--color-semantic-text-button-fill-destructive-default); -} - -.type__destructive.appearance__fill:hover:not(:disabled) { - border-color: var(--color-semantic-border-button-fill-destructive-hover); - background-color: var(--color-semantic-surface-button-fill-destructive-hover); -} - -.type__destructive.appearance__fill:focus-visible:not(:disabled) { - border-color: var(--color-semantic-border-button-fill-destructive-focus); - background-color: var(--color-semantic-surface-button-fill-destructive-focus); -} - -.type__destructive.appearance__text { - - border-color: transparent; - background-color: transparent; - color: var(--color-semantic-text-button-text-destructive-default); -} - -.type__destructive.appearance__text:hover:not(:disabled) { - border-color: var(--color-semantic-border-button-text-destructive-hover); - background-color: var(--color-semantic-surface-button-text-destructive-hover); -} - -.type__destructive.appearance__text:focus-visible:not(:disabled) { - border-color: var(--color-semantic-border-button-text-destructive-focus); - background-color: var(--color-semantic-surface-button-text-destructive-focus); -} - -/* disabledとisLoadingにおいては、上記の詳細度と同等とするために:isを不可している */ -:is(.type__default, .type__destructive):disabled { - - border-color: var(--color-semantic-border-button-disabled); - background-color: var(--color-semantic-surface-button-disabled); - color: var(--color-semantic-text-button-disabled); - cursor: not-allowed; -} - -:is(.type__default, .type__destructive).isLoading { - border-color: var(--color-semantic-border-button-loading); - background-color: var(--color-semantic-surface-button-loading); -} - -:is(.type__default, .type__destructive).isLoading::before { - content: ""; - display: block; - background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAALEsAACxLAaU9lqkAAAMAUExURUdwTP///8jIyLi4uLGxsUdHR9LS0vHx8by8vKSkpNnZ2b6+vpSUlLe3t+Dg4N/f37Ozs/X19W5ubvj4+CMjI8/Pz+/v78bGxqampp+fnzIyMufn59HR0a+vr+Xl5dbW1tbW1sHBwezs7MLCwvDw8JCQkJubm6mpqZiYmO7u7rW1tdvb29/f32VlZfb29szMzPDw8Ovr65OTk/Dw8KGhoZ2dnYeHh/Ly8tfX19TU1Nzc3Pr6+qmpqcrKysnJyYqKioyMjIODg5KSkpeXl1tbW+bm5uvr66ysrL+/v46Ojvz8/CMjI8TExMjIyIODg4GBgYaGhisrK4+Pj6CgoDw8PM/Pz6enp+Li4hsbG0xMTK2trYmJiYSEhICAgI6OjoiIiJqamq+vrykpKa2trVRUVNPT04ODg2FhYcPDwxkZGVpaWlhYWCkpKTExMSYmJp2dnY2NjSUlJSMjIzs7O0xMTJubm3l5eb+/v6urqyMjI0RERCgoKKenp3Jycqmpqa6urnh4eG1tbUxMTHFxcWhoaMzMzEBAQEBAQLe3t1ZWVpiYmEpKSqqqqm1tbXR0dJWVlWVlZSEhIWFhYSMjI5iYmJCQkKysrIuLi4CAgGtrazk5OWtra3x8fHl5eVBQUFFRURwcHLm5uYWFhS8vL2ZmZlVVVVFRUaampszMzDg4OHd3dzU1NUZGRtfX13V1dYqKisnJyXh4eLm5uXJyckVFRZeXl3Jycp+fnzs7OzIyMh4eHkhISERERIODg8TExCkpKTY2NoqKioyMjJ2dnYiIiIWFhWNjY09baWKUV+SEe0xGWUVXdUpKSkRERFdXV3V1dU5OTkBAQFlZWWlpaXFxcWtrayEhIUxMTGVlZW1tbT4+Ph4eHi0tLS8vL3h4eGFhYV5eXisrK3p6ehoaGjc3NzU1NTMzMyYmJnx8fH5+flJSUlBQUDw8PEJCQjo6OmNjY3Nzc1xcXCkpKR8fHzk5ORwcHDExMVRUVCQkJGBgYCgoKGdnZ29vb1VVVXt7e1paWtg57TgAAADLdFJOUwABB4yc/lkEhrdLgdaQOUCYBx8JEGETcbLBIC9doTRUUX0lehzdyK7OIZVHPBAQZh4oDRm8xfEWTi1EC6pqaOrm+trR7zErpnTfDf52bvf+9G9tpN8ZFTf+EKXt9v7i7cpjjzw/IEtwEf6AUO/ffxjk/t+g4LavR2vvr0BSL5aNv19w399hf19rv1ofJN+AyN9Qj8Bz0KjoD5+Pj+BwzqDPLJfP7u+QQk1g7zBQJmA7PUA+nzBAYDBf7p+/wNhfUN+urauFxs/+0H/4BcBv2gAABJ1JREFUWMPtlWdck1cUxjESA0gihIjILkUNIywpDWAFSwpFbCvTCgqCQilQqXuvKo66V7F7t3bvvecnQIMiiBiCoCEGVAgyxGrPue9LBmRcPrcPP76c+3v+9znn3vvGxuZ/mZVoQ+r3ry1vfXIMz9nZhcMbrfvw0XVarfbm462tAIidHeJ6f4jLKOxL1/WnpJzTai8AYQgw3d/flUdpL1OplvWfMwS4IiAgwI8G8cvy7m4EIOHCTZyBCwDAHxbgFx7uF2Jt+4KWlm4gLIMWdADswB8DhCd6ePhbDOH+ZlNTExBuqVRsglYWMB0DJCZ6POTtwbHgf+riRQAAQdWPPZAZOAOA7QD98wTeHPP+3l4CaIEppPQfLTjsLrKxGQMZQmCEjN9bIAie52zOf+VKLxvhVtlSkeEaLzaMAQiCgydMEJjMIPr1MgAYQlnqyPXZfqQB8McECUxN8oW2y0AgGQpEpnbghLH+mCCH6JHL7/W0tSECMqSaG1Ims3+Qg4M0c8QAMnp6ekiG7zaYP6bYYOKXSn2lw5vY2XHtGhAA8YGli1Icg9v7+vr4DGvCvQMAhJBq+aoW4vbgH+drfBIrGjsYxAprbyWa2EHGETIaQYDIcLcG4EnR7unpOc4wwi65vJEgvrX+XD8i9okVEwsNius7O+WgxgyaD4YPsYeGnjSocTtRcvkuGkB0BdpDZ1boe1hSXV1NEHtpABx0PwDSX6ZnuNWozh/pvpknwfwISH8O67lcgthJB/gUzJNAa3SVH7iMPqQDFE4imvOzrrKyCtzw/yUdoHgOo5m6ShWr+XQAzr2sDAD18FdVT/vLcw8rXaGeFS1gPCtd4TQr2hbsUOPt9ICV6Nac1uylA2TaMXpYV3lFA7qq0ZTSAV4fS2S3W1d59SpR3zt0gDV8Ph8J+fqrjO6+f/r20AF2BwYGAoP/uf4x9YEdRTXFYienQBR/n640/21019TUltAAFtva2joBZKxBbU8NqrZWRgPY4mWLclprUCsl9rt3u56gCJCU7eWFjMUGRYkM3ODvkkms+bM2zyAEry1G5RJ0dymVyiPWAGunTZvxXFJ2tle+UVkiI/aBgWYrTWx0cwMCIJKyjBdKutA+0Nx8fYkl/z57e3sGsXHYikSmJPbrDW9tMu//ZlUkS9icNXytVMn4GxoGzXbx7H2TJ0dGIsHt3ZGrR4b8Z+qeF5qyRxxbNBUJkME+38S65G/Wf6aubv82E9sfTBBPBUIkZEiPMLWD8NCQ//zt29u/NkpxIu24o2OCGCJghvQs0y0KDw0ODqIfAGdvnNp6oGgT3KsTwqI/f4vPnfIgQ4AM6eXmhiTcwQQ4D/4bpxSKS+3t6sdmLYjKi4vPTQZCghgz/FFu/piEO5gGzkIABNxRqxfOWjA3J67y6WQmgnhRermliyJ5kW2ABbQvxARROZXQA0ZIEB+LsHLXt+1nAQqF4g60gAmi8iqZHhxXfWX9uQoPYAdkBJfa1SwgLh56mHIwLYLqmyf8YvtQB2oY4qNzo2AI8bnHKe1EH69+3xCQl5P8e9Eo7ESfvbx660sI+OmvN9I+Ga37P6V/ARSAhtS32QauAAAAAElFTkSuQmCC") no-repeat 50% 50%; - background-size: 16px 16px; - animation: 1s linear infinite loading; - transform-origin: center center; - width: 100%; - height: 100%; - z-index: 2; - position: absolute; - left: 0; - top: 0; - border-radius: 5px; -} - -@keyframes loading { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -:is(.type__default, .type__destructive).isLoading:hover { - cursor: not-allowed; - border-color: var(--color-semantic-border-button-loading); -} - -:is(.type__default, .type__destructive).isLoading .base__text { - visibility: hidden; -} - -:is(.type__default, .type__destructive).isLoading .base__icon { - visibility: hidden; -} - -.type__default.size__large { - --padding-inline: 24px; - - column-gap: 8px; - min-height: 32px; - font-size: 12px; -} - -.type__default.size__xLarge { - --padding-inline: 40px; - - column-gap: 8px; - min-height: 40px; - font-size: 12px; -} - -.size__width80 { - --padding-inline: 4px; - - width: 80px; -} - -.size__width160 { - --padding-inline: 4px; - - width: 160px; -} diff --git a/dist/components/button/sp-button.d.ts.map b/dist/components/button/sp-button.d.ts.map deleted file mode 100644 index c302531..0000000 --- a/dist/components/button/sp-button.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/sp-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAKjE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAMhD,qBAAa,QAAS,SAAQ,QAAQ;;IAIpC,IAAI,IAAI,IAGM,eAAe,GAAG,EAAE,CADjC;IACD,IAAI,IAAI,CAAC,GAAG,EAAE,eAAe,GAAG,EAAE,EAUjC;IAED,MAAM,KAAK,kBAAkB,aAE5B;;IAYD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CAqB1E;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"} \ No newline at end of file diff --git a/dist/components/checkbox/checkbox-list.css b/dist/components/checkbox/checkbox-list.css deleted file mode 100644 index ad24b20..0000000 --- a/dist/components/checkbox/checkbox-list.css +++ /dev/null @@ -1,46 +0,0 @@ -:host { - display: block; - min-width: 0; -} - -.base { - display: flex; - align-items: flex-start; - justify-content: flex-start; - padding-block: 1px; - cursor: pointer; -} - -.base:has(input:disabled) { - cursor: not-allowed; -} - -.base:has(.input:focus-visible) { - outline: 2px solid var(--color-semantic-text-body-regular); - outline-offset: 2px; -} - -.base:has(input):not(:has(input:disabled)):hover { - background: var(--color-semantic-surface-regular-3); -} - -.base:has(input:checked):not(:has(input:disabled)) { - background: var(--color-semantic-surface-checked); -} - -.base:has(input:checked):not(:has(input:disabled)):hover { - background: var(--color-semantic-surface-checked-hover); -} - -.text { - min-width: 0; - padding-block-start: 2.5px; - color: var(--color-semantic-text-body-regular); - font-size: 12px; - line-height: 1.6; - overflow-wrap : break-word; -} - -.base:has(input:disabled) .text { - color: var(--color-semantic-text-disabled); -} diff --git a/dist/components/checkbox/checkbox-text.css b/dist/components/checkbox/checkbox-text.css deleted file mode 100644 index 5ee3025..0000000 --- a/dist/components/checkbox/checkbox-text.css +++ /dev/null @@ -1,44 +0,0 @@ -:host { - display: inline-block; - min-width: 0; - max-width: 100%; -} - -.base { - display: inline-flex; - align-items: flex-start; - justify-content: flex-start; - max-width: 100%; - cursor: pointer; -} - -.base:has(.input:focus-visible) { - outline: 2px solid var(--color-semantic-text-body-regular); - outline-offset: 2px; -} - -.base:has(.input:disabled) { - cursor: not-allowed; -} - -.text { - min-width: 0; - padding-block-start: 2.5px; - color: var(--color-semantic-text-body-regular); - font-size: 12px; - line-height: 1.6; - overflow-wrap: break-word; -} - -.base:has(.input:disabled) .text { - color: var(--color-semantic-text-disabled); -} - -.base:hover .checkmark:has(:not(.input:disabled))::before { - background-color: var(--color-semantic-surface-regular-3); -} - -.base:hover .checkmark:has(:is(.input:checked, .input:indeterminate)):has(:not(.input:disabled))::before{ - background-color: var(--color-semantic-surface-selected-hover); - border-color: var(--color-semantic-border-selected-hover); -} \ No newline at end of file diff --git a/dist/components/checkbox/checkbox.css b/dist/components/checkbox/checkbox.css deleted file mode 100644 index 230c59b..0000000 --- a/dist/components/checkbox/checkbox.css +++ /dev/null @@ -1,17 +0,0 @@ -:host { - display: inline-block; -} - -.base:has(.input:focus-visible) { - outline: 2px solid var(--color-semantic-text-body-regular); - outline-offset: 2px; -} - -.base:hover .checkmark:has(:not(.input:disabled))::before { - background-color: var(--color-semantic-surface-regular-3); -} - -.base:hover .checkmark:has(:is(.input:checked, .input:indeterminate)):has(:not(.input:disabled))::before{ - background-color: var(--color-semantic-surface-selected-hover); - border-color: var(--color-semantic-border-selected-hover); -} diff --git a/dist/components/checkbox/checkmark.css b/dist/components/checkbox/checkmark.css deleted file mode 100644 index 760e831..0000000 --- a/dist/components/checkbox/checkmark.css +++ /dev/null @@ -1,51 +0,0 @@ -.checkmark { - flex-grow: 0; - flex-shrink: 0; - display: inline-flex; - padding-block: 4px; - padding-inline: 4px; - cursor: pointer; -} - -.checkmark::before { - content: ''; - display: inline-block; - width: 16px; - height: 16px; - background: var(--color-semantic-surface-regular-1) 50% 50% no-repeat; - border: 1px solid var(--color-semantic-border-check-unchecked); - border-radius: 2px; -} - -.checkmark:has(.input:focus-visible)::before { - border-color: var(--color-semantic-border-focus); - box-shadow: 0 0 0 3px var(--color-semantic-highlight-focus-ring-default); -} - -.checkmark:has(:is(.input:checked, .input:indeterminate))::before { - background-color: var(--color-semantic-surface-selected); - border-color: var(--color-semantic-border-selected); -} - -.checkmark:has(.input:checked)::before { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20d%3D%22m1%203%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); -} - -.checkmark:has(.input:indeterminate)::before { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h8v2H0z%22%2F%3E%3C%2Fsvg%3E"); -} - -.checkmark:has(.input:disabled) { - cursor: not-allowed; -} - -.checkmark:has(:is(.input:disabled))::before { - background-color: var(--color-semantic-surface-check-disabled); - border-color: var(--color-semantic-border-regular); -} - -.checkmark .input { - position: absolute; - z-index: -1; - opacity: 0; -} diff --git a/dist/components/checkbox/sp-checkbox-list.d.ts.map b/dist/components/checkbox/sp-checkbox-list.d.ts.map deleted file mode 100644 index f642d2b..0000000 --- a/dist/components/checkbox/sp-checkbox-list.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-checkbox-list.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/sp-checkbox-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAWvE,qBAAa,cAAe,SAAQ,cAAc;;CAQjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"} \ No newline at end of file diff --git a/dist/components/checkbox/sp-checkbox-text.d.ts.map b/dist/components/checkbox/sp-checkbox-text.d.ts.map deleted file mode 100644 index 4a4afef..0000000 --- a/dist/components/checkbox/sp-checkbox-text.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-checkbox-text.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/sp-checkbox-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAWvE,qBAAa,cAAe,SAAQ,cAAc;;CAQjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"} \ No newline at end of file diff --git a/dist/components/checkbox/sp-checkbox.d.ts.map b/dist/components/checkbox/sp-checkbox.d.ts.map deleted file mode 100644 index aed5b46..0000000 --- a/dist/components/checkbox/sp-checkbox.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/sp-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAWnE,qBAAa,UAAW,SAAQ,UAAU;;CAQzC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"} \ No newline at end of file diff --git a/dist/components/foundation.css b/dist/components/foundation.css deleted file mode 100644 index 62d73c5..0000000 --- a/dist/components/foundation.css +++ /dev/null @@ -1,7 +0,0 @@ -:host { - font-family: var(--font-ja); -} - -:host:lang(zh) { - font-family: var(--font-zh); -} diff --git a/dist/components/icon/icon.css b/dist/components/icon/icon.css deleted file mode 100644 index a4533d5..0000000 --- a/dist/components/icon/icon.css +++ /dev/null @@ -1,22 +0,0 @@ -:host { - flex-grow: 0; - flex-shrink: 0; - display: inline-block; - line-height: 0; - vertical-align: middle; -} - -.icon { - display: inline-block; - fill: var(--icon-color, var(--color-primitive-neutral-100)); -} - -.size__small { - width: 16px; - height: 16px; -} - -.size__medium { - width: 24px; - height: 24px; -} \ No newline at end of file diff --git a/dist/components/icon/icons.d.ts b/dist/components/icon/icons.d.ts deleted file mode 100644 index 83068f1..0000000 --- a/dist/components/icon/icons.d.ts +++ /dev/null @@ -1,55 +0,0 @@ -export declare const speedaIconTypes: readonly ["arrow_down", "arrow_down_link", "arrow_left", "arrow_left_link", "arrow_right", "arrow_right_link", "arrow_up", "arrow_up_link", "bookmark", "calendar", "check", "check_bold", "clear", "close", "copy", "create", "delete", "doublearrow_down", "doublearrow_left", "doublearrow_right", "download", "drag", "edit", "error", "folder", "help", "kebab_menu", "like", "list", "location", "lock", "mail", "menu", "my_speeda", "notification", "open_in_new", "operator", "opinion", "people", "person", "pib", "plus", "search", "settings", "sort", "sort_down", "sort_up", "toggle_arrow_down", "toggle_arrow_right", "zip"]; -export type SpeedaIconTypes = (typeof speedaIconTypes)[number]; -export declare const speedaIconPaths: { - arrow_down: string; - arrow_down_link: string; - arrow_left: string; - arrow_left_link: string; - arrow_right: string; - arrow_right_link: string; - arrow_up: string; - arrow_up_link: string; - bookmark: string; - calendar: string; - check: string; - check_bold: string; - clear: string; - close: string; - copy: string; - create: string; - delete: string; - doublearrow_down: string; - doublearrow_left: string; - doublearrow_right: string; - download: string; - drag: string; - edit: string; - error: string; - folder: string; - help: string; - kebab_menu: string; - like: string; - list: string; - location: string; - lock: string; - mail: string; - menu: string; - my_speeda: string; - notification: string; - open_in_new: string; - operator: string; - opinion: string; - people: string; - person: string; - pib: string; - plus: string; - search: string; - settings: string; - sort: string; - sort_down: string; - sort_up: string; - toggle_arrow_down: string; - toggle_arrow_right: string; - zip: string; -}; -//# sourceMappingURL=icons.d.ts.map \ No newline at end of file diff --git a/dist/components/icon/icons.d.ts.map b/dist/components/icon/icons.d.ts.map deleted file mode 100644 index b5fca57..0000000 --- a/dist/components/icon/icons.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icons.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,8mBAmDlB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmD3B,CAAC"} \ No newline at end of file diff --git a/dist/components/icon/sp-icon.d.ts.map b/dist/components/icon/sp-icon.d.ts.map deleted file mode 100644 index f6978af..0000000 --- a/dist/components/icon/sp-icon.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/sp-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAS/D,qBAAa,MAAO,SAAQ,MAAM;IAChC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAmB;;CASzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"} \ No newline at end of file diff --git a/dist/components/icon/sp-icon.js b/dist/components/icon/sp-icon.js deleted file mode 100644 index 105ee92..0000000 --- a/dist/components/icon/sp-icon.js +++ /dev/null @@ -1,17 +0,0 @@ -import { UbIcon } from "@ub-design/components-web-components/"; -import { speedaIconPaths } from "./icons"; -// @ts-ignore -import iconStyle from "./icon.css?inline" assert { type: "css" }; -const styles = new CSSStyleSheet(); -styles.replaceSync(iconStyle); -export class SpIcon extends UbIcon { - constructor() { - super(); - this.paths = speedaIconPaths; - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; - } -} -customElements.get("sp-icon") || customElements.define("sp-icon", SpIcon); diff --git a/dist/components/radio/radio-button-text-group.css b/dist/components/radio/radio-button-text-group.css deleted file mode 100644 index 160d767..0000000 --- a/dist/components/radio/radio-button-text-group.css +++ /dev/null @@ -1,111 +0,0 @@ -:host { - display: inline-block; - min-width: 0; - max-width: 100%; -} - -.base { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.base:has(:focus-visible) { - outline: auto; -} - -.base.horizontal { - flex-direction: row; -} - -.base.vertical { - flex-direction: column; -} - -.item { - display: inline-flex; - justify-content: flex-start; - align-items: flex-start; - min-width: 0; -} - -.text { - min-width: 0; - color: var(--color-semantic-text-body-regular); - font-size: 12px; - line-height: 1.6; - overflow-wrap : break-word; - padding-block: 2.5px; - cursor: pointer; -} - -.input { - position: absolute; - left: 0; - top: 0; - opacity: 0; - width: 100%; - height: 100%; - cursor: pointer; -} - -.radio { - position: relative; - flex-grow: 0; - flex-shrink: 0; - display: inline-flex; - padding-block: 4px; - padding-inline: 4px; -} - -.radio::before { - content: ''; - display: inline-block; - width: 16px; - height: 16px; - background: var(--color-semantic-surface-regular-1) 50% 50% no-repeat; - border: 1px solid var(--color-semantic-border-check-unchecked); - border-radius: 50%; -} - -.radio:has(.input:focus-visible)::before { - outline: auto; - outline-offset: 4px; - border-color: var(--color-semantic-border-focus); - box-shadow: 0 0 0 3px var(--color-semantic-highlight-focus-ring-default); -} - -.radio:has(.input:checked)::before { - background-color: var(--color-semantic-surface-regular-1); - border-width: 4px; -} - -.radio:has(.input:checked:not(:disabled))::before { - border-color: var(--color-semantic-border-selected); -} - -.item:has(.input:disabled) :is(.input, .text) { - cursor: not-allowed; -} - -.item:has(.input:disabled) .text { - color: var(--color-semantic-text-disabled); -} - -.item .radio:has(.input:disabled)::before { - background-color: var(--color-semantic-surface-check-disabled); - border-color: var(--color-semantic-border-regular); -} - -.item .radio:has(.input:checked:disabled)::before { - background-color: var(--color-semantic-surface-regular-1); -} - -.item:has(:is(.input:hover, .text:hover)):not(:has(:is(.input:checked, .input:disabled))) .radio::before { - background-color: var(--color-semantic-surface-regular-3); -} - -.item:has(.input:checked:hover:not(:disabled)) .radio::before, -.item:has(.input:checked:not(:disabled)):has(.text:hover) .radio::before { - border-color: var(--color-semantic-border-selected-hover); -} \ No newline at end of file diff --git a/dist/components/radio/sp-radio-button-text-group.d.ts.map b/dist/components/radio/sp-radio-button-text-group.d.ts.map deleted file mode 100644 index 90a240a..0000000 --- a/dist/components/radio/sp-radio-button-text-group.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-radio-button-text-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio/sp-radio-button-text-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAS/E,qBAAa,sBAAuB,SAAQ,sBAAsB;;CAQjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,sBAAsB,CAAC;KACtD;CACF"} \ No newline at end of file diff --git a/dist/components/segmentedControl/segmented-control.css b/dist/components/segmentedControl/segmented-control.css deleted file mode 100644 index 9d94817..0000000 --- a/dist/components/segmentedControl/segmented-control.css +++ /dev/null @@ -1,89 +0,0 @@ -:host { - display: inline-block; - min-width: 0; - max-width: 100%; - line-height: 0; - vertical-align: middle; -} - -.base { - display: inline-flex; - max-width: 100%; -} - -.item { - flex: 1 0 80px; - position: relative; - display: flex; - align-items: stretch; - min-width: 80px; -} - -.radio { - position: absolute; - z-index: -1; - width: 100%; - height: 100%; -} - -.input { - width: 100%; - height: 100%; - opacity: 0; -} - -.text { - flex-grow: 1; - display: flex; - align-items: center; - justify-content: center; - min-width: 0; - padding-block: 8px; - padding-inline: 8px; - background-color: var(--color-semantic-surface-regular-2); - border: 1px solid var(--color-semantic-border-regular); - border-right: none; - color: var(--color-semantic-text-body-semi-weak); - font-size: 10px; - line-height: 1.6; - text-align: center; - overflow-wrap : break-word; -} - -.text:hover { - background-color: var(--color-semantic-surface-regular-4); -} - -.item:first-child .text { - border-radius: 5px 0 0 5px; -} - -.item:last-child .text { - border-radius: 0 5px 5px 0; - border-right: 1px solid var(--color-semantic-border-regular); -} - -.item:has(.input:focus-visible) .text { - outline: auto; - outline-offset: -4px; - background-color: var(--color-semantic-surface-regular-4); -} - -.item:has(.input:checked) .text { - background-color: var(--color-semantic-surface-selected); - border-color: var(--color-semantic-border-selected); - color: var(--color-semantic-text-inverse); - font-weight: bold; - cursor: default; -} - -.item:has(.input:disabled) .text { - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; -} - -.text-inner { - min-width: 0; - overflow-wrap: break-word; -} \ No newline at end of file diff --git a/dist/components/segmentedControl/sp-segmented-control.d.ts.map b/dist/components/segmentedControl/sp-segmented-control.d.ts.map deleted file mode 100644 index 9fc65a0..0000000 --- a/dist/components/segmentedControl/sp-segmented-control.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedControl/sp-segmented-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAS/E,qBAAa,kBAAmB,SAAQ,sBAAsB;;CAQ7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"} \ No newline at end of file diff --git a/dist/index.d.ts.map b/dist/index.d.ts.map deleted file mode 100644 index 224a41b..0000000 --- a/dist/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC"} \ No newline at end of file diff --git a/dist/components/button/sp-button.d.ts b/dist/src/components/button/sp-button.d.ts similarity index 76% rename from dist/components/button/sp-button.d.ts rename to dist/src/components/button/sp-button.d.ts index 5bdc6b3..809bba9 100644 --- a/dist/components/button/sp-button.d.ts +++ b/dist/src/components/button/sp-button.d.ts @@ -1,9 +1,8 @@ import { UbButton } from "@ub-design/components-web-components/"; -import { SpeedaIconTypes } from "../icon/icons"; export declare class SpButton extends UbButton { #private; - get icon(): SpeedaIconTypes | ""; - set icon(val: SpeedaIconTypes | ""); + get icon(): string; + set icon(val: string); static get observedAttributes(): string[]; constructor(); attributeChangedCallback(name: string, oldValue: string, newValue: string): void; diff --git a/dist/src/components/button/sp-button.d.ts.map b/dist/src/components/button/sp-button.d.ts.map new file mode 100644 index 0000000..15d82fa --- /dev/null +++ b/dist/src/components/button/sp-button.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/sp-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAUjE,qBAAa,QAAS,SAAQ,QAAQ;;IAIpC,IAAI,IAAI,IAGM,MAAM,CADnB;IACD,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAUnB;IAED,MAAM,KAAK,kBAAkB,aAE5B;;IAgBD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CAqB1E;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"} \ No newline at end of file diff --git a/dist/components/button/sp-button.js b/dist/src/components/button/sp-button.js similarity index 95% rename from dist/components/button/sp-button.js rename to dist/src/components/button/sp-button.js index 536104c..a35b5c2 100644 --- a/dist/components/button/sp-button.js +++ b/dist/src/components/button/sp-button.js @@ -43,10 +43,12 @@ export class SpButton extends UbButton { _SpButton_instances.add(this); _SpButton_icon.set(this, ""); _SpButton_iconElement.set(this, new SpIcon()); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } __classPrivateFieldGet(this, _SpButton_iconElement, "f").classList.add("base__icon"); __classPrivateFieldGet(this, _SpButton_iconElement, "f").size = "small"; } diff --git a/dist/components/checkbox/sp-checkbox-list.d.ts b/dist/src/components/checkbox/sp-checkbox-list.d.ts similarity index 100% rename from dist/components/checkbox/sp-checkbox-list.d.ts rename to dist/src/components/checkbox/sp-checkbox-list.d.ts diff --git a/dist/src/components/checkbox/sp-checkbox-list.d.ts.map b/dist/src/components/checkbox/sp-checkbox-list.d.ts.map new file mode 100644 index 0000000..e65e3bb --- /dev/null +++ b/dist/src/components/checkbox/sp-checkbox-list.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-checkbox-list.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/sp-checkbox-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAWvE,qBAAa,cAAe,SAAQ,cAAc;;CAWjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"} \ No newline at end of file diff --git a/dist/components/checkbox/sp-checkbox-list.js b/dist/src/components/checkbox/sp-checkbox-list.js similarity index 78% rename from dist/components/checkbox/sp-checkbox-list.js rename to dist/src/components/checkbox/sp-checkbox-list.js index 134c838..673cc28 100644 --- a/dist/components/checkbox/sp-checkbox-list.js +++ b/dist/src/components/checkbox/sp-checkbox-list.js @@ -10,10 +10,12 @@ styles.replaceSync(`${foundationStyle} ${checkmarkStyle} ${checkboxListStyle}`); export class SpCheckboxList extends UbCheckboxText { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } } customElements.get("sp-checkbox-list") || diff --git a/dist/components/checkbox/sp-checkbox-text.d.ts b/dist/src/components/checkbox/sp-checkbox-text.d.ts similarity index 100% rename from dist/components/checkbox/sp-checkbox-text.d.ts rename to dist/src/components/checkbox/sp-checkbox-text.d.ts diff --git a/dist/src/components/checkbox/sp-checkbox-text.d.ts.map b/dist/src/components/checkbox/sp-checkbox-text.d.ts.map new file mode 100644 index 0000000..cbc1890 --- /dev/null +++ b/dist/src/components/checkbox/sp-checkbox-text.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-checkbox-text.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/sp-checkbox-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAWvE,qBAAa,cAAe,SAAQ,cAAc;;CAWjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"} \ No newline at end of file diff --git a/dist/components/checkbox/sp-checkbox-text.js b/dist/src/components/checkbox/sp-checkbox-text.js similarity index 78% rename from dist/components/checkbox/sp-checkbox-text.js rename to dist/src/components/checkbox/sp-checkbox-text.js index ab9f946..65b73dc 100644 --- a/dist/components/checkbox/sp-checkbox-text.js +++ b/dist/src/components/checkbox/sp-checkbox-text.js @@ -10,10 +10,12 @@ styles.replaceSync(`${foundationStyle} ${checkmarkStyle} ${checkboxTextStyle}`); export class SpCheckboxText extends UbCheckboxText { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } } customElements.get("sp-checkbox-text") || diff --git a/dist/components/checkbox/sp-checkbox.d.ts b/dist/src/components/checkbox/sp-checkbox.d.ts similarity index 100% rename from dist/components/checkbox/sp-checkbox.d.ts rename to dist/src/components/checkbox/sp-checkbox.d.ts diff --git a/dist/src/components/checkbox/sp-checkbox.d.ts.map b/dist/src/components/checkbox/sp-checkbox.d.ts.map new file mode 100644 index 0000000..ee3adf7 --- /dev/null +++ b/dist/src/components/checkbox/sp-checkbox.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/sp-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAWnE,qBAAa,UAAW,SAAQ,UAAU;;CAWzC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"} \ No newline at end of file diff --git a/dist/components/checkbox/sp-checkbox.js b/dist/src/components/checkbox/sp-checkbox.js similarity index 77% rename from dist/components/checkbox/sp-checkbox.js rename to dist/src/components/checkbox/sp-checkbox.js index 76c31b6..539a733 100644 --- a/dist/components/checkbox/sp-checkbox.js +++ b/dist/src/components/checkbox/sp-checkbox.js @@ -10,10 +10,12 @@ styles.replaceSync(`${foundationStyle} ${checkmarkStyle} ${checkboxStyle}`); export class SpCheckbox extends UbCheckbox { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } } customElements.get("sp-checkbox") || diff --git a/dist/src/components/icon/icons.d.ts b/dist/src/components/icon/icons.d.ts new file mode 100644 index 0000000..32007fa --- /dev/null +++ b/dist/src/components/icon/icons.d.ts @@ -0,0 +1,6 @@ +export declare const speedaIconTypes: readonly ["arrow_down", "arrow_down_link", "arrow_left", "arrow_left_link", "arrow_right", "arrow_right_link", "arrow_up", "arrow_up_link", "bookmark", "calendar", "check", "check_bold", "clear", "close", "copy", "create", "delete", "doublearrow_down", "doublearrow_left", "doublearrow_right", "download", "drag", "edit", "error", "folder", "help", "kebab_menu", "like", "list", "location", "lock", "mail", "menu", "my_speeda", "notification", "open_in_new", "operator", "opinion", "people", "person", "pib", "plus", "search", "settings", "sort", "sort_down", "sort_up", "toggle_arrow_down", "toggle_arrow_right", "zip"]; +export type SpeedaIconTypes = (typeof speedaIconTypes)[number]; +export declare const speedaIconPaths: { + [key in SpeedaIconTypes]: string; +}; +//# sourceMappingURL=icons.d.ts.map \ No newline at end of file diff --git a/dist/src/components/icon/icons.d.ts.map b/dist/src/components/icon/icons.d.ts.map new file mode 100644 index 0000000..82bbb35 --- /dev/null +++ b/dist/src/components/icon/icons.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/icons.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,8mBAmDlB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,eAAO,MAAM,eAAe,EAAE;KAAE,GAAG,IAAI,eAAe,GAAG,MAAM;CAmD9D,CAAC"} \ No newline at end of file diff --git a/dist/components/icon/icons.js b/dist/src/components/icon/icons.js similarity index 100% rename from dist/components/icon/icons.js rename to dist/src/components/icon/icons.js diff --git a/dist/components/icon/sp-icon.d.ts b/dist/src/components/icon/sp-icon.d.ts similarity index 92% rename from dist/components/icon/sp-icon.d.ts rename to dist/src/components/icon/sp-icon.d.ts index 564b19d..1bd8048 100644 --- a/dist/components/icon/sp-icon.d.ts +++ b/dist/src/components/icon/sp-icon.d.ts @@ -1,6 +1,7 @@ import { UbIcon } from "@ub-design/components-web-components/"; export declare class SpIcon extends UbIcon { paths: { + "": string; arrow_down: string; arrow_down_link: string; arrow_left: string; @@ -53,6 +54,8 @@ export declare class SpIcon extends UbIcon { zip: string; }; constructor(); + set type(value: string); + attributeChangedCallback(name: string, oldValue: string, newValue: string): void; } declare global { interface HTMLElementTagNameMap { diff --git a/dist/src/components/icon/sp-icon.d.ts.map b/dist/src/components/icon/sp-icon.d.ts.map new file mode 100644 index 0000000..6d8b6f3 --- /dev/null +++ b/dist/src/components/icon/sp-icon.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-icon.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/sp-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAa/D,qBAAa,MAAO,SAAQ,MAAM;IAChC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAkC;;IAavC,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,IAAI;CAQR;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"} \ No newline at end of file diff --git a/dist/src/components/icon/sp-icon.js b/dist/src/components/icon/sp-icon.js new file mode 100644 index 0000000..60f831b --- /dev/null +++ b/dist/src/components/icon/sp-icon.js @@ -0,0 +1,34 @@ +import { UbIcon } from "@ub-design/components-web-components/"; +import { speedaIconPaths } from "./icons"; +// @ts-ignore +import iconStyle from "./icon.css?inline" assert { type: "css" }; +function isSpeedaIconType(type) { + return speedaIconPaths.hasOwnProperty(type); +} +const styles = new CSSStyleSheet(); +styles.replaceSync(iconStyle); +export class SpIcon extends UbIcon { + constructor() { + super(); + this.paths = { ...speedaIconPaths, "": "" }; + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } + } + set type(value) { + super.type = isSpeedaIconType(value) ? value : ""; + } + attributeChangedCallback(name, oldValue, newValue) { + if (name === "type") { + const type = isSpeedaIconType(newValue) ? newValue : ""; + super.attributeChangedCallback(name, oldValue, type); + } + else { + super.attributeChangedCallback(name, oldValue, newValue); + } + } +} +customElements.get("sp-icon") || customElements.define("sp-icon", SpIcon); diff --git a/dist/components/radio/sp-radio-button-text-group.d.ts b/dist/src/components/radio/sp-radio-button-text-group.d.ts similarity index 100% rename from dist/components/radio/sp-radio-button-text-group.d.ts rename to dist/src/components/radio/sp-radio-button-text-group.d.ts diff --git a/dist/src/components/radio/sp-radio-button-text-group.d.ts.map b/dist/src/components/radio/sp-radio-button-text-group.d.ts.map new file mode 100644 index 0000000..0c6f3d9 --- /dev/null +++ b/dist/src/components/radio/sp-radio-button-text-group.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-radio-button-text-group.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/sp-radio-button-text-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAS/E,qBAAa,sBAAuB,SAAQ,sBAAsB;;CAWjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,sBAAsB,CAAC;KACtD;CACF"} \ No newline at end of file diff --git a/dist/components/radio/sp-radio-button-text-group.js b/dist/src/components/radio/sp-radio-button-text-group.js similarity index 77% rename from dist/components/radio/sp-radio-button-text-group.js rename to dist/src/components/radio/sp-radio-button-text-group.js index 027f95d..aedd080 100644 --- a/dist/components/radio/sp-radio-button-text-group.js +++ b/dist/src/components/radio/sp-radio-button-text-group.js @@ -8,10 +8,12 @@ styles.replaceSync(`${foundationStyle} ${radioButtonTextGroupStyle}`); export class SpRadioButtonTextGroup extends UbRadioButtonTextGroup { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } } customElements.get("sp-radio-button-text-group") || diff --git a/dist/components/segmentedControl/sp-segmented-control.d.ts b/dist/src/components/segmentedControl/sp-segmented-control.d.ts similarity index 100% rename from dist/components/segmentedControl/sp-segmented-control.d.ts rename to dist/src/components/segmentedControl/sp-segmented-control.d.ts diff --git a/dist/src/components/segmentedControl/sp-segmented-control.d.ts.map b/dist/src/components/segmentedControl/sp-segmented-control.d.ts.map new file mode 100644 index 0000000..c5fb2a9 --- /dev/null +++ b/dist/src/components/segmentedControl/sp-segmented-control.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/segmentedControl/sp-segmented-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAS/E,qBAAa,kBAAmB,SAAQ,sBAAsB;;CAW7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"} \ No newline at end of file diff --git a/dist/components/segmentedControl/sp-segmented-control.js b/dist/src/components/segmentedControl/sp-segmented-control.js similarity index 76% rename from dist/components/segmentedControl/sp-segmented-control.js rename to dist/src/components/segmentedControl/sp-segmented-control.js index 4f751f3..1559214 100644 --- a/dist/components/segmentedControl/sp-segmented-control.js +++ b/dist/src/components/segmentedControl/sp-segmented-control.js @@ -8,10 +8,12 @@ styles.replaceSync(`${foundationStyle} ${segmentedControlStyle}`); export class SpSegmentedControl extends UbRadioButtonTextGroup { constructor() { super(); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; + if (this.shadowRoot) { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + } } } customElements.get("sp-segmented-control") || diff --git a/dist/src/components/tab/sp-tab.d.ts b/dist/src/components/tab/sp-tab.d.ts new file mode 100644 index 0000000..83125dd --- /dev/null +++ b/dist/src/components/tab/sp-tab.d.ts @@ -0,0 +1,26 @@ +type TabType = "tabWhite" | "tabGray"; +export declare class SpTab extends HTMLElement { + #private; + tabElement: HTMLButtonElement; + textElement: HTMLSpanElement; + set text(value: string); + get selected(): boolean; + set selected(value: boolean); + get disabled(): boolean; + set disabled(value: boolean); + get type(): TabType; + set type(value: TabType); + get createNewIcon(): boolean; + set createNewIcon(value: boolean); + static get observedAttributes(): string[]; + constructor(); + connectedCallback(): void; + attributeChangedCallback(name: string, oldValue: string, newValue: string): void; +} +declare global { + interface HTMLElementTagNameMap { + "sp-tab": SpTab; + } +} +export {}; +//# sourceMappingURL=sp-tab.d.ts.map \ No newline at end of file diff --git a/dist/src/components/tab/sp-tab.d.ts.map b/dist/src/components/tab/sp-tab.d.ts.map new file mode 100644 index 0000000..e354361 --- /dev/null +++ b/dist/src/components/tab/sp-tab.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/sp-tab.ts"],"names":[],"mappings":"AAOA,KAAK,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAKtC,qBAAa,KAAM,SAAQ,WAAW;;IAMpC,UAAU,oBAAoC;IAC9C,WAAW,kBAAkC;IAE7C,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,QAAQ,IAGQ,OAAO,CAD1B;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IAED,IAAI,QAAQ,IAGQ,OAAO,CAD1B;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAK1B;IAED,IAAI,IAAI,IAGQ,OAAO,CADtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAStB;IACD,IAAI,aAAa,IAGQ,OAAO,CAD/B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,OAAO,EAU/B;IAED,MAAM,KAAK,kBAAkB,aAE5B;;IAeD,iBAAiB;IAYjB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CAiC1E;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"} \ No newline at end of file diff --git a/dist/src/components/tab/sp-tab.js b/dist/src/components/tab/sp-tab.js new file mode 100644 index 0000000..482684a --- /dev/null +++ b/dist/src/components/tab/sp-tab.js @@ -0,0 +1,133 @@ +var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) { + if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); + if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); + return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); +}; +var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) { + if (kind === "m") throw new TypeError("Private method is not writable"); + if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter"); + if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it"); + return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value; +}; +var _SpTab_instances, _SpTab_selected, _SpTab_disabled, _SpTab_type, _SpTab_createNewIcon, _SpTab_createNewIconElement, _SpTab_onSelectedAdd, _SpTab_onSelectedRemove, _SpTab_tabDisabledUpdate; +// @ts-ignore +import foundationStyle from "../foundation.css?inline" assert { type: "css" }; +// @ts-ignore +import tabStyle from "./tab.css?inline" assert { type: "css" }; +import { SpIcon } from "../icon/sp-icon"; +const styles = new CSSStyleSheet(); +styles.replaceSync(`${foundationStyle} ${tabStyle}`); +export class SpTab extends HTMLElement { + set text(value) { + this.textElement.innerText = value; + } + get selected() { + return __classPrivateFieldGet(this, _SpTab_selected, "f"); + } + set selected(value) { + __classPrivateFieldSet(this, _SpTab_selected, value, "f"); + value ? __classPrivateFieldGet(this, _SpTab_instances, "m", _SpTab_onSelectedAdd).call(this) : __classPrivateFieldGet(this, _SpTab_instances, "m", _SpTab_onSelectedRemove).call(this); + } + get disabled() { + return __classPrivateFieldGet(this, _SpTab_disabled, "f"); + } + set disabled(value) { + const tab = this.tabElement; + __classPrivateFieldSet(this, _SpTab_disabled, value, "f"); + value ? tab.classList.add("isDisable") : tab.classList.remove("isDisable"); + __classPrivateFieldGet(this, _SpTab_instances, "m", _SpTab_tabDisabledUpdate).call(this); + } + get type() { + return __classPrivateFieldGet(this, _SpTab_type, "f"); + } + set type(value) { + const tab = this.tabElement; + const typeClassList = { + tabWhite: "-white", + tabGray: "-gray", + }; + tab.classList.remove(typeClassList[__classPrivateFieldGet(this, _SpTab_type, "f")]); + tab.classList.add(typeClassList[value]); + __classPrivateFieldSet(this, _SpTab_type, value, "f"); + } + get createNewIcon() { + return __classPrivateFieldGet(this, _SpTab_createNewIcon, "f"); + } + set createNewIcon(value) { + __classPrivateFieldSet(this, _SpTab_createNewIcon, value, "f"); + if (value === true) { + this.tabElement.insertBefore(__classPrivateFieldGet(this, _SpTab_createNewIconElement, "f"), this.textElement); + } + else { + __classPrivateFieldGet(this, _SpTab_createNewIconElement, "f").remove(); + } + } + static get observedAttributes() { + return ["text", "selected", "create-new-icon", "disabled", "type"]; + } + constructor() { + super(); + _SpTab_instances.add(this); + _SpTab_selected.set(this, void 0); + _SpTab_disabled.set(this, void 0); + _SpTab_type.set(this, void 0); + _SpTab_createNewIcon.set(this, void 0); + _SpTab_createNewIconElement.set(this, new SpIcon()); + this.tabElement = document.createElement("button"); + this.textElement = document.createElement("span"); + this.attachShadow({ mode: "open" }); + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + this.tabElement.classList.add("spds__tab"); + this.tabElement.setAttribute("role", "tab"); + this.tabElement.setAttribute("aria-tabindex", "0"); + this.textElement.classList.add("spds__tabText"); + this.tabElement.appendChild(this.textElement); + } + connectedCallback() { + __classPrivateFieldGet(this, _SpTab_createNewIconElement, "f").classList.add("base__icon"); + __classPrivateFieldGet(this, _SpTab_createNewIconElement, "f").size = "small"; + __classPrivateFieldGet(this, _SpTab_createNewIconElement, "f").type = "plus"; + if (typeof this.selected === "undefined") { + // this.selected = false; + this.tabElement.setAttribute("aria-selected", "false"); + } + if (typeof this.type === "undefined") + this.type = "tabWhite"; + this.setAttribute("role", "tablist"); + this.shadowRoot.appendChild(this.tabElement); + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue === newValue) + return; + switch (name) { + case "text": + this.text = newValue; + break; + case "selected": + this.selected = newValue === "true" || newValue === ""; + break; + case "disabled": + this.disabled = newValue === "true" || newValue === ""; + break; + case "type": + this.type = newValue; + break; + case "create-new-icon": + this.createNewIcon = newValue === "true" || newValue === ""; + break; + } + } +} +_SpTab_selected = new WeakMap(), _SpTab_disabled = new WeakMap(), _SpTab_type = new WeakMap(), _SpTab_createNewIcon = new WeakMap(), _SpTab_createNewIconElement = new WeakMap(), _SpTab_instances = new WeakSet(), _SpTab_onSelectedAdd = function _SpTab_onSelectedAdd() { + this.tabElement.classList.add("-selected"); + this.tabElement.setAttribute("aria-selected", "true"); +}, _SpTab_onSelectedRemove = function _SpTab_onSelectedRemove() { + this.tabElement.classList.remove("-selected"); + this.tabElement.setAttribute("aria-selected", "false"); +}, _SpTab_tabDisabledUpdate = function _SpTab_tabDisabledUpdate() { + this.tabElement.disabled = this.disabled; +}; +customElements.get("sp-tab") || customElements.define("sp-tab", SpTab); diff --git a/dist/index.d.ts b/dist/src/index.d.ts similarity index 90% rename from dist/index.d.ts rename to dist/src/index.d.ts index 45caa6e..4292fac 100644 --- a/dist/index.d.ts +++ b/dist/src/index.d.ts @@ -4,4 +4,5 @@ export { SpCheckboxText } from "./components/checkbox/sp-checkbox-text"; export { SpCheckboxList } from "./components/checkbox/sp-checkbox-list"; export { SpIcon } from "./components/icon/sp-icon"; export { SpRadioButtonTextGroup } from "./components/radio/sp-radio-button-text-group"; +export { SpTab } from "./components/tab/sp-tab"; //# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/dist/src/index.d.ts.map b/dist/src/index.d.ts.map new file mode 100644 index 0000000..15a223f --- /dev/null +++ b/dist/src/index.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC"} \ No newline at end of file diff --git a/dist/index.js b/dist/src/index.js similarity index 89% rename from dist/index.js rename to dist/src/index.js index 483aed7..5c52c9b 100644 --- a/dist/index.js +++ b/dist/src/index.js @@ -4,3 +4,4 @@ export { SpCheckboxText } from "./components/checkbox/sp-checkbox-text"; export { SpCheckboxList } from "./components/checkbox/sp-checkbox-list"; export { SpIcon } from "./components/icon/sp-icon"; export { SpRadioButtonTextGroup } from "./components/radio/sp-radio-button-text-group"; +export { SpTab } from "./components/tab/sp-tab"; diff --git a/dist/vitest.config.d.ts b/dist/vitest.config.d.ts new file mode 100644 index 0000000..2b17c25 --- /dev/null +++ b/dist/vitest.config.d.ts @@ -0,0 +1,3 @@ +declare const _default: import("vite").UserConfig; +export default _default; +//# sourceMappingURL=vitest.config.d.ts.map \ No newline at end of file diff --git a/dist/vitest.config.d.ts.map b/dist/vitest.config.d.ts.map new file mode 100644 index 0000000..7e07e0c --- /dev/null +++ b/dist/vitest.config.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"vitest.config.d.ts","sourceRoot":"","sources":["../vitest.config.ts"],"names":[],"mappings":";AAEA,wBAIG"} \ No newline at end of file diff --git a/dist/vitest.config.js b/dist/vitest.config.js new file mode 100644 index 0000000..0bc0e82 --- /dev/null +++ b/dist/vitest.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from "vitest/config"; +export default defineConfig({ + test: { + environment: "happy-dom", + }, +}); diff --git a/package-lock.json b/package-lock.json index 94f93b2..4de9a8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,15 @@ { "name": "@sp-design/components-web-components", - "version": "0.2.0", + "version": "0.2.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@sp-design/components-web-components", - "version": "0.2.0", + "version": "0.2.2", "license": "ISC", "dependencies": { - "@sp-design/token": "git+https://github.com/uzabase/sp-design-token.git#semver:^6.0.1", + "@sp-design/token": "git+https://github.com/uzabase/sp-design-token.git#semver:^8.0.0", "@ub-design/components-web-components": "git+https://github.com/uzabase/ub-design-components-web-components.git#semver:^0.1.1" }, "devDependencies": { @@ -904,8 +904,8 @@ ] }, "node_modules/@sp-design/token": { - "version": "6.0.1", - "resolved": "git+ssh://git@github.com/uzabase/sp-design-token.git#a9295de8ed76e57adcc152cd19fb4854ed3e4afe", + "version": "8.0.0", + "resolved": "git+ssh://git@github.com/uzabase/sp-design-token.git#fab745a05076e38d52613d1b1956d9315eebb858", "license": "UNLICENSED" }, "node_modules/@storybook/addon-actions": { diff --git a/package.json b/package.json index d0d751d..e120713 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "author": "", "license": "ISC", "dependencies": { - "@sp-design/token": "git+https://github.com/uzabase/sp-design-token.git#semver:^6.0.1", + "@sp-design/token": "git+https://github.com/uzabase/sp-design-token.git#semver:^8.0.0", "@ub-design/components-web-components": "git+https://github.com/uzabase/ub-design-components-web-components.git#semver:^0.1.1" }, "devDependencies": { diff --git a/src/components/checkbox/checkbox-list.css b/src/components/checkbox/checkbox-list.css index 3a6dbd4..068fb2c 100644 --- a/src/components/checkbox/checkbox-list.css +++ b/src/components/checkbox/checkbox-list.css @@ -15,7 +15,7 @@ } .base:has(.input:focus-visible) { - outline: 2px solid var(--color-semantic-text-body-regular); + outline: 2px solid var(--color-semantic-text-regular); outline-offset: 2px; } @@ -33,7 +33,7 @@ .text { padding-block-start: 2.5px; - color: var(--color-semantic-text-body-regular); + color: var(--color-semantic-text-regular); font-size: 12px; line-height: 1.6; } diff --git a/src/components/checkbox/checkbox-text.css b/src/components/checkbox/checkbox-text.css index 417e9bd..4ba80a5 100644 --- a/src/components/checkbox/checkbox-text.css +++ b/src/components/checkbox/checkbox-text.css @@ -12,7 +12,7 @@ } .base:has(.input:focus-visible) { - outline: 2px solid var(--color-semantic-text-body-regular); + outline: 2px solid var(--color-semantic-text-regular); outline-offset: 2px; } @@ -22,7 +22,7 @@ .text { padding-block-start: 2.5px; - color: var(--color-semantic-text-body-regular); + color: var(--color-semantic-text-regular); font-size: 12px; line-height: 1.6; } diff --git a/src/components/checkbox/checkbox.css b/src/components/checkbox/checkbox.css index 230c59b..0d55164 100644 --- a/src/components/checkbox/checkbox.css +++ b/src/components/checkbox/checkbox.css @@ -3,7 +3,7 @@ } .base:has(.input:focus-visible) { - outline: 2px solid var(--color-semantic-text-body-regular); + outline: 2px solid var(--color-semantic-text-regular); outline-offset: 2px; } diff --git a/src/components/radio/radio-button-text-group.css b/src/components/radio/radio-button-text-group.css index 38d9490..4769a8d 100644 --- a/src/components/radio/radio-button-text-group.css +++ b/src/components/radio/radio-button-text-group.css @@ -28,7 +28,7 @@ } .text { - color: var(--color-semantic-text-body-regular); + color: var(--color-semantic-text-regular); font-size: 12px; line-height: 1.6; padding-block: 2.5px; diff --git a/src/components/segmentedControl/segmented-control.css b/src/components/segmentedControl/segmented-control.css index b11465c..9859889 100644 --- a/src/components/segmentedControl/segmented-control.css +++ b/src/components/segmentedControl/segmented-control.css @@ -41,7 +41,7 @@ background-color: var(--color-semantic-surface-regular-2); border: 1px solid var(--color-semantic-border-regular); border-right: none; - color: var(--color-semantic-text-body-semi-weak); + color: var(--color-semantic-text-weak); font-size: 10px; line-height: 1.6; text-align: center; diff --git a/src/components/tab/tab.css b/src/components/tab/tab.css index 1002cd9..c4f35b0 100644 --- a/src/components/tab/tab.css +++ b/src/components/tab/tab.css @@ -20,7 +20,7 @@ padding: 2px 16px; justify-content: center; align-items: center; - color: var(--color-semantic-text-body-regular); + color: var(--color-semantic-text-regular); font-size:14px; border-radius: 14px; min-height: 28px; From f109341583f5dce5af21365acfce77f71fbe06d8 Mon Sep 17 00:00:00 2001 From: "hazuki.okuda" Date: Fri, 8 Nov 2024 10:42:27 +0900 Subject: [PATCH 22/30] currentcolor revert --- dist/components/button/button.css | 241 ++++++++++++++++++++++++++++++ src/components/icon/icon.css | 4 +- src/components/tab/tab.css | 24 ++- 3 files changed, 262 insertions(+), 7 deletions(-) create mode 100644 dist/components/button/button.css diff --git a/dist/components/button/button.css b/dist/components/button/button.css new file mode 100644 index 0000000..3f1cc87 --- /dev/null +++ b/dist/components/button/button.css @@ -0,0 +1,241 @@ +:host { + --icon-color: var(--color-semantic-text-button-outline-default); + --padding-inline: 16px; + + display: inline-block; + min-width: 0; + max-width: 100%; +} + +.base { + display: inline-flex; + align-items: center; + justify-content: center; + column-gap: 4px; + color: var(--color-semantic-text-button-outline-default); + border-radius: 5px; + border: 1px solid transparent; + background-color: transparent; + min-height: 28px; + max-width: calc(100% - var(--padding-inline)*2); + padding-inline: var(--padding-inline); + position: relative; + overflow: hidden; + cursor: pointer; +} + +.base__text { + min-width: 0; + font-size: 10px; + font-weight: bold; + line-height: 1; + overflow-wrap : break-word; +} + +.type__default.appearance__outline { + border-color: var(--color-semantic-border-button-outline-default); +} + +.type__default.appearance__outline:hover:not(:disabled) { + --icon-color: var(--color-semantic-text-button-outline-hover); + + border-color: var(--color-semantic-border-button-outline-hover); + color: var(--color-semantic-text-button-outline-hover); +} + +.type__default.appearance__outline:focus-visible:not(:is(:disabled, .isSelected)) { + --icon-color: var(--color-semantic-text-button-outline-focus); + + border-color: var(--color-semantic-border-button-outline-focus); + color: var(--color-semantic-text-button-outline-focus); +} + +.type__default.appearance__fill { + --icon-color: var(--color-semantic-text-button-fill-default); + + border-color: var(--color-semantic-border-button-fill-default); + background-color: var(--color-semantic-surface-button-fill-default); + color: var(--color-semantic-text-button-fill-default); +} + +.type__default.appearance__fill:hover:not(:disabled) { + border-color: var(--color-semantic-border-button-fill-hover); + background-color: var(--color-semantic-surface-button-fill-hover); +} + +.type__default.appearance__fill:focus-visible:not(:is(:disabled, .isSelected)) { + border-color: var(--color-semantic-border-button-fill-focus); + background-color: var(--color-semantic-surface-button-fill-focus); +} + +.type__default.appearance__text { + border-color: var(--color-semantic-border-button-text-default); + background-color: var(--color-semantic-surface-button-text-default); +} + +.type__default.appearance__text:hover:not(:disabled) { + border-color: var(--color-semantic-border-button-text-hover); + background-color: var(--color-semantic-surface-button-text-hover); +} + +.type__default.appearance__text:focus-visible:not(:is(:disabled, .isSelected)) { + border-color: var(--color-semantic-border-button-text-focus); + background-color: var(--color-semantic-surface-button-text-focus); +} + +.type__default.isSelected { + --icon-color: var(--color-semantic-text-button-selected); + + border-color: var(--color-semantic-border-button-selected); + background-color: var(--color-semantic-surface-button-selected); + color: var(--color-semantic-text-button-selected); +} + +.type__default.isSelected:hover:not(:disabled) { + --icon-color: var(--color-semantic-text-button-selected); + + border-color: var(--color-semantic-border-button-selected-hover); + background-color: var(--color-semantic-surface-button-selected-hover); + color: var(--color-semantic-text-button-selected); +} + +.type__destructive.appearance__outline { + --icon-color: var(--color-semantic-text-button-outline-destructive-default); + + border-color: var(--color-semantic-border-button-outline-destructive-default); + color: var(--color-semantic-text-button-outline-destructive-default); +} + +.type__destructive.appearance__outline:hover:not(:disabled) { + --icon-color: var(--color-semantic-text-button-outline-destructive-hover); + + border-color: var(--color-semantic-border-button-outline-destructive-hover); + color: var(--color-semantic-text-button-outline-destructive-hover); +} + +.type__destructive.appearance__outline:focus-visible:not(:disabled) { + --icon-color: var(--color-semantic-text-button-outline-destructive-focus); + + border-color: var(--color-semantic-border-button-outline-destructive-focus); + color: var(--color-semantic-text-button-outline-destructive-focus); +} + +.type__destructive.appearance__fill { + --icon-color: var(--color-semantic-text-button-fill-destructive-default); + + border-color: var(--color-semantic-border-button-fill-destructive-default); + background-color: var( + --color-semantic-surface-button-fill-destructive-default + ); + color: var(--color-semantic-text-button-fill-destructive-default); +} + +.type__destructive.appearance__fill:hover:not(:disabled) { + border-color: var(--color-semantic-border-button-fill-destructive-hover); + background-color: var(--color-semantic-surface-button-fill-destructive-hover); +} + +.type__destructive.appearance__fill:focus-visible:not(:disabled) { + border-color: var(--color-semantic-border-button-fill-destructive-focus); + background-color: var(--color-semantic-surface-button-fill-destructive-focus); +} + +.type__destructive.appearance__text { + --icon-color: var(--color-semantic-text-button-text-destructive-default); + + border-color: transparent; + background-color: transparent; + color: var(--color-semantic-text-button-text-destructive-default); +} + +.type__destructive.appearance__text:hover:not(:disabled) { + border-color: var(--color-semantic-border-button-text-destructive-hover); + background-color: var(--color-semantic-surface-button-text-destructive-hover); +} + +.type__destructive.appearance__text:focus-visible:not(:disabled) { + border-color: var(--color-semantic-border-button-text-destructive-focus); + background-color: var(--color-semantic-surface-button-text-destructive-focus); +} + +/* disabledとisLoadingにおいては、上記の詳細度と同等とするために:isを不可している */ +:is(.type__default, .type__destructive):disabled { + --icon-color: var(--color-semantic-text-button-disabled); + + border-color: var(--color-semantic-border-button-disabled); + background-color: var(--color-semantic-surface-button-disabled); + color: var(--color-semantic-text-button-disabled); + cursor: not-allowed; +} + +:is(.type__default, .type__destructive).isLoading { + border-color: var(--color-semantic-border-button-loading); + background-color: var(--color-semantic-surface-button-loading); +} + +:is(.type__default, .type__destructive).isLoading::before { + content: ""; + display: block; + background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAALEsAACxLAaU9lqkAAAMAUExURUdwTP///8jIyLi4uLGxsUdHR9LS0vHx8by8vKSkpNnZ2b6+vpSUlLe3t+Dg4N/f37Ozs/X19W5ubvj4+CMjI8/Pz+/v78bGxqampp+fnzIyMufn59HR0a+vr+Xl5dbW1tbW1sHBwezs7MLCwvDw8JCQkJubm6mpqZiYmO7u7rW1tdvb29/f32VlZfb29szMzPDw8Ovr65OTk/Dw8KGhoZ2dnYeHh/Ly8tfX19TU1Nzc3Pr6+qmpqcrKysnJyYqKioyMjIODg5KSkpeXl1tbW+bm5uvr66ysrL+/v46Ojvz8/CMjI8TExMjIyIODg4GBgYaGhisrK4+Pj6CgoDw8PM/Pz6enp+Li4hsbG0xMTK2trYmJiYSEhICAgI6OjoiIiJqamq+vrykpKa2trVRUVNPT04ODg2FhYcPDwxkZGVpaWlhYWCkpKTExMSYmJp2dnY2NjSUlJSMjIzs7O0xMTJubm3l5eb+/v6urqyMjI0RERCgoKKenp3Jycqmpqa6urnh4eG1tbUxMTHFxcWhoaMzMzEBAQEBAQLe3t1ZWVpiYmEpKSqqqqm1tbXR0dJWVlWVlZSEhIWFhYSMjI5iYmJCQkKysrIuLi4CAgGtrazk5OWtra3x8fHl5eVBQUFFRURwcHLm5uYWFhS8vL2ZmZlVVVVFRUaampszMzDg4OHd3dzU1NUZGRtfX13V1dYqKisnJyXh4eLm5uXJyckVFRZeXl3Jycp+fnzs7OzIyMh4eHkhISERERIODg8TExCkpKTY2NoqKioyMjJ2dnYiIiIWFhWNjY09baWKUV+SEe0xGWUVXdUpKSkRERFdXV3V1dU5OTkBAQFlZWWlpaXFxcWtrayEhIUxMTGVlZW1tbT4+Ph4eHi0tLS8vL3h4eGFhYV5eXisrK3p6ehoaGjc3NzU1NTMzMyYmJnx8fH5+flJSUlBQUDw8PEJCQjo6OmNjY3Nzc1xcXCkpKR8fHzk5ORwcHDExMVRUVCQkJGBgYCgoKGdnZ29vb1VVVXt7e1paWtg57TgAAADLdFJOUwABB4yc/lkEhrdLgdaQOUCYBx8JEGETcbLBIC9doTRUUX0lehzdyK7OIZVHPBAQZh4oDRm8xfEWTi1EC6pqaOrm+trR7zErpnTfDf52bvf+9G9tpN8ZFTf+EKXt9v7i7cpjjzw/IEtwEf6AUO/ffxjk/t+g4LavR2vvr0BSL5aNv19w399hf19rv1ofJN+AyN9Qj8Bz0KjoD5+Pj+BwzqDPLJfP7u+QQk1g7zBQJmA7PUA+nzBAYDBf7p+/wNhfUN+urauFxs/+0H/4BcBv2gAABJ1JREFUWMPtlWdck1cUxjESA0gihIjILkUNIywpDWAFSwpFbCvTCgqCQilQqXuvKo66V7F7t3bvvecnQIMiiBiCoCEGVAgyxGrPue9LBmRcPrcPP76c+3v+9znn3vvGxuZ/mZVoQ+r3ry1vfXIMz9nZhcMbrfvw0XVarfbm462tAIidHeJ6f4jLKOxL1/WnpJzTai8AYQgw3d/flUdpL1OplvWfMwS4IiAgwI8G8cvy7m4EIOHCTZyBCwDAHxbgFx7uF2Jt+4KWlm4gLIMWdADswB8DhCd6ePhbDOH+ZlNTExBuqVRsglYWMB0DJCZ6POTtwbHgf+riRQAAQdWPPZAZOAOA7QD98wTeHPP+3l4CaIEppPQfLTjsLrKxGQMZQmCEjN9bIAie52zOf+VKLxvhVtlSkeEaLzaMAQiCgydMEJjMIPr1MgAYQlnqyPXZfqQB8McECUxN8oW2y0AgGQpEpnbghLH+mCCH6JHL7/W0tSECMqSaG1Ims3+Qg4M0c8QAMnp6ekiG7zaYP6bYYOKXSn2lw5vY2XHtGhAA8YGli1Icg9v7+vr4DGvCvQMAhJBq+aoW4vbgH+drfBIrGjsYxAprbyWa2EHGETIaQYDIcLcG4EnR7unpOc4wwi65vJEgvrX+XD8i9okVEwsNius7O+WgxgyaD4YPsYeGnjSocTtRcvkuGkB0BdpDZ1boe1hSXV1NEHtpABx0PwDSX6ZnuNWozh/pvpknwfwISH8O67lcgthJB/gUzJNAa3SVH7iMPqQDFE4imvOzrrKyCtzw/yUdoHgOo5m6ShWr+XQAzr2sDAD18FdVT/vLcw8rXaGeFS1gPCtd4TQr2hbsUOPt9ICV6Nac1uylA2TaMXpYV3lFA7qq0ZTSAV4fS2S3W1d59SpR3zt0gDV8Ph8J+fqrjO6+f/r20AF2BwYGAoP/uf4x9YEdRTXFYienQBR/n640/21019TUltAAFtva2joBZKxBbU8NqrZWRgPY4mWLclprUCsl9rt3u56gCJCU7eWFjMUGRYkM3ODvkkms+bM2zyAEry1G5RJ0dymVyiPWAGunTZvxXFJ2tle+UVkiI/aBgWYrTWx0cwMCIJKyjBdKutA+0Nx8fYkl/z57e3sGsXHYikSmJPbrDW9tMu//ZlUkS9icNXytVMn4GxoGzXbx7H2TJ0dGIsHt3ZGrR4b8Z+qeF5qyRxxbNBUJkME+38S65G/Wf6aubv82E9sfTBBPBUIkZEiPMLWD8NCQ//zt29u/NkpxIu24o2OCGCJghvQs0y0KDw0ODqIfAGdvnNp6oGgT3KsTwqI/f4vPnfIgQ4AM6eXmhiTcwQQ4D/4bpxSKS+3t6sdmLYjKi4vPTQZCghgz/FFu/piEO5gGzkIABNxRqxfOWjA3J67y6WQmgnhRermliyJ5kW2ABbQvxARROZXQA0ZIEB+LsHLXt+1nAQqF4g60gAmi8iqZHhxXfWX9uQoPYAdkBJfa1SwgLh56mHIwLYLqmyf8YvtQB2oY4qNzo2AI8bnHKe1EH69+3xCQl5P8e9Eo7ESfvbx660sI+OmvN9I+Ga37P6V/ARSAhtS32QauAAAAAElFTkSuQmCC") no-repeat 50% 50%; + background-size: 16px 16px; + animation: 1s linear infinite loading; + transform-origin: center center; + width: 100%; + height: 100%; + z-index: 2; + position: absolute; + left: 0; + top: 0; + border-radius: 5px; +} + +@keyframes loading { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +:is(.type__default, .type__destructive).isLoading:hover { + cursor: not-allowed; + border-color: var(--color-semantic-border-button-loading); +} + +:is(.type__default, .type__destructive).isLoading .base__text { + visibility: hidden; +} + +:is(.type__default, .type__destructive).isLoading .base__icon { + visibility: hidden; +} + +.type__default.size__large { + --padding-inline: 24px; + + column-gap: 8px; + min-height: 32px; + font-size: 12px; +} + +.type__default.size__xLarge { + --padding-inline: 40px; + + column-gap: 8px; + min-height: 40px; + font-size: 12px; +} + +.size__width80 { + --padding-inline: 4px; + + width: 80px; +} + +.size__width160 { + --padding-inline: 4px; + + width: 160px; +} diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css index 3da83df..a4533d5 100644 --- a/src/components/icon/icon.css +++ b/src/components/icon/icon.css @@ -8,7 +8,7 @@ .icon { display: inline-block; - fill: currentcolor; + fill: var(--icon-color, var(--color-primitive-neutral-100)); } .size__small { @@ -19,4 +19,4 @@ .size__medium { width: 24px; height: 24px; -} +} \ No newline at end of file diff --git a/src/components/tab/tab.css b/src/components/tab/tab.css index c4f35b0..ad21458 100644 --- a/src/components/tab/tab.css +++ b/src/components/tab/tab.css @@ -1,4 +1,5 @@ :host { + --icon-color: var(--color-semantic-text-button-outline-default); --padding-inline: 16px; display: inline-block; @@ -34,12 +35,16 @@ background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); } &.-selected{ border: 1px solid var(--color-semantic-border-selected); background-color: var(--color-semantic-surface-selected); color: var(--color-semantic-text-inverse); + + --icon-color: var(--color-semantic-text-button-selected); + font-weight: bold; &:hover{ @@ -50,6 +55,9 @@ &:disabled{ border: 1px solid var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); + + --icon-color: var(--color-semantic-text-disabled); + color: var(--color-semantic-text-disabled); cursor: not-allowed; font-weight: normal; @@ -79,14 +87,22 @@ background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); + } + &:disabled{ + border: 1px solid var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + color: var(--color-semantic-text-disabled); + cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); } } - &:disabled{ border: 1px solid var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); } } @@ -97,30 +113,28 @@ &:hover{ background-color: var(--color-semantic-surface-regular-3); } - &.-selected { border: 1px solid var(--color-semantic-border-selected); background-color: var(--color-semantic-surface-selected); color: var(--color-semantic-text-inverse); - &:hover { border: 1px solid var(--color-semantic-surface-selected-hover); background-color: var(--color-semantic-surface-selected-hover); } - &:disabled{ border: 1px solid var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); } } - &:disabled{ border: 1px solid var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; + --icon-color: var(--color-semantic-text-disabled); } } From f43d0b03f7741a8512feb80714c30816a7498f44 Mon Sep 17 00:00:00 2001 From: "hazuki.okuda" Date: Fri, 8 Nov 2024 10:45:17 +0900 Subject: [PATCH 23/30] tab revert --- src/components/tab/sp-tab.ts | 142 ------------------------------ src/index.ts | 1 - stories/tab/sp-tab.story.ts | 164 ----------------------------------- 3 files changed, 307 deletions(-) delete mode 100644 src/components/tab/sp-tab.ts delete mode 100644 stories/tab/sp-tab.story.ts diff --git a/src/components/tab/sp-tab.ts b/src/components/tab/sp-tab.ts deleted file mode 100644 index d1cfc33..0000000 --- a/src/components/tab/sp-tab.ts +++ /dev/null @@ -1,142 +0,0 @@ -// @ts-ignore -import foundationStyle from "../foundation.css?inline" assert { type: "css" }; -// @ts-ignore -import tabStyle from "./tab.css?inline" assert { type: "css" }; -import { SpeedaIconTypes } from "../icon/icons"; -import { SpIcon } from "../icon/sp-icon"; - -type TabType = "tabWhite" | "tabGray"; - -const styles = new CSSStyleSheet(); -styles.replaceSync(`${foundationStyle} ${tabStyle}`); - -export class SpTab extends HTMLElement { - #selected: boolean; - #disabled: boolean; - #type: TabType; - #createNewIcon: boolean; - #createNewIconElement = new SpIcon(); - tabElement = document.createElement("button"); - textElement = document.createElement("span"); - - set text(value: string) { - this.textElement.innerText = value; - } - - get selected() { - return this.#selected; - } - set selected(value: boolean) { - this.#selected = value; - value ? this.#onSelectedAdd() : this.#onSelectedRemove(); - } - - get disabled() { - return this.#disabled; - } - set disabled(value: boolean) { - const tab = this.tabElement; - this.#disabled = value; - value ? tab.classList.add("isDisable") : tab.classList.remove("isDisable"); - this.#tabDisabledUpdate(); - } - - get type() { - return this.#type; - } - set type(value: TabType) { - const tab = this.tabElement; - const typeClassList = { - tabWhite: "-white", - tabGray: "-gray", - }; - tab.classList.remove(typeClassList[this.#type]); - tab.classList.add(typeClassList[value]); - this.#type = value; - } - get createNewIcon() { - return this.#createNewIcon; - } - set createNewIcon(value: boolean) { - this.#createNewIcon = value; - if (value === true) { - this.tabElement.insertBefore( - this.#createNewIconElement, - this.textElement, - ); - } else { - this.#createNewIconElement.remove(); - } - } - - static get observedAttributes() { - return ["text", "selected", "create-new-icon", "disabled", "type"]; - } - - constructor() { - super(); - this.attachShadow({ mode: "open" }); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; - this.tabElement.classList.add("spds__tab"); - this.tabElement.setAttribute("role", "tab"); - this.tabElement.setAttribute("aria-tabindex", "0"); - this.textElement.classList.add("spds__tabText"); - this.tabElement.appendChild(this.textElement); - } - connectedCallback() { - this.#createNewIconElement.classList.add("base__icon"); - this.#createNewIconElement.size = "small"; - this.#createNewIconElement.type = "plus"; - if (typeof this.selected === "undefined") { - // this.selected = false; - this.tabElement.setAttribute("aria-selected", "false"); - } - if (typeof this.type === "undefined") this.type = "tabWhite"; - this.setAttribute("role", "tablist"); - this.shadowRoot.appendChild(this.tabElement); - } - attributeChangedCallback(name: string, oldValue: string, newValue: string) { - if (oldValue === newValue) return; - switch (name) { - case "text": - this.text = newValue; - break; - case "selected": - this.selected = newValue === "true" || newValue === ""; - break; - case "disabled": - this.disabled = newValue === "true" || newValue === ""; - break; - case "type": - this.type = newValue as TabType; - break; - case "create-new-icon": - this.createNewIcon = newValue === "true" || newValue === ""; - break; - } - } - - #onSelectedAdd() { - this.tabElement.classList.add("-selected"); - this.tabElement.setAttribute("aria-selected", "true"); - } - #onSelectedRemove() { - this.tabElement.classList.remove("-selected"); - this.tabElement.setAttribute("aria-selected", "false"); - } - - #tabDisabledUpdate() { - this.tabElement.disabled = this.disabled; - } -} - -customElements.get("sp-tab") || customElements.define("sp-tab", SpTab); - -declare global { - interface HTMLElementTagNameMap { - "sp-tab": SpTab; - } -} diff --git a/src/index.ts b/src/index.ts index 5c52c9b..483aed7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,4 +4,3 @@ export { SpCheckboxText } from "./components/checkbox/sp-checkbox-text"; export { SpCheckboxList } from "./components/checkbox/sp-checkbox-list"; export { SpIcon } from "./components/icon/sp-icon"; export { SpRadioButtonTextGroup } from "./components/radio/sp-radio-button-text-group"; -export { SpTab } from "./components/tab/sp-tab"; diff --git a/stories/tab/sp-tab.story.ts b/stories/tab/sp-tab.story.ts deleted file mode 100644 index 36da4e2..0000000 --- a/stories/tab/sp-tab.story.ts +++ /dev/null @@ -1,164 +0,0 @@ -import "../../src/components/tab/sp-tab"; -import type { Meta, StoryObj } from "@storybook/web-components"; -import "@sp-design/token/lib/speeda-tokens.css"; -import { action } from "@storybook/addon-actions"; -import { html } from "lit"; - -const meta: Meta = { - component: "sp-tab", - argTypes: { - text: { type: "string" }, - type: { - control: { type: "select" }, - options: ["tabWhite", "tabGray"], - }, - createNewIcon: { type: "boolean" }, - selected: { type: "boolean" }, - disabled: { type: "boolean" }, - onclick: { - action: "onclick", - }, - }, - args: { - text: "sp-tab", - type: "tabGray", - createNewIcon: false, - selected: false, - disabled: false, - onclick: action("onclick"), - }, -}; -export default meta; - -type Story = StoryObj; - -export const Basic: Story = { - args: { - type: undefined, - createNewIcon: undefined, - selected: undefined, - disabled: undefined, - }, -}; -export const typeGray: Story = { - args: { - type: "tabGray", - createNewIcon: undefined, - selected: undefined, - disabled: undefined, - }, -}; -export const typeWhite: Story = { - args: { - type: "tabWhite", - createNewIcon: undefined, - selected: undefined, - disabled: undefined, - }, -}; -export const createNewIcon: Story = { - args: { - type: undefined, - createNewIcon: true, - selected: undefined, - disabled: undefined, - }, -}; - -export const list: Story = { - render: (args) => - html`
- - - -
`, -}; - -export const All: Story = { - render: (args) => html` -
-
-

type:Gray

-
- -
-
-
-

type:White

-
- -
-
-
-

Create New Icon

-
- -
-
-
-

List

-
-
- - - -
-
-
-
- `, -}; From 9aac7637b9b160f32ac07b03c07f7de05e8c4283 Mon Sep 17 00:00:00 2001 From: "hazuki.okuda" Date: Fri, 8 Nov 2024 10:48:19 +0900 Subject: [PATCH 24/30] =?UTF-8?q?tab.css=E6=B6=88=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/tab/tab.css | 160 ------------------------------------- 1 file changed, 160 deletions(-) delete mode 100644 src/components/tab/tab.css diff --git a/src/components/tab/tab.css b/src/components/tab/tab.css deleted file mode 100644 index ad21458..0000000 --- a/src/components/tab/tab.css +++ /dev/null @@ -1,160 +0,0 @@ -:host { - --icon-color: var(--color-semantic-text-button-outline-default); - --padding-inline: 16px; - - display: inline-block; - min-width: 0; - max-width: 100%; -} - -.tabList{ - display: flex; - gap: 8px -} - -.spds__tab { - outline: none; - font: inherit; - background: none; - display: inline-flex; - min-width: 80px; - padding: 2px 16px; - justify-content: center; - align-items: center; - color: var(--color-semantic-text-regular); - font-size:14px; - border-radius: 14px; - min-height: 28px; - - &:hover{ - cursor:pointer; - } - - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); - } - - &.-selected{ - border: 1px solid var(--color-semantic-border-selected); - background-color: var(--color-semantic-surface-selected); - color: var(--color-semantic-text-inverse); - - --icon-color: var(--color-semantic-text-button-selected); - - font-weight: bold; - - &:hover{ - border: 1px solid var(--color-semantic-surface-selected-hover); - background-color: var(--color-semantic-surface-selected-hover); - } - - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - - --icon-color: var(--color-semantic-text-disabled); - - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - font-weight: normal; - } - } - - &.-gray{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - - &:hover{ - background-color: var(--color-semantic-surface-regular-4); - } - - &.-selected { - border: 1px solid var(--color-semantic-border-selected); - background-color: var(--color-semantic-surface-selected); - color: var(--color-semantic-text-inverse); - - &:hover { - border: 1px solid var(--color-semantic-surface-selected-hover); - background-color: var(--color-semantic-surface-selected-hover); - } - - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); - } - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); - } - } - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); - } - } - - &.-white{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-1); - - &:hover{ - background-color: var(--color-semantic-surface-regular-3); - } - &.-selected { - border: 1px solid var(--color-semantic-border-selected); - background-color: var(--color-semantic-surface-selected); - color: var(--color-semantic-text-inverse); - &:hover { - border: 1px solid var(--color-semantic-surface-selected-hover); - background-color: var(--color-semantic-surface-selected-hover); - } - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); - } - } - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - --icon-color: var(--color-semantic-text-disabled); - } - } - - &:focus-visible{ - outline: canvastext solid 3px; - box-shadow: canvas 0 0 0 5px; - outline-offset: 1px; - background-color: var(--color-semantic-surface-regular-4); - } -} - - - - - - - - - - - - - From 84810e972ab0daae7c59f321651b1ed9e60bbfce Mon Sep 17 00:00:00 2001 From: "hazuki.okuda" Date: Fri, 8 Nov 2024 10:53:48 +0900 Subject: [PATCH 25/30] =?UTF-8?q?dist=E3=81=AE=E4=B8=AD=E3=82=92Push?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/components/button/button.css | 5 +- dist/components/checkbox/checkbox-list.css | 43 +++++++ dist/components/checkbox/checkbox-text.css | 41 +++++++ dist/components/checkbox/checkbox.css | 17 +++ dist/components/checkbox/checkmark.css | 51 +++++++++ dist/components/foundation.css | 16 +++ dist/components/icon/icon.css | 22 ++++ .../radio/radio-button-text-group.css | 107 ++++++++++++++++++ .../segmentedControl/segmented-control.css | 81 +++++++++++++ dist/src/index.d.ts | 1 - dist/src/index.d.ts.map | 2 +- dist/src/index.js | 1 - 12 files changed, 380 insertions(+), 7 deletions(-) create mode 100644 dist/components/checkbox/checkbox-list.css create mode 100644 dist/components/checkbox/checkbox-text.css create mode 100644 dist/components/checkbox/checkbox.css create mode 100644 dist/components/checkbox/checkmark.css create mode 100644 dist/components/foundation.css create mode 100644 dist/components/icon/icon.css create mode 100644 dist/components/radio/radio-button-text-group.css create mode 100644 dist/components/segmentedControl/segmented-control.css diff --git a/dist/components/button/button.css b/dist/components/button/button.css index 3f1cc87..73390b9 100644 --- a/dist/components/button/button.css +++ b/dist/components/button/button.css @@ -3,7 +3,6 @@ --padding-inline: 16px; display: inline-block; - min-width: 0; max-width: 100%; } @@ -17,7 +16,7 @@ border: 1px solid transparent; background-color: transparent; min-height: 28px; - max-width: calc(100% - var(--padding-inline)*2); + max-width: 100%; padding-inline: var(--padding-inline); position: relative; overflow: hidden; @@ -25,11 +24,9 @@ } .base__text { - min-width: 0; font-size: 10px; font-weight: bold; line-height: 1; - overflow-wrap : break-word; } .type__default.appearance__outline { diff --git a/dist/components/checkbox/checkbox-list.css b/dist/components/checkbox/checkbox-list.css new file mode 100644 index 0000000..068fb2c --- /dev/null +++ b/dist/components/checkbox/checkbox-list.css @@ -0,0 +1,43 @@ +:host { + display: block; +} + +.base { + display: flex; + align-items: flex-start; + justify-content: flex-start; + padding-block: 1px; + cursor: pointer; +} + +.base:has(input:disabled) { + cursor: not-allowed; +} + +.base:has(.input:focus-visible) { + outline: 2px solid var(--color-semantic-text-regular); + outline-offset: 2px; +} + +.base:has(input):not(:has(input:disabled)):hover { + background: var(--color-semantic-surface-regular-3); +} + +.base:has(input:checked):not(:has(input:disabled)) { + background: var(--color-semantic-surface-checked); +} + +.base:has(input:checked):not(:has(input:disabled)):hover { + background: var(--color-semantic-surface-checked-hover); +} + +.text { + padding-block-start: 2.5px; + color: var(--color-semantic-text-regular); + font-size: 12px; + line-height: 1.6; +} + +.base:has(input:disabled) .text { + color: var(--color-semantic-text-disabled); +} diff --git a/dist/components/checkbox/checkbox-text.css b/dist/components/checkbox/checkbox-text.css new file mode 100644 index 0000000..4ba80a5 --- /dev/null +++ b/dist/components/checkbox/checkbox-text.css @@ -0,0 +1,41 @@ +:host { + display: inline-block; + max-width: 100%; +} + +.base { + display: inline-flex; + align-items: flex-start; + justify-content: flex-start; + max-width: 100%; + cursor: pointer; +} + +.base:has(.input:focus-visible) { + outline: 2px solid var(--color-semantic-text-regular); + outline-offset: 2px; +} + +.base:has(.input:disabled) { + cursor: not-allowed; +} + +.text { + padding-block-start: 2.5px; + color: var(--color-semantic-text-regular); + font-size: 12px; + line-height: 1.6; +} + +.base:has(.input:disabled) .text { + color: var(--color-semantic-text-disabled); +} + +.base:hover .checkmark:has(:not(.input:disabled))::before { + background-color: var(--color-semantic-surface-regular-3); +} + +.base:hover .checkmark:has(:is(.input:checked, .input:indeterminate)):has(:not(.input:disabled))::before{ + background-color: var(--color-semantic-surface-selected-hover); + border-color: var(--color-semantic-border-selected-hover); +} \ No newline at end of file diff --git a/dist/components/checkbox/checkbox.css b/dist/components/checkbox/checkbox.css new file mode 100644 index 0000000..0d55164 --- /dev/null +++ b/dist/components/checkbox/checkbox.css @@ -0,0 +1,17 @@ +:host { + display: inline-block; +} + +.base:has(.input:focus-visible) { + outline: 2px solid var(--color-semantic-text-regular); + outline-offset: 2px; +} + +.base:hover .checkmark:has(:not(.input:disabled))::before { + background-color: var(--color-semantic-surface-regular-3); +} + +.base:hover .checkmark:has(:is(.input:checked, .input:indeterminate)):has(:not(.input:disabled))::before{ + background-color: var(--color-semantic-surface-selected-hover); + border-color: var(--color-semantic-border-selected-hover); +} diff --git a/dist/components/checkbox/checkmark.css b/dist/components/checkbox/checkmark.css new file mode 100644 index 0000000..760e831 --- /dev/null +++ b/dist/components/checkbox/checkmark.css @@ -0,0 +1,51 @@ +.checkmark { + flex-grow: 0; + flex-shrink: 0; + display: inline-flex; + padding-block: 4px; + padding-inline: 4px; + cursor: pointer; +} + +.checkmark::before { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + background: var(--color-semantic-surface-regular-1) 50% 50% no-repeat; + border: 1px solid var(--color-semantic-border-check-unchecked); + border-radius: 2px; +} + +.checkmark:has(.input:focus-visible)::before { + border-color: var(--color-semantic-border-focus); + box-shadow: 0 0 0 3px var(--color-semantic-highlight-focus-ring-default); +} + +.checkmark:has(:is(.input:checked, .input:indeterminate))::before { + background-color: var(--color-semantic-surface-selected); + border-color: var(--color-semantic-border-selected); +} + +.checkmark:has(.input:checked)::before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20d%3D%22m1%203%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); +} + +.checkmark:has(.input:indeterminate)::before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h8v2H0z%22%2F%3E%3C%2Fsvg%3E"); +} + +.checkmark:has(.input:disabled) { + cursor: not-allowed; +} + +.checkmark:has(:is(.input:disabled))::before { + background-color: var(--color-semantic-surface-check-disabled); + border-color: var(--color-semantic-border-regular); +} + +.checkmark .input { + position: absolute; + z-index: -1; + opacity: 0; +} diff --git a/dist/components/foundation.css b/dist/components/foundation.css new file mode 100644 index 0000000..6bcd7f4 --- /dev/null +++ b/dist/components/foundation.css @@ -0,0 +1,16 @@ +:host, * { + overflow-wrap: break-word; + min-width: 0; +} + +:host { + font-family: var(--font-ja); +} + +:host:lang(zh) { + font-family: var(--font-zh); +} + +button { + box-sizing: border-box; +} \ No newline at end of file diff --git a/dist/components/icon/icon.css b/dist/components/icon/icon.css new file mode 100644 index 0000000..a4533d5 --- /dev/null +++ b/dist/components/icon/icon.css @@ -0,0 +1,22 @@ +:host { + flex-grow: 0; + flex-shrink: 0; + display: inline-block; + line-height: 0; + vertical-align: middle; +} + +.icon { + display: inline-block; + fill: var(--icon-color, var(--color-primitive-neutral-100)); +} + +.size__small { + width: 16px; + height: 16px; +} + +.size__medium { + width: 24px; + height: 24px; +} \ No newline at end of file diff --git a/dist/components/radio/radio-button-text-group.css b/dist/components/radio/radio-button-text-group.css new file mode 100644 index 0000000..4769a8d --- /dev/null +++ b/dist/components/radio/radio-button-text-group.css @@ -0,0 +1,107 @@ +:host { + display: inline-block; + max-width: 100%; +} + +.base { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.base:has(:focus-visible) { + outline: auto; +} + +.base.horizontal { + flex-direction: row; +} + +.base.vertical { + flex-direction: column; +} + +.item { + display: inline-flex; + justify-content: flex-start; + align-items: flex-start; +} + +.text { + color: var(--color-semantic-text-regular); + font-size: 12px; + line-height: 1.6; + padding-block: 2.5px; + cursor: pointer; +} + +.input { + position: absolute; + left: 0; + top: 0; + opacity: 0; + width: 100%; + height: 100%; + cursor: pointer; +} + +.radio { + position: relative; + flex-grow: 0; + flex-shrink: 0; + display: inline-flex; + padding-block: 4px; + padding-inline: 4px; +} + +.radio::before { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + background: var(--color-semantic-surface-regular-1) 50% 50% no-repeat; + border: 1px solid var(--color-semantic-border-check-unchecked); + border-radius: 50%; +} + +.radio:has(.input:focus-visible)::before { + outline: auto; + outline-offset: 4px; + border-color: var(--color-semantic-border-focus); + box-shadow: 0 0 0 3px var(--color-semantic-highlight-focus-ring-default); +} + +.radio:has(.input:checked)::before { + background-color: var(--color-semantic-surface-regular-1); + border-width: 4px; +} + +.radio:has(.input:checked:not(:disabled))::before { + border-color: var(--color-semantic-border-selected); +} + +.item:has(.input:disabled) :is(.input, .text) { + cursor: not-allowed; +} + +.item:has(.input:disabled) .text { + color: var(--color-semantic-text-disabled); +} + +.item .radio:has(.input:disabled)::before { + background-color: var(--color-semantic-surface-check-disabled); + border-color: var(--color-semantic-border-regular); +} + +.item .radio:has(.input:checked:disabled)::before { + background-color: var(--color-semantic-surface-regular-1); +} + +.item:has(:is(.input:hover, .text:hover)):not(:has(:is(.input:checked, .input:disabled))) .radio::before { + background-color: var(--color-semantic-surface-regular-3); +} + +.item:has(.input:checked:hover:not(:disabled)) .radio::before, +.item:has(.input:checked:not(:disabled)):has(.text:hover) .radio::before { + border-color: var(--color-semantic-border-selected-hover); +} \ No newline at end of file diff --git a/dist/components/segmentedControl/segmented-control.css b/dist/components/segmentedControl/segmented-control.css new file mode 100644 index 0000000..9859889 --- /dev/null +++ b/dist/components/segmentedControl/segmented-control.css @@ -0,0 +1,81 @@ +:host { + display: inline-block; + max-width: 100%; + line-height: 0; + vertical-align: middle; +} + +.base { + display: inline-flex; + max-width: 100%; +} + +.item { + flex: 1 0 80px; + position: relative; + display: flex; + align-items: stretch; + min-width: 80px; +} + +.radio { + position: absolute; + z-index: -1; + width: 100%; + height: 100%; +} + +.input { + width: 100%; + height: 100%; + opacity: 0; +} + +.text { + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; + padding-block: 8px; + padding-inline: 8px; + background-color: var(--color-semantic-surface-regular-2); + border: 1px solid var(--color-semantic-border-regular); + border-right: none; + color: var(--color-semantic-text-weak); + font-size: 10px; + line-height: 1.6; + text-align: center; +} + +.text:hover { + background-color: var(--color-semantic-surface-regular-4); +} + +.item:first-child .text { + border-radius: 5px 0 0 5px; +} + +.item:last-child .text { + border-radius: 0 5px 5px 0; + border-right: 1px solid var(--color-semantic-border-regular); +} + +.item:has(.input:focus-visible) .text { + outline: auto; + outline-offset: -4px; + background-color: var(--color-semantic-surface-regular-4); +} + +.item:has(.input:checked) .text { + background-color: var(--color-semantic-surface-selected); + border-color: var(--color-semantic-border-selected); + color: var(--color-semantic-text-inverse); + font-weight: bold; + cursor: default; +} + +.item:has(.input:disabled) .text { + background-color: var(--color-semantic-surface-regular-2); + color: var(--color-semantic-text-disabled); + cursor: not-allowed; +} diff --git a/dist/src/index.d.ts b/dist/src/index.d.ts index 4292fac..45caa6e 100644 --- a/dist/src/index.d.ts +++ b/dist/src/index.d.ts @@ -4,5 +4,4 @@ export { SpCheckboxText } from "./components/checkbox/sp-checkbox-text"; export { SpCheckboxList } from "./components/checkbox/sp-checkbox-list"; export { SpIcon } from "./components/icon/sp-icon"; export { SpRadioButtonTextGroup } from "./components/radio/sp-radio-button-text-group"; -export { SpTab } from "./components/tab/sp-tab"; //# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/dist/src/index.d.ts.map b/dist/src/index.d.ts.map index 15a223f..17ac092 100644 --- a/dist/src/index.d.ts.map +++ b/dist/src/index.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC"} \ No newline at end of file +{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC"} \ No newline at end of file diff --git a/dist/src/index.js b/dist/src/index.js index 5c52c9b..483aed7 100644 --- a/dist/src/index.js +++ b/dist/src/index.js @@ -4,4 +4,3 @@ export { SpCheckboxText } from "./components/checkbox/sp-checkbox-text"; export { SpCheckboxList } from "./components/checkbox/sp-checkbox-list"; export { SpIcon } from "./components/icon/sp-icon"; export { SpRadioButtonTextGroup } from "./components/radio/sp-radio-button-text-group"; -export { SpTab } from "./components/tab/sp-tab"; From 5de2a65fbc59371647a7c0cbb4449cacb53a1be5 Mon Sep 17 00:00:00 2001 From: oki07 Date: Sat, 9 Nov 2024 04:03:35 +0900 Subject: [PATCH 26/30] v0.2.3 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4de9a8c..f6b3837 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@sp-design/components-web-components", - "version": "0.2.2", + "version": "0.2.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@sp-design/components-web-components", - "version": "0.2.2", + "version": "0.2.3", "license": "ISC", "dependencies": { "@sp-design/token": "git+https://github.com/uzabase/sp-design-token.git#semver:^8.0.0", diff --git a/package.json b/package.json index e120713..e3f2360 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@sp-design/components-web-components", "private": true, - "version": "0.2.2", + "version": "0.2.3", "description": "", "main": "dist/index.js", "types": "dist/index.d.ts", From 9f508d38c90e50fa05c1403080a783f568e06bee Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Wed, 13 Nov 2024 23:40:53 +0900 Subject: [PATCH 27/30] =?UTF-8?q?=E3=83=A6=E3=83=8B=E3=83=83=E3=83=88?= =?UTF-8?q?=E3=83=86=E3=82=B9=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sp-definition-list-dd.test.ts | 36 ++++++++++++++++ .../sp-definition-list-dt.test.ts | 36 ++++++++++++++++ .../definitionList/sp-definition-list.test.ts | 41 +++++++++++++++++++ 3 files changed, 113 insertions(+) create mode 100644 tests/definitionList/sp-definition-list-dd.test.ts create mode 100644 tests/definitionList/sp-definition-list-dt.test.ts create mode 100644 tests/definitionList/sp-definition-list.test.ts diff --git a/tests/definitionList/sp-definition-list-dd.test.ts b/tests/definitionList/sp-definition-list-dd.test.ts new file mode 100644 index 0000000..ed034f6 --- /dev/null +++ b/tests/definitionList/sp-definition-list-dd.test.ts @@ -0,0 +1,36 @@ +import { describe, expect, test } from "vitest"; +import "../../src/components/button/sp-button"; +import { SpDefinitionListDd } from "../../src/components/definitionList/sp-definition-list-dd"; + +function getSpDefinitionListDd() { + return document.querySelector("sp-definition-list-dd") as SpDefinitionListDd; +} + +describe("sp-definition-list-dd", () => { + describe("小要素", () => { + test("小要素に文字列を受け取ることができる", async () => { + document.body.innerHTML = + "Description"; + + const definitionList = getSpDefinitionListDd(); + expect(definitionList.textContent).toBe("Description"); + }); + + test("小要素にbrタグを受け取った時、改行する", async () => { + document.body.innerHTML = + "Description
Description"; + + const definitionList = getSpDefinitionListDd(); + expect(definitionList.innerHTML).toBe("Description
Description"); + expect(definitionList.innerText).toBe(`DescriptionDescription`); + }); + + test("小要素に何も入れない場合、何も表示されない", async () => { + document.body.innerHTML = + ""; + + const definitionList = getSpDefinitionListDd(); + expect(definitionList.textContent).toBe(""); + }); + }); +}); diff --git a/tests/definitionList/sp-definition-list-dt.test.ts b/tests/definitionList/sp-definition-list-dt.test.ts new file mode 100644 index 0000000..74e3a89 --- /dev/null +++ b/tests/definitionList/sp-definition-list-dt.test.ts @@ -0,0 +1,36 @@ +import { describe, expect, test } from "vitest"; +import "../../src/components/button/sp-button"; +import { SpDefinitionListDt } from "../../src/components/definitionList/sp-definition-list-dt"; + +function getSpDefinitionListDt() { + return document.querySelector("sp-definition-list-dt") as SpDefinitionListDt; +} + +describe("sp-definition-list-dt", () => { + describe("小要素", () => { + test("小要素に文字列を受け取ることができる", async () => { + document.body.innerHTML = + "Term"; + + const definitionList = getSpDefinitionListDt(); + expect(definitionList.textContent).toBe("Term"); + }); + + test("小要素にbrタグを受け取った時、改行する", async () => { + document.body.innerHTML = + "Term
Term"; + + const definitionList = getSpDefinitionListDt(); + expect(definitionList.innerHTML).toBe("Term
Term"); + expect(definitionList.innerText).toBe(`TermTerm`); + }); + + test("小要素に何も入れない場合、何も表示されない", async () => { + document.body.innerHTML = + ""; + + const definitionList = getSpDefinitionListDt(); + expect(definitionList.textContent).toBe(""); + }); + }); +}); diff --git a/tests/definitionList/sp-definition-list.test.ts b/tests/definitionList/sp-definition-list.test.ts new file mode 100644 index 0000000..7eaa63e --- /dev/null +++ b/tests/definitionList/sp-definition-list.test.ts @@ -0,0 +1,41 @@ +import { describe, expect, test } from "vitest"; +import "../../src/components/button/sp-button"; +import { SpDefinitionList } from "../../src/components/definitionList/sp-definition-list"; + +function getSpDefinitionList() { + return document.querySelector("sp-definition-list") as SpDefinitionList; +} + +describe("sp-definition-list", () => { + describe("小要素", () => { + test("小要素にsp-definition-list-dtとsp-definition-list-ddを複数入れることができる", async () => { + document.body.innerHTML = ` + + Term1 + Description1 + Term2 + Description2 + `; + + const definitionList = getSpDefinitionList(); + + const dtElements = definitionList.querySelectorAll( + "sp-definition-list-dt", + ); + const ddElements = definitionList.querySelectorAll( + "sp-definition-list-dd", + ); + + expect(dtElements.length).toBe(2); + expect(ddElements.length).toBe(2); + }); + + test("小要素に何も入れない場合、何も表示されない", async () => { + document.body.innerHTML = ""; + + const definitionList = getSpDefinitionList(); + + expect(definitionList.children.length).toBe(0); + }); + }); +}); From 534ad2a5610f40c0a3c2a1240ea0b301833a5520 Mon Sep 17 00:00:00 2001 From: oki07 Date: Thu, 14 Nov 2024 23:54:01 +0900 Subject: [PATCH 28/30] =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?= =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE=E5=86=85=E9=83=A8=E6=A7=8B?= =?UTF-8?q?=E9=80=A0=E3=81=AB=E5=BC=B7=E3=81=8F=E4=BE=9D=E5=AD=98=E3=81=99?= =?UTF-8?q?=E3=82=8B=E3=83=86=E3=82=B9=E3=83=88=E3=81=AE=E6=96=87=E7=AB=A0?= =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index cbbeaa7..12fdedb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -61,7 +61,7 @@ TODO: コンポーネントのインタラクティブな機能には、イベ - コンポーネントの責務以外に対するテスト - 例えば、テスト対象となるコンポーネントが、内部で別のコンポーネントを利用している場合、その内部コンポーネントの責務に対するテストは避けてください。また、ブラウザの仕様（スクロールやリサイズなど）に依存するテストも避けてください。 - コンポーネントの内部構造に強く依存するテスト - - 例えば、DOMの構造をチェックするテストは避けてください。コンポーネントの内部構造はリファクタリングなどで簡単に変更される可能性があり、その度にテストを修正する必要が生じます。振る舞いが変わらない限り、テストを修正する必要がないことが望ましいです。 + - 例えば、DOMの構造を過度にチェックするテストは避けてください。コンポーネントの内部構造はリファクタリングなどで簡単に変更される可能性があり、その度にテストを修正する必要が生じます。ただし、コンポーネントの振る舞いを実現するために不可欠なHTML要素については、これらがコンポーネントの品質に大きな影響を与えるため、適切にテストすることが重要です。 ## CI From 0cbc3b0c08662d97d91a1c9a5c78ba64a0a856f2 Mon Sep 17 00:00:00 2001 From: Ittetsu Sato Date: Mon, 18 Nov 2024 08:44:41 +0900 Subject: [PATCH 29/30] =?UTF-8?q?v0.2.4=20(feat/definition-list=E3=81=AEve?= =?UTF-8?q?rsion=E4=B8=8A=E3=81=92=E5=BF=98=E3=82=8C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e3f2360..b3feb58 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@sp-design/components-web-components", "private": true, - "version": "0.2.3", + "version": "0.2.4", "description": "", "main": "dist/index.js", "types": "dist/index.d.ts", From 0e2afd3517360b103ad673842ad21ef80ca9687f Mon Sep 17 00:00:00 2001 From: oki07 Date: Sun, 24 Nov 2024 17:44:22 +0900 Subject: [PATCH 30/30] =?UTF-8?q?dist=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E3=81=AE=E4=B8=AD=E8=BA=AB=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/components/button/button.css | 238 ------------------ .../components/button/sp-button.d.ts | 0 dist/components/button/sp-button.d.ts.map | 1 + dist/{src => }/components/button/sp-button.js | 0 dist/components/checkbox/checkbox-list.css | 43 ---- dist/components/checkbox/checkbox-text.css | 41 --- dist/components/checkbox/checkbox.css | 17 -- dist/components/checkbox/checkmark.css | 51 ---- .../components/checkbox/sp-checkbox-list.d.ts | 0 .../checkbox/sp-checkbox-list.d.ts.map | 1 + .../components/checkbox/sp-checkbox-list.js | 0 .../components/checkbox/sp-checkbox-text.d.ts | 0 .../checkbox/sp-checkbox-text.d.ts.map | 1 + .../components/checkbox/sp-checkbox-text.js | 0 .../components/checkbox/sp-checkbox.d.ts | 0 dist/components/checkbox/sp-checkbox.d.ts.map | 1 + .../components/checkbox/sp-checkbox.js | 0 .../definitionList/sp-definition-list-dd.d.ts | 11 + .../sp-definition-list-dd.d.ts.map | 1 + .../definitionList/sp-definition-list-dd.js | 33 +++ .../definitionList/sp-definition-list-dt.d.ts | 11 + .../sp-definition-list-dt.d.ts.map | 1 + .../definitionList/sp-definition-list-dt.js | 33 +++ .../definitionList/sp-definition-list.d.ts | 11 + .../sp-definition-list.d.ts.map | 1 + .../definitionList/sp-definition-list.js | 34 +++ dist/components/foundation.css | 16 -- dist/components/icon/icon.css | 22 -- dist/{src => }/components/icon/icons.d.ts | 0 dist/components/icon/icons.d.ts.map | 1 + dist/{src => }/components/icon/icons.js | 0 dist/{src => }/components/icon/sp-icon.d.ts | 0 dist/components/icon/sp-icon.d.ts.map | 1 + dist/{src => }/components/icon/sp-icon.js | 0 .../radio/radio-button-text-group.css | 107 -------- .../radio/sp-radio-button-text-group.d.ts | 0 .../radio/sp-radio-button-text-group.d.ts.map | 1 + .../radio/sp-radio-button-text-group.js | 0 .../segmentedControl/segmented-control.css | 81 ------ .../sp-segmented-control.d.ts | 0 .../sp-segmented-control.d.ts.map | 1 + .../segmentedControl/sp-segmented-control.js | 0 dist/{src => }/index.d.ts | 0 dist/index.d.ts.map | 1 + dist/{src => }/index.js | 0 dist/src/components/button/sp-button.d.ts.map | 1 - .../checkbox/sp-checkbox-list.d.ts.map | 1 - .../checkbox/sp-checkbox-text.d.ts.map | 1 - .../components/checkbox/sp-checkbox.d.ts.map | 1 - dist/src/components/icon/icons.d.ts.map | 1 - dist/src/components/icon/sp-icon.d.ts.map | 1 - .../radio/sp-radio-button-text-group.d.ts.map | 1 - .../sp-segmented-control.d.ts.map | 1 - dist/src/components/tab/sp-tab.d.ts | 26 -- dist/src/components/tab/sp-tab.d.ts.map | 1 - dist/src/components/tab/sp-tab.js | 133 ---------- dist/src/index.d.ts.map | 1 - dist/vitest.config.d.ts | 3 - dist/vitest.config.d.ts.map | 1 - dist/vitest.config.js | 6 - tsconfig-build.json | 2 +- 61 files changed, 146 insertions(+), 796 deletions(-) delete mode 100644 dist/components/button/button.css rename dist/{src => }/components/button/sp-button.d.ts (100%) create mode 100644 dist/components/button/sp-button.d.ts.map rename dist/{src => }/components/button/sp-button.js (100%) delete mode 100644 dist/components/checkbox/checkbox-list.css delete mode 100644 dist/components/checkbox/checkbox-text.css delete mode 100644 dist/components/checkbox/checkbox.css delete mode 100644 dist/components/checkbox/checkmark.css rename dist/{src => }/components/checkbox/sp-checkbox-list.d.ts (100%) create mode 100644 dist/components/checkbox/sp-checkbox-list.d.ts.map rename dist/{src => }/components/checkbox/sp-checkbox-list.js (100%) rename dist/{src => }/components/checkbox/sp-checkbox-text.d.ts (100%) create mode 100644 dist/components/checkbox/sp-checkbox-text.d.ts.map rename dist/{src => }/components/checkbox/sp-checkbox-text.js (100%) rename dist/{src => }/components/checkbox/sp-checkbox.d.ts (100%) create mode 100644 dist/components/checkbox/sp-checkbox.d.ts.map rename dist/{src => }/components/checkbox/sp-checkbox.js (100%) create mode 100644 dist/components/definitionList/sp-definition-list-dd.d.ts create mode 100644 dist/components/definitionList/sp-definition-list-dd.d.ts.map create mode 100644 dist/components/definitionList/sp-definition-list-dd.js create mode 100644 dist/components/definitionList/sp-definition-list-dt.d.ts create mode 100644 dist/components/definitionList/sp-definition-list-dt.d.ts.map create mode 100644 dist/components/definitionList/sp-definition-list-dt.js create mode 100644 dist/components/definitionList/sp-definition-list.d.ts create mode 100644 dist/components/definitionList/sp-definition-list.d.ts.map create mode 100644 dist/components/definitionList/sp-definition-list.js delete mode 100644 dist/components/foundation.css delete mode 100644 dist/components/icon/icon.css rename dist/{src => }/components/icon/icons.d.ts (100%) create mode 100644 dist/components/icon/icons.d.ts.map rename dist/{src => }/components/icon/icons.js (100%) rename dist/{src => }/components/icon/sp-icon.d.ts (100%) create mode 100644 dist/components/icon/sp-icon.d.ts.map rename dist/{src => }/components/icon/sp-icon.js (100%) delete mode 100644 dist/components/radio/radio-button-text-group.css rename dist/{src => }/components/radio/sp-radio-button-text-group.d.ts (100%) create mode 100644 dist/components/radio/sp-radio-button-text-group.d.ts.map rename dist/{src => }/components/radio/sp-radio-button-text-group.js (100%) delete mode 100644 dist/components/segmentedControl/segmented-control.css rename dist/{src => }/components/segmentedControl/sp-segmented-control.d.ts (100%) create mode 100644 dist/components/segmentedControl/sp-segmented-control.d.ts.map rename dist/{src => }/components/segmentedControl/sp-segmented-control.js (100%) rename dist/{src => }/index.d.ts (100%) create mode 100644 dist/index.d.ts.map rename dist/{src => }/index.js (100%) delete mode 100644 dist/src/components/button/sp-button.d.ts.map delete mode 100644 dist/src/components/checkbox/sp-checkbox-list.d.ts.map delete mode 100644 dist/src/components/checkbox/sp-checkbox-text.d.ts.map delete mode 100644 dist/src/components/checkbox/sp-checkbox.d.ts.map delete mode 100644 dist/src/components/icon/icons.d.ts.map delete mode 100644 dist/src/components/icon/sp-icon.d.ts.map delete mode 100644 dist/src/components/radio/sp-radio-button-text-group.d.ts.map delete mode 100644 dist/src/components/segmentedControl/sp-segmented-control.d.ts.map delete mode 100644 dist/src/components/tab/sp-tab.d.ts delete mode 100644 dist/src/components/tab/sp-tab.d.ts.map delete mode 100644 dist/src/components/tab/sp-tab.js delete mode 100644 dist/src/index.d.ts.map delete mode 100644 dist/vitest.config.d.ts delete mode 100644 dist/vitest.config.d.ts.map delete mode 100644 dist/vitest.config.js diff --git a/dist/components/button/button.css b/dist/components/button/button.css deleted file mode 100644 index 73390b9..0000000 --- a/dist/components/button/button.css +++ /dev/null @@ -1,238 +0,0 @@ -:host { - --icon-color: var(--color-semantic-text-button-outline-default); - --padding-inline: 16px; - - display: inline-block; - max-width: 100%; -} - -.base { - display: inline-flex; - align-items: center; - justify-content: center; - column-gap: 4px; - color: var(--color-semantic-text-button-outline-default); - border-radius: 5px; - border: 1px solid transparent; - background-color: transparent; - min-height: 28px; - max-width: 100%; - padding-inline: var(--padding-inline); - position: relative; - overflow: hidden; - cursor: pointer; -} - -.base__text { - font-size: 10px; - font-weight: bold; - line-height: 1; -} - -.type__default.appearance__outline { - border-color: var(--color-semantic-border-button-outline-default); -} - -.type__default.appearance__outline:hover:not(:disabled) { - --icon-color: var(--color-semantic-text-button-outline-hover); - - border-color: var(--color-semantic-border-button-outline-hover); - color: var(--color-semantic-text-button-outline-hover); -} - -.type__default.appearance__outline:focus-visible:not(:is(:disabled, .isSelected)) { - --icon-color: var(--color-semantic-text-button-outline-focus); - - border-color: var(--color-semantic-border-button-outline-focus); - color: var(--color-semantic-text-button-outline-focus); -} - -.type__default.appearance__fill { - --icon-color: var(--color-semantic-text-button-fill-default); - - border-color: var(--color-semantic-border-button-fill-default); - background-color: var(--color-semantic-surface-button-fill-default); - color: var(--color-semantic-text-button-fill-default); -} - -.type__default.appearance__fill:hover:not(:disabled) { - border-color: var(--color-semantic-border-button-fill-hover); - background-color: var(--color-semantic-surface-button-fill-hover); -} - -.type__default.appearance__fill:focus-visible:not(:is(:disabled, .isSelected)) { - border-color: var(--color-semantic-border-button-fill-focus); - background-color: var(--color-semantic-surface-button-fill-focus); -} - -.type__default.appearance__text { - border-color: var(--color-semantic-border-button-text-default); - background-color: var(--color-semantic-surface-button-text-default); -} - -.type__default.appearance__text:hover:not(:disabled) { - border-color: var(--color-semantic-border-button-text-hover); - background-color: var(--color-semantic-surface-button-text-hover); -} - -.type__default.appearance__text:focus-visible:not(:is(:disabled, .isSelected)) { - border-color: var(--color-semantic-border-button-text-focus); - background-color: var(--color-semantic-surface-button-text-focus); -} - -.type__default.isSelected { - --icon-color: var(--color-semantic-text-button-selected); - - border-color: var(--color-semantic-border-button-selected); - background-color: var(--color-semantic-surface-button-selected); - color: var(--color-semantic-text-button-selected); -} - -.type__default.isSelected:hover:not(:disabled) { - --icon-color: var(--color-semantic-text-button-selected); - - border-color: var(--color-semantic-border-button-selected-hover); - background-color: var(--color-semantic-surface-button-selected-hover); - color: var(--color-semantic-text-button-selected); -} - -.type__destructive.appearance__outline { - --icon-color: var(--color-semantic-text-button-outline-destructive-default); - - border-color: var(--color-semantic-border-button-outline-destructive-default); - color: var(--color-semantic-text-button-outline-destructive-default); -} - -.type__destructive.appearance__outline:hover:not(:disabled) { - --icon-color: var(--color-semantic-text-button-outline-destructive-hover); - - border-color: var(--color-semantic-border-button-outline-destructive-hover); - color: var(--color-semantic-text-button-outline-destructive-hover); -} - -.type__destructive.appearance__outline:focus-visible:not(:disabled) { - --icon-color: var(--color-semantic-text-button-outline-destructive-focus); - - border-color: var(--color-semantic-border-button-outline-destructive-focus); - color: var(--color-semantic-text-button-outline-destructive-focus); -} - -.type__destructive.appearance__fill { - --icon-color: var(--color-semantic-text-button-fill-destructive-default); - - border-color: var(--color-semantic-border-button-fill-destructive-default); - background-color: var( - --color-semantic-surface-button-fill-destructive-default - ); - color: var(--color-semantic-text-button-fill-destructive-default); -} - -.type__destructive.appearance__fill:hover:not(:disabled) { - border-color: var(--color-semantic-border-button-fill-destructive-hover); - background-color: var(--color-semantic-surface-button-fill-destructive-hover); -} - -.type__destructive.appearance__fill:focus-visible:not(:disabled) { - border-color: var(--color-semantic-border-button-fill-destructive-focus); - background-color: var(--color-semantic-surface-button-fill-destructive-focus); -} - -.type__destructive.appearance__text { - --icon-color: var(--color-semantic-text-button-text-destructive-default); - - border-color: transparent; - background-color: transparent; - color: var(--color-semantic-text-button-text-destructive-default); -} - -.type__destructive.appearance__text:hover:not(:disabled) { - border-color: var(--color-semantic-border-button-text-destructive-hover); - background-color: var(--color-semantic-surface-button-text-destructive-hover); -} - -.type__destructive.appearance__text:focus-visible:not(:disabled) { - border-color: var(--color-semantic-border-button-text-destructive-focus); - background-color: var(--color-semantic-surface-button-text-destructive-focus); -} - -/* disabledとisLoadingにおいては、上記の詳細度と同等とするために:isを不可している */ -:is(.type__default, .type__destructive):disabled { - --icon-color: var(--color-semantic-text-button-disabled); - - border-color: var(--color-semantic-border-button-disabled); - background-color: var(--color-semantic-surface-button-disabled); - color: var(--color-semantic-text-button-disabled); - cursor: not-allowed; -} - -:is(.type__default, .type__destructive).isLoading { - border-color: var(--color-semantic-border-button-loading); - background-color: var(--color-semantic-surface-button-loading); -} - -:is(.type__default, .type__destructive).isLoading::before { - content: ""; - display: block; - background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAALEsAACxLAaU9lqkAAAMAUExURUdwTP///8jIyLi4uLGxsUdHR9LS0vHx8by8vKSkpNnZ2b6+vpSUlLe3t+Dg4N/f37Ozs/X19W5ubvj4+CMjI8/Pz+/v78bGxqampp+fnzIyMufn59HR0a+vr+Xl5dbW1tbW1sHBwezs7MLCwvDw8JCQkJubm6mpqZiYmO7u7rW1tdvb29/f32VlZfb29szMzPDw8Ovr65OTk/Dw8KGhoZ2dnYeHh/Ly8tfX19TU1Nzc3Pr6+qmpqcrKysnJyYqKioyMjIODg5KSkpeXl1tbW+bm5uvr66ysrL+/v46Ojvz8/CMjI8TExMjIyIODg4GBgYaGhisrK4+Pj6CgoDw8PM/Pz6enp+Li4hsbG0xMTK2trYmJiYSEhICAgI6OjoiIiJqamq+vrykpKa2trVRUVNPT04ODg2FhYcPDwxkZGVpaWlhYWCkpKTExMSYmJp2dnY2NjSUlJSMjIzs7O0xMTJubm3l5eb+/v6urqyMjI0RERCgoKKenp3Jycqmpqa6urnh4eG1tbUxMTHFxcWhoaMzMzEBAQEBAQLe3t1ZWVpiYmEpKSqqqqm1tbXR0dJWVlWVlZSEhIWFhYSMjI5iYmJCQkKysrIuLi4CAgGtrazk5OWtra3x8fHl5eVBQUFFRURwcHLm5uYWFhS8vL2ZmZlVVVVFRUaampszMzDg4OHd3dzU1NUZGRtfX13V1dYqKisnJyXh4eLm5uXJyckVFRZeXl3Jycp+fnzs7OzIyMh4eHkhISERERIODg8TExCkpKTY2NoqKioyMjJ2dnYiIiIWFhWNjY09baWKUV+SEe0xGWUVXdUpKSkRERFdXV3V1dU5OTkBAQFlZWWlpaXFxcWtrayEhIUxMTGVlZW1tbT4+Ph4eHi0tLS8vL3h4eGFhYV5eXisrK3p6ehoaGjc3NzU1NTMzMyYmJnx8fH5+flJSUlBQUDw8PEJCQjo6OmNjY3Nzc1xcXCkpKR8fHzk5ORwcHDExMVRUVCQkJGBgYCgoKGdnZ29vb1VVVXt7e1paWtg57TgAAADLdFJOUwABB4yc/lkEhrdLgdaQOUCYBx8JEGETcbLBIC9doTRUUX0lehzdyK7OIZVHPBAQZh4oDRm8xfEWTi1EC6pqaOrm+trR7zErpnTfDf52bvf+9G9tpN8ZFTf+EKXt9v7i7cpjjzw/IEtwEf6AUO/ffxjk/t+g4LavR2vvr0BSL5aNv19w399hf19rv1ofJN+AyN9Qj8Bz0KjoD5+Pj+BwzqDPLJfP7u+QQk1g7zBQJmA7PUA+nzBAYDBf7p+/wNhfUN+urauFxs/+0H/4BcBv2gAABJ1JREFUWMPtlWdck1cUxjESA0gihIjILkUNIywpDWAFSwpFbCvTCgqCQilQqXuvKo66V7F7t3bvvecnQIMiiBiCoCEGVAgyxGrPue9LBmRcPrcPP76c+3v+9znn3vvGxuZ/mZVoQ+r3ry1vfXIMz9nZhcMbrfvw0XVarfbm462tAIidHeJ6f4jLKOxL1/WnpJzTai8AYQgw3d/flUdpL1OplvWfMwS4IiAgwI8G8cvy7m4EIOHCTZyBCwDAHxbgFx7uF2Jt+4KWlm4gLIMWdADswB8DhCd6ePhbDOH+ZlNTExBuqVRsglYWMB0DJCZ6POTtwbHgf+riRQAAQdWPPZAZOAOA7QD98wTeHPP+3l4CaIEppPQfLTjsLrKxGQMZQmCEjN9bIAie52zOf+VKLxvhVtlSkeEaLzaMAQiCgydMEJjMIPr1MgAYQlnqyPXZfqQB8McECUxN8oW2y0AgGQpEpnbghLH+mCCH6JHL7/W0tSECMqSaG1Ims3+Qg4M0c8QAMnp6ekiG7zaYP6bYYOKXSn2lw5vY2XHtGhAA8YGli1Icg9v7+vr4DGvCvQMAhJBq+aoW4vbgH+drfBIrGjsYxAprbyWa2EHGETIaQYDIcLcG4EnR7unpOc4wwi65vJEgvrX+XD8i9okVEwsNius7O+WgxgyaD4YPsYeGnjSocTtRcvkuGkB0BdpDZ1boe1hSXV1NEHtpABx0PwDSX6ZnuNWozh/pvpknwfwISH8O67lcgthJB/gUzJNAa3SVH7iMPqQDFE4imvOzrrKyCtzw/yUdoHgOo5m6ShWr+XQAzr2sDAD18FdVT/vLcw8rXaGeFS1gPCtd4TQr2hbsUOPt9ICV6Nac1uylA2TaMXpYV3lFA7qq0ZTSAV4fS2S3W1d59SpR3zt0gDV8Ph8J+fqrjO6+f/r20AF2BwYGAoP/uf4x9YEdRTXFYienQBR/n640/21019TUltAAFtva2joBZKxBbU8NqrZWRgPY4mWLclprUCsl9rt3u56gCJCU7eWFjMUGRYkM3ODvkkms+bM2zyAEry1G5RJ0dymVyiPWAGunTZvxXFJ2tle+UVkiI/aBgWYrTWx0cwMCIJKyjBdKutA+0Nx8fYkl/z57e3sGsXHYikSmJPbrDW9tMu//ZlUkS9icNXytVMn4GxoGzXbx7H2TJ0dGIsHt3ZGrR4b8Z+qeF5qyRxxbNBUJkME+38S65G/Wf6aubv82E9sfTBBPBUIkZEiPMLWD8NCQ//zt29u/NkpxIu24o2OCGCJghvQs0y0KDw0ODqIfAGdvnNp6oGgT3KsTwqI/f4vPnfIgQ4AM6eXmhiTcwQQ4D/4bpxSKS+3t6sdmLYjKi4vPTQZCghgz/FFu/piEO5gGzkIABNxRqxfOWjA3J67y6WQmgnhRermliyJ5kW2ABbQvxARROZXQA0ZIEB+LsHLXt+1nAQqF4g60gAmi8iqZHhxXfWX9uQoPYAdkBJfa1SwgLh56mHIwLYLqmyf8YvtQB2oY4qNzo2AI8bnHKe1EH69+3xCQl5P8e9Eo7ESfvbx660sI+OmvN9I+Ga37P6V/ARSAhtS32QauAAAAAElFTkSuQmCC") no-repeat 50% 50%; - background-size: 16px 16px; - animation: 1s linear infinite loading; - transform-origin: center center; - width: 100%; - height: 100%; - z-index: 2; - position: absolute; - left: 0; - top: 0; - border-radius: 5px; -} - -@keyframes loading { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -:is(.type__default, .type__destructive).isLoading:hover { - cursor: not-allowed; - border-color: var(--color-semantic-border-button-loading); -} - -:is(.type__default, .type__destructive).isLoading .base__text { - visibility: hidden; -} - -:is(.type__default, .type__destructive).isLoading .base__icon { - visibility: hidden; -} - -.type__default.size__large { - --padding-inline: 24px; - - column-gap: 8px; - min-height: 32px; - font-size: 12px; -} - -.type__default.size__xLarge { - --padding-inline: 40px; - - column-gap: 8px; - min-height: 40px; - font-size: 12px; -} - -.size__width80 { - --padding-inline: 4px; - - width: 80px; -} - -.size__width160 { - --padding-inline: 4px; - - width: 160px; -} diff --git a/dist/src/components/button/sp-button.d.ts b/dist/components/button/sp-button.d.ts similarity index 100% rename from dist/src/components/button/sp-button.d.ts rename to dist/components/button/sp-button.d.ts diff --git a/dist/components/button/sp-button.d.ts.map b/dist/components/button/sp-button.d.ts.map new file mode 100644 index 0000000..c8619b3 --- /dev/null +++ b/dist/components/button/sp-button.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/sp-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAUjE,qBAAa,QAAS,SAAQ,QAAQ;;IAIpC,IAAI,IAAI,IAGM,MAAM,CADnB;IACD,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAUnB;IAED,MAAM,KAAK,kBAAkB,aAE5B;;IAgBD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CAqB1E;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"} \ No newline at end of file diff --git a/dist/src/components/button/sp-button.js b/dist/components/button/sp-button.js similarity index 100% rename from dist/src/components/button/sp-button.js rename to dist/components/button/sp-button.js diff --git a/dist/components/checkbox/checkbox-list.css b/dist/components/checkbox/checkbox-list.css deleted file mode 100644 index 068fb2c..0000000 --- a/dist/components/checkbox/checkbox-list.css +++ /dev/null @@ -1,43 +0,0 @@ -:host { - display: block; -} - -.base { - display: flex; - align-items: flex-start; - justify-content: flex-start; - padding-block: 1px; - cursor: pointer; -} - -.base:has(input:disabled) { - cursor: not-allowed; -} - -.base:has(.input:focus-visible) { - outline: 2px solid var(--color-semantic-text-regular); - outline-offset: 2px; -} - -.base:has(input):not(:has(input:disabled)):hover { - background: var(--color-semantic-surface-regular-3); -} - -.base:has(input:checked):not(:has(input:disabled)) { - background: var(--color-semantic-surface-checked); -} - -.base:has(input:checked):not(:has(input:disabled)):hover { - background: var(--color-semantic-surface-checked-hover); -} - -.text { - padding-block-start: 2.5px; - color: var(--color-semantic-text-regular); - font-size: 12px; - line-height: 1.6; -} - -.base:has(input:disabled) .text { - color: var(--color-semantic-text-disabled); -} diff --git a/dist/components/checkbox/checkbox-text.css b/dist/components/checkbox/checkbox-text.css deleted file mode 100644 index 4ba80a5..0000000 --- a/dist/components/checkbox/checkbox-text.css +++ /dev/null @@ -1,41 +0,0 @@ -:host { - display: inline-block; - max-width: 100%; -} - -.base { - display: inline-flex; - align-items: flex-start; - justify-content: flex-start; - max-width: 100%; - cursor: pointer; -} - -.base:has(.input:focus-visible) { - outline: 2px solid var(--color-semantic-text-regular); - outline-offset: 2px; -} - -.base:has(.input:disabled) { - cursor: not-allowed; -} - -.text { - padding-block-start: 2.5px; - color: var(--color-semantic-text-regular); - font-size: 12px; - line-height: 1.6; -} - -.base:has(.input:disabled) .text { - color: var(--color-semantic-text-disabled); -} - -.base:hover .checkmark:has(:not(.input:disabled))::before { - background-color: var(--color-semantic-surface-regular-3); -} - -.base:hover .checkmark:has(:is(.input:checked, .input:indeterminate)):has(:not(.input:disabled))::before{ - background-color: var(--color-semantic-surface-selected-hover); - border-color: var(--color-semantic-border-selected-hover); -} \ No newline at end of file diff --git a/dist/components/checkbox/checkbox.css b/dist/components/checkbox/checkbox.css deleted file mode 100644 index 0d55164..0000000 --- a/dist/components/checkbox/checkbox.css +++ /dev/null @@ -1,17 +0,0 @@ -:host { - display: inline-block; -} - -.base:has(.input:focus-visible) { - outline: 2px solid var(--color-semantic-text-regular); - outline-offset: 2px; -} - -.base:hover .checkmark:has(:not(.input:disabled))::before { - background-color: var(--color-semantic-surface-regular-3); -} - -.base:hover .checkmark:has(:is(.input:checked, .input:indeterminate)):has(:not(.input:disabled))::before{ - background-color: var(--color-semantic-surface-selected-hover); - border-color: var(--color-semantic-border-selected-hover); -} diff --git a/dist/components/checkbox/checkmark.css b/dist/components/checkbox/checkmark.css deleted file mode 100644 index 760e831..0000000 --- a/dist/components/checkbox/checkmark.css +++ /dev/null @@ -1,51 +0,0 @@ -.checkmark { - flex-grow: 0; - flex-shrink: 0; - display: inline-flex; - padding-block: 4px; - padding-inline: 4px; - cursor: pointer; -} - -.checkmark::before { - content: ''; - display: inline-block; - width: 16px; - height: 16px; - background: var(--color-semantic-surface-regular-1) 50% 50% no-repeat; - border: 1px solid var(--color-semantic-border-check-unchecked); - border-radius: 2px; -} - -.checkmark:has(.input:focus-visible)::before { - border-color: var(--color-semantic-border-focus); - box-shadow: 0 0 0 3px var(--color-semantic-highlight-focus-ring-default); -} - -.checkmark:has(:is(.input:checked, .input:indeterminate))::before { - background-color: var(--color-semantic-surface-selected); - border-color: var(--color-semantic-border-selected); -} - -.checkmark:has(.input:checked)::before { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20d%3D%22m1%203%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); -} - -.checkmark:has(.input:indeterminate)::before { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h8v2H0z%22%2F%3E%3C%2Fsvg%3E"); -} - -.checkmark:has(.input:disabled) { - cursor: not-allowed; -} - -.checkmark:has(:is(.input:disabled))::before { - background-color: var(--color-semantic-surface-check-disabled); - border-color: var(--color-semantic-border-regular); -} - -.checkmark .input { - position: absolute; - z-index: -1; - opacity: 0; -} diff --git a/dist/src/components/checkbox/sp-checkbox-list.d.ts b/dist/components/checkbox/sp-checkbox-list.d.ts similarity index 100% rename from dist/src/components/checkbox/sp-checkbox-list.d.ts rename to dist/components/checkbox/sp-checkbox-list.d.ts diff --git a/dist/components/checkbox/sp-checkbox-list.d.ts.map b/dist/components/checkbox/sp-checkbox-list.d.ts.map new file mode 100644 index 0000000..1fb3365 --- /dev/null +++ b/dist/components/checkbox/sp-checkbox-list.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-checkbox-list.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/sp-checkbox-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAWvE,qBAAa,cAAe,SAAQ,cAAc;;CAWjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"} \ No newline at end of file diff --git a/dist/src/components/checkbox/sp-checkbox-list.js b/dist/components/checkbox/sp-checkbox-list.js similarity index 100% rename from dist/src/components/checkbox/sp-checkbox-list.js rename to dist/components/checkbox/sp-checkbox-list.js diff --git a/dist/src/components/checkbox/sp-checkbox-text.d.ts b/dist/components/checkbox/sp-checkbox-text.d.ts similarity index 100% rename from dist/src/components/checkbox/sp-checkbox-text.d.ts rename to dist/components/checkbox/sp-checkbox-text.d.ts diff --git a/dist/components/checkbox/sp-checkbox-text.d.ts.map b/dist/components/checkbox/sp-checkbox-text.d.ts.map new file mode 100644 index 0000000..eda14d6 --- /dev/null +++ b/dist/components/checkbox/sp-checkbox-text.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-checkbox-text.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/sp-checkbox-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAWvE,qBAAa,cAAe,SAAQ,cAAc;;CAWjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"} \ No newline at end of file diff --git a/dist/src/components/checkbox/sp-checkbox-text.js b/dist/components/checkbox/sp-checkbox-text.js similarity index 100% rename from dist/src/components/checkbox/sp-checkbox-text.js rename to dist/components/checkbox/sp-checkbox-text.js diff --git a/dist/src/components/checkbox/sp-checkbox.d.ts b/dist/components/checkbox/sp-checkbox.d.ts similarity index 100% rename from dist/src/components/checkbox/sp-checkbox.d.ts rename to dist/components/checkbox/sp-checkbox.d.ts diff --git a/dist/components/checkbox/sp-checkbox.d.ts.map b/dist/components/checkbox/sp-checkbox.d.ts.map new file mode 100644 index 0000000..8a9721f --- /dev/null +++ b/dist/components/checkbox/sp-checkbox.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/sp-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAWnE,qBAAa,UAAW,SAAQ,UAAU;;CAWzC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"} \ No newline at end of file diff --git a/dist/src/components/checkbox/sp-checkbox.js b/dist/components/checkbox/sp-checkbox.js similarity index 100% rename from dist/src/components/checkbox/sp-checkbox.js rename to dist/components/checkbox/sp-checkbox.js diff --git a/dist/components/definitionList/sp-definition-list-dd.d.ts b/dist/components/definitionList/sp-definition-list-dd.d.ts new file mode 100644 index 0000000..65e9193 --- /dev/null +++ b/dist/components/definitionList/sp-definition-list-dd.d.ts @@ -0,0 +1,11 @@ +export declare class SpDefinitionListDd extends HTMLElement { + #private; + constructor(); + connectedCallback(): void; +} +declare global { + interface HTMLElementTagNameMap { + "sp-definition-list-dd": SpDefinitionListDd; + } +} +//# sourceMappingURL=sp-definition-list-dd.d.ts.map \ No newline at end of file diff --git a/dist/components/definitionList/sp-definition-list-dd.d.ts.map b/dist/components/definitionList/sp-definition-list-dd.d.ts.map new file mode 100644 index 0000000..037c506 --- /dev/null +++ b/dist/components/definitionList/sp-definition-list-dd.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-definition-list-dd.d.ts","sourceRoot":"","sources":["../../../src/components/definitionList/sp-definition-list-dd.ts"],"names":[],"mappings":"AAYA,qBAAa,kBAAmB,SAAQ,WAAW;;;IAQjD,iBAAiB;CASlB;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"} \ No newline at end of file diff --git a/dist/components/definitionList/sp-definition-list-dd.js b/dist/components/definitionList/sp-definition-list-dd.js new file mode 100644 index 0000000..f76146b --- /dev/null +++ b/dist/components/definitionList/sp-definition-list-dd.js @@ -0,0 +1,33 @@ +var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) { + if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); + if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); + return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); +}; +var _SpDefinitionListDd_ddElement; +// @ts-ignore +import resetStyle from "@acab/reset.css?inline" assert { type: "css" }; +// @ts-ignore +import foundationStyle from "../foundation.css?inline" assert { type: "css" }; +// @ts-ignore +import spDefinitionListDdStyle from "./sp-definition-list-dd.css?inline" assert { type: "css" }; +const styles = new CSSStyleSheet(); +styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListDdStyle}`); +export class SpDefinitionListDd extends HTMLElement { + constructor() { + super(); + _SpDefinitionListDd_ddElement.set(this, document.createElement("dd")); + this.attachShadow({ mode: "open" }); + } + connectedCallback() { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + __classPrivateFieldGet(this, _SpDefinitionListDd_ddElement, "f").classList.add("base"); + __classPrivateFieldGet(this, _SpDefinitionListDd_ddElement, "f").innerHTML = this.innerHTML; + this.shadowRoot.appendChild(__classPrivateFieldGet(this, _SpDefinitionListDd_ddElement, "f")); + } +} +_SpDefinitionListDd_ddElement = new WeakMap(); +customElements.get("sp-definition-list-dd") || + customElements.define("sp-definition-list-dd", SpDefinitionListDd); diff --git a/dist/components/definitionList/sp-definition-list-dt.d.ts b/dist/components/definitionList/sp-definition-list-dt.d.ts new file mode 100644 index 0000000..2d3dcfa --- /dev/null +++ b/dist/components/definitionList/sp-definition-list-dt.d.ts @@ -0,0 +1,11 @@ +export declare class SpDefinitionListDt extends HTMLElement { + #private; + constructor(); + connectedCallback(): void; +} +declare global { + interface HTMLElementTagNameMap { + "sp-definition-list-dt": SpDefinitionListDt; + } +} +//# sourceMappingURL=sp-definition-list-dt.d.ts.map \ No newline at end of file diff --git a/dist/components/definitionList/sp-definition-list-dt.d.ts.map b/dist/components/definitionList/sp-definition-list-dt.d.ts.map new file mode 100644 index 0000000..6d76fc4 --- /dev/null +++ b/dist/components/definitionList/sp-definition-list-dt.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-definition-list-dt.d.ts","sourceRoot":"","sources":["../../../src/components/definitionList/sp-definition-list-dt.ts"],"names":[],"mappings":"AAYA,qBAAa,kBAAmB,SAAQ,WAAW;;;IAQjD,iBAAiB;CASlB;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"} \ No newline at end of file diff --git a/dist/components/definitionList/sp-definition-list-dt.js b/dist/components/definitionList/sp-definition-list-dt.js new file mode 100644 index 0000000..f9c4e01 --- /dev/null +++ b/dist/components/definitionList/sp-definition-list-dt.js @@ -0,0 +1,33 @@ +var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) { + if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); + if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); + return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); +}; +var _SpDefinitionListDt_dtElement; +// @ts-ignore +import resetStyle from "@acab/reset.css?inline" assert { type: "css" }; +// @ts-ignore +import foundationStyle from "../foundation.css?inline" assert { type: "css" }; +// @ts-ignore +import spDefinitionListDtStyle from "./sp-definition-list-dt.css?inline" assert { type: "css" }; +const styles = new CSSStyleSheet(); +styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListDtStyle}`); +export class SpDefinitionListDt extends HTMLElement { + constructor() { + super(); + _SpDefinitionListDt_dtElement.set(this, document.createElement("dt")); + this.attachShadow({ mode: "open" }); + } + connectedCallback() { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + __classPrivateFieldGet(this, _SpDefinitionListDt_dtElement, "f").classList.add("base"); + __classPrivateFieldGet(this, _SpDefinitionListDt_dtElement, "f").innerHTML = this.innerHTML; + this.shadowRoot.appendChild(__classPrivateFieldGet(this, _SpDefinitionListDt_dtElement, "f")); + } +} +_SpDefinitionListDt_dtElement = new WeakMap(); +customElements.get("sp-definition-list-dt") || + customElements.define("sp-definition-list-dt", SpDefinitionListDt); diff --git a/dist/components/definitionList/sp-definition-list.d.ts b/dist/components/definitionList/sp-definition-list.d.ts new file mode 100644 index 0000000..6d09af1 --- /dev/null +++ b/dist/components/definitionList/sp-definition-list.d.ts @@ -0,0 +1,11 @@ +export declare class SpDefinitionList extends HTMLElement { + #private; + constructor(); + connectedCallback(): void; +} +declare global { + interface HTMLElementTagNameMap { + "sp-definition-list": SpDefinitionList; + } +} +//# sourceMappingURL=sp-definition-list.d.ts.map \ No newline at end of file diff --git a/dist/components/definitionList/sp-definition-list.d.ts.map b/dist/components/definitionList/sp-definition-list.d.ts.map new file mode 100644 index 0000000..cf3fc69 --- /dev/null +++ b/dist/components/definitionList/sp-definition-list.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-definition-list.d.ts","sourceRoot":"","sources":["../../../src/components/definitionList/sp-definition-list.ts"],"names":[],"mappings":"AAUA,qBAAa,gBAAiB,SAAQ,WAAW;;;IAS/C,iBAAiB;CASlB;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"} \ No newline at end of file diff --git a/dist/components/definitionList/sp-definition-list.js b/dist/components/definitionList/sp-definition-list.js new file mode 100644 index 0000000..702acc7 --- /dev/null +++ b/dist/components/definitionList/sp-definition-list.js @@ -0,0 +1,34 @@ +var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) { + if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); + if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); + return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); +}; +var _SpDefinitionList_dlElement, _SpDefinitionList_slotElement; +// @ts-ignore +import resetStyle from "@acab/reset.css?inline" assert { type: "css" }; +// @ts-ignore +import foundationStyle from "../foundation.css?inline" assert { type: "css" }; +// @ts-ignore +import spDefinitionListStyle from "./sp-definition-list.css?inline" assert { type: "css" }; +const styles = new CSSStyleSheet(); +styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListStyle}`); +export class SpDefinitionList extends HTMLElement { + constructor() { + super(); + _SpDefinitionList_dlElement.set(this, document.createElement("dl")); + _SpDefinitionList_slotElement.set(this, document.createElement("slot")); + this.attachShadow({ mode: "open" }); + } + connectedCallback() { + this.shadowRoot.adoptedStyleSheets = [ + ...this.shadowRoot.adoptedStyleSheets, + styles, + ]; + __classPrivateFieldGet(this, _SpDefinitionList_dlElement, "f").classList.add("base"); + __classPrivateFieldGet(this, _SpDefinitionList_dlElement, "f").appendChild(__classPrivateFieldGet(this, _SpDefinitionList_slotElement, "f")); + this.shadowRoot.appendChild(__classPrivateFieldGet(this, _SpDefinitionList_dlElement, "f")); + } +} +_SpDefinitionList_dlElement = new WeakMap(), _SpDefinitionList_slotElement = new WeakMap(); +customElements.get("sp-definition-list") || + customElements.define("sp-definition-list", SpDefinitionList); diff --git a/dist/components/foundation.css b/dist/components/foundation.css deleted file mode 100644 index 6bcd7f4..0000000 --- a/dist/components/foundation.css +++ /dev/null @@ -1,16 +0,0 @@ -:host, * { - overflow-wrap: break-word; - min-width: 0; -} - -:host { - font-family: var(--font-ja); -} - -:host:lang(zh) { - font-family: var(--font-zh); -} - -button { - box-sizing: border-box; -} \ No newline at end of file diff --git a/dist/components/icon/icon.css b/dist/components/icon/icon.css deleted file mode 100644 index a4533d5..0000000 --- a/dist/components/icon/icon.css +++ /dev/null @@ -1,22 +0,0 @@ -:host { - flex-grow: 0; - flex-shrink: 0; - display: inline-block; - line-height: 0; - vertical-align: middle; -} - -.icon { - display: inline-block; - fill: var(--icon-color, var(--color-primitive-neutral-100)); -} - -.size__small { - width: 16px; - height: 16px; -} - -.size__medium { - width: 24px; - height: 24px; -} \ No newline at end of file diff --git a/dist/src/components/icon/icons.d.ts b/dist/components/icon/icons.d.ts similarity index 100% rename from dist/src/components/icon/icons.d.ts rename to dist/components/icon/icons.d.ts diff --git a/dist/components/icon/icons.d.ts.map b/dist/components/icon/icons.d.ts.map new file mode 100644 index 0000000..91ccc00 --- /dev/null +++ b/dist/components/icon/icons.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icons.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,8mBAmDlB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,eAAO,MAAM,eAAe,EAAE;KAAE,GAAG,IAAI,eAAe,GAAG,MAAM;CAmD9D,CAAC"} \ No newline at end of file diff --git a/dist/src/components/icon/icons.js b/dist/components/icon/icons.js similarity index 100% rename from dist/src/components/icon/icons.js rename to dist/components/icon/icons.js diff --git a/dist/src/components/icon/sp-icon.d.ts b/dist/components/icon/sp-icon.d.ts similarity index 100% rename from dist/src/components/icon/sp-icon.d.ts rename to dist/components/icon/sp-icon.d.ts diff --git a/dist/components/icon/sp-icon.d.ts.map b/dist/components/icon/sp-icon.d.ts.map new file mode 100644 index 0000000..74d22dd --- /dev/null +++ b/dist/components/icon/sp-icon.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/sp-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAa/D,qBAAa,MAAO,SAAQ,MAAM;IAChC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAkC;;IAavC,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,IAAI;CAQR;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"} \ No newline at end of file diff --git a/dist/src/components/icon/sp-icon.js b/dist/components/icon/sp-icon.js similarity index 100% rename from dist/src/components/icon/sp-icon.js rename to dist/components/icon/sp-icon.js diff --git a/dist/components/radio/radio-button-text-group.css b/dist/components/radio/radio-button-text-group.css deleted file mode 100644 index 4769a8d..0000000 --- a/dist/components/radio/radio-button-text-group.css +++ /dev/null @@ -1,107 +0,0 @@ -:host { - display: inline-block; - max-width: 100%; -} - -.base { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.base:has(:focus-visible) { - outline: auto; -} - -.base.horizontal { - flex-direction: row; -} - -.base.vertical { - flex-direction: column; -} - -.item { - display: inline-flex; - justify-content: flex-start; - align-items: flex-start; -} - -.text { - color: var(--color-semantic-text-regular); - font-size: 12px; - line-height: 1.6; - padding-block: 2.5px; - cursor: pointer; -} - -.input { - position: absolute; - left: 0; - top: 0; - opacity: 0; - width: 100%; - height: 100%; - cursor: pointer; -} - -.radio { - position: relative; - flex-grow: 0; - flex-shrink: 0; - display: inline-flex; - padding-block: 4px; - padding-inline: 4px; -} - -.radio::before { - content: ''; - display: inline-block; - width: 16px; - height: 16px; - background: var(--color-semantic-surface-regular-1) 50% 50% no-repeat; - border: 1px solid var(--color-semantic-border-check-unchecked); - border-radius: 50%; -} - -.radio:has(.input:focus-visible)::before { - outline: auto; - outline-offset: 4px; - border-color: var(--color-semantic-border-focus); - box-shadow: 0 0 0 3px var(--color-semantic-highlight-focus-ring-default); -} - -.radio:has(.input:checked)::before { - background-color: var(--color-semantic-surface-regular-1); - border-width: 4px; -} - -.radio:has(.input:checked:not(:disabled))::before { - border-color: var(--color-semantic-border-selected); -} - -.item:has(.input:disabled) :is(.input, .text) { - cursor: not-allowed; -} - -.item:has(.input:disabled) .text { - color: var(--color-semantic-text-disabled); -} - -.item .radio:has(.input:disabled)::before { - background-color: var(--color-semantic-surface-check-disabled); - border-color: var(--color-semantic-border-regular); -} - -.item .radio:has(.input:checked:disabled)::before { - background-color: var(--color-semantic-surface-regular-1); -} - -.item:has(:is(.input:hover, .text:hover)):not(:has(:is(.input:checked, .input:disabled))) .radio::before { - background-color: var(--color-semantic-surface-regular-3); -} - -.item:has(.input:checked:hover:not(:disabled)) .radio::before, -.item:has(.input:checked:not(:disabled)):has(.text:hover) .radio::before { - border-color: var(--color-semantic-border-selected-hover); -} \ No newline at end of file diff --git a/dist/src/components/radio/sp-radio-button-text-group.d.ts b/dist/components/radio/sp-radio-button-text-group.d.ts similarity index 100% rename from dist/src/components/radio/sp-radio-button-text-group.d.ts rename to dist/components/radio/sp-radio-button-text-group.d.ts diff --git a/dist/components/radio/sp-radio-button-text-group.d.ts.map b/dist/components/radio/sp-radio-button-text-group.d.ts.map new file mode 100644 index 0000000..4fd377f --- /dev/null +++ b/dist/components/radio/sp-radio-button-text-group.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-radio-button-text-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio/sp-radio-button-text-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAS/E,qBAAa,sBAAuB,SAAQ,sBAAsB;;CAWjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,sBAAsB,CAAC;KACtD;CACF"} \ No newline at end of file diff --git a/dist/src/components/radio/sp-radio-button-text-group.js b/dist/components/radio/sp-radio-button-text-group.js similarity index 100% rename from dist/src/components/radio/sp-radio-button-text-group.js rename to dist/components/radio/sp-radio-button-text-group.js diff --git a/dist/components/segmentedControl/segmented-control.css b/dist/components/segmentedControl/segmented-control.css deleted file mode 100644 index 9859889..0000000 --- a/dist/components/segmentedControl/segmented-control.css +++ /dev/null @@ -1,81 +0,0 @@ -:host { - display: inline-block; - max-width: 100%; - line-height: 0; - vertical-align: middle; -} - -.base { - display: inline-flex; - max-width: 100%; -} - -.item { - flex: 1 0 80px; - position: relative; - display: flex; - align-items: stretch; - min-width: 80px; -} - -.radio { - position: absolute; - z-index: -1; - width: 100%; - height: 100%; -} - -.input { - width: 100%; - height: 100%; - opacity: 0; -} - -.text { - flex-grow: 1; - display: flex; - align-items: center; - justify-content: center; - padding-block: 8px; - padding-inline: 8px; - background-color: var(--color-semantic-surface-regular-2); - border: 1px solid var(--color-semantic-border-regular); - border-right: none; - color: var(--color-semantic-text-weak); - font-size: 10px; - line-height: 1.6; - text-align: center; -} - -.text:hover { - background-color: var(--color-semantic-surface-regular-4); -} - -.item:first-child .text { - border-radius: 5px 0 0 5px; -} - -.item:last-child .text { - border-radius: 0 5px 5px 0; - border-right: 1px solid var(--color-semantic-border-regular); -} - -.item:has(.input:focus-visible) .text { - outline: auto; - outline-offset: -4px; - background-color: var(--color-semantic-surface-regular-4); -} - -.item:has(.input:checked) .text { - background-color: var(--color-semantic-surface-selected); - border-color: var(--color-semantic-border-selected); - color: var(--color-semantic-text-inverse); - font-weight: bold; - cursor: default; -} - -.item:has(.input:disabled) .text { - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; -} diff --git a/dist/src/components/segmentedControl/sp-segmented-control.d.ts b/dist/components/segmentedControl/sp-segmented-control.d.ts similarity index 100% rename from dist/src/components/segmentedControl/sp-segmented-control.d.ts rename to dist/components/segmentedControl/sp-segmented-control.d.ts diff --git a/dist/components/segmentedControl/sp-segmented-control.d.ts.map b/dist/components/segmentedControl/sp-segmented-control.d.ts.map new file mode 100644 index 0000000..55b923e --- /dev/null +++ b/dist/components/segmentedControl/sp-segmented-control.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedControl/sp-segmented-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAS/E,qBAAa,kBAAmB,SAAQ,sBAAsB;;CAW7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"} \ No newline at end of file diff --git a/dist/src/components/segmentedControl/sp-segmented-control.js b/dist/components/segmentedControl/sp-segmented-control.js similarity index 100% rename from dist/src/components/segmentedControl/sp-segmented-control.js rename to dist/components/segmentedControl/sp-segmented-control.js diff --git a/dist/src/index.d.ts b/dist/index.d.ts similarity index 100% rename from dist/src/index.d.ts rename to dist/index.d.ts diff --git a/dist/index.d.ts.map b/dist/index.d.ts.map new file mode 100644 index 0000000..224a41b --- /dev/null +++ b/dist/index.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC"} \ No newline at end of file diff --git a/dist/src/index.js b/dist/index.js similarity index 100% rename from dist/src/index.js rename to dist/index.js diff --git a/dist/src/components/button/sp-button.d.ts.map b/dist/src/components/button/sp-button.d.ts.map deleted file mode 100644 index 15d82fa..0000000 --- a/dist/src/components/button/sp-button.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/sp-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAUjE,qBAAa,QAAS,SAAQ,QAAQ;;IAIpC,IAAI,IAAI,IAGM,MAAM,CADnB;IACD,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAUnB;IAED,MAAM,KAAK,kBAAkB,aAE5B;;IAgBD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CAqB1E;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"} \ No newline at end of file diff --git a/dist/src/components/checkbox/sp-checkbox-list.d.ts.map b/dist/src/components/checkbox/sp-checkbox-list.d.ts.map deleted file mode 100644 index e65e3bb..0000000 --- a/dist/src/components/checkbox/sp-checkbox-list.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-checkbox-list.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/sp-checkbox-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAWvE,qBAAa,cAAe,SAAQ,cAAc;;CAWjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"} \ No newline at end of file diff --git a/dist/src/components/checkbox/sp-checkbox-text.d.ts.map b/dist/src/components/checkbox/sp-checkbox-text.d.ts.map deleted file mode 100644 index cbc1890..0000000 --- a/dist/src/components/checkbox/sp-checkbox-text.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-checkbox-text.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/sp-checkbox-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAWvE,qBAAa,cAAe,SAAQ,cAAc;;CAWjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"} \ No newline at end of file diff --git a/dist/src/components/checkbox/sp-checkbox.d.ts.map b/dist/src/components/checkbox/sp-checkbox.d.ts.map deleted file mode 100644 index ee3adf7..0000000 --- a/dist/src/components/checkbox/sp-checkbox.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/sp-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAWnE,qBAAa,UAAW,SAAQ,UAAU;;CAWzC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"} \ No newline at end of file diff --git a/dist/src/components/icon/icons.d.ts.map b/dist/src/components/icon/icons.d.ts.map deleted file mode 100644 index 82bbb35..0000000 --- a/dist/src/components/icon/icons.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/icons.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,8mBAmDlB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,eAAO,MAAM,eAAe,EAAE;KAAE,GAAG,IAAI,eAAe,GAAG,MAAM;CAmD9D,CAAC"} \ No newline at end of file diff --git a/dist/src/components/icon/sp-icon.d.ts.map b/dist/src/components/icon/sp-icon.d.ts.map deleted file mode 100644 index 6d8b6f3..0000000 --- a/dist/src/components/icon/sp-icon.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-icon.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/sp-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAa/D,qBAAa,MAAO,SAAQ,MAAM;IAChC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAkC;;IAavC,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,IAAI;CAQR;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"} \ No newline at end of file diff --git a/dist/src/components/radio/sp-radio-button-text-group.d.ts.map b/dist/src/components/radio/sp-radio-button-text-group.d.ts.map deleted file mode 100644 index 0c6f3d9..0000000 --- a/dist/src/components/radio/sp-radio-button-text-group.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-radio-button-text-group.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/sp-radio-button-text-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAS/E,qBAAa,sBAAuB,SAAQ,sBAAsB;;CAWjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,sBAAsB,CAAC;KACtD;CACF"} \ No newline at end of file diff --git a/dist/src/components/segmentedControl/sp-segmented-control.d.ts.map b/dist/src/components/segmentedControl/sp-segmented-control.d.ts.map deleted file mode 100644 index c5fb2a9..0000000 --- a/dist/src/components/segmentedControl/sp-segmented-control.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/segmentedControl/sp-segmented-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAS/E,qBAAa,kBAAmB,SAAQ,sBAAsB;;CAW7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"} \ No newline at end of file diff --git a/dist/src/components/tab/sp-tab.d.ts b/dist/src/components/tab/sp-tab.d.ts deleted file mode 100644 index 83125dd..0000000 --- a/dist/src/components/tab/sp-tab.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -type TabType = "tabWhite" | "tabGray"; -export declare class SpTab extends HTMLElement { - #private; - tabElement: HTMLButtonElement; - textElement: HTMLSpanElement; - set text(value: string); - get selected(): boolean; - set selected(value: boolean); - get disabled(): boolean; - set disabled(value: boolean); - get type(): TabType; - set type(value: TabType); - get createNewIcon(): boolean; - set createNewIcon(value: boolean); - static get observedAttributes(): string[]; - constructor(); - connectedCallback(): void; - attributeChangedCallback(name: string, oldValue: string, newValue: string): void; -} -declare global { - interface HTMLElementTagNameMap { - "sp-tab": SpTab; - } -} -export {}; -//# sourceMappingURL=sp-tab.d.ts.map \ No newline at end of file diff --git a/dist/src/components/tab/sp-tab.d.ts.map b/dist/src/components/tab/sp-tab.d.ts.map deleted file mode 100644 index e354361..0000000 --- a/dist/src/components/tab/sp-tab.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sp-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/sp-tab.ts"],"names":[],"mappings":"AAOA,KAAK,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAKtC,qBAAa,KAAM,SAAQ,WAAW;;IAMpC,UAAU,oBAAoC;IAC9C,WAAW,kBAAkC;IAE7C,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,QAAQ,IAGQ,OAAO,CAD1B;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IAED,IAAI,QAAQ,IAGQ,OAAO,CAD1B;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAK1B;IAED,IAAI,IAAI,IAGQ,OAAO,CADtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAStB;IACD,IAAI,aAAa,IAGQ,OAAO,CAD/B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,OAAO,EAU/B;IAED,MAAM,KAAK,kBAAkB,aAE5B;;IAeD,iBAAiB;IAYjB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CAiC1E;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"} \ No newline at end of file diff --git a/dist/src/components/tab/sp-tab.js b/dist/src/components/tab/sp-tab.js deleted file mode 100644 index 482684a..0000000 --- a/dist/src/components/tab/sp-tab.js +++ /dev/null @@ -1,133 +0,0 @@ -var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) { - if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); - if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); - return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); -}; -var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) { - if (kind === "m") throw new TypeError("Private method is not writable"); - if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter"); - if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it"); - return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value; -}; -var _SpTab_instances, _SpTab_selected, _SpTab_disabled, _SpTab_type, _SpTab_createNewIcon, _SpTab_createNewIconElement, _SpTab_onSelectedAdd, _SpTab_onSelectedRemove, _SpTab_tabDisabledUpdate; -// @ts-ignore -import foundationStyle from "../foundation.css?inline" assert { type: "css" }; -// @ts-ignore -import tabStyle from "./tab.css?inline" assert { type: "css" }; -import { SpIcon } from "../icon/sp-icon"; -const styles = new CSSStyleSheet(); -styles.replaceSync(`${foundationStyle} ${tabStyle}`); -export class SpTab extends HTMLElement { - set text(value) { - this.textElement.innerText = value; - } - get selected() { - return __classPrivateFieldGet(this, _SpTab_selected, "f"); - } - set selected(value) { - __classPrivateFieldSet(this, _SpTab_selected, value, "f"); - value ? __classPrivateFieldGet(this, _SpTab_instances, "m", _SpTab_onSelectedAdd).call(this) : __classPrivateFieldGet(this, _SpTab_instances, "m", _SpTab_onSelectedRemove).call(this); - } - get disabled() { - return __classPrivateFieldGet(this, _SpTab_disabled, "f"); - } - set disabled(value) { - const tab = this.tabElement; - __classPrivateFieldSet(this, _SpTab_disabled, value, "f"); - value ? tab.classList.add("isDisable") : tab.classList.remove("isDisable"); - __classPrivateFieldGet(this, _SpTab_instances, "m", _SpTab_tabDisabledUpdate).call(this); - } - get type() { - return __classPrivateFieldGet(this, _SpTab_type, "f"); - } - set type(value) { - const tab = this.tabElement; - const typeClassList = { - tabWhite: "-white", - tabGray: "-gray", - }; - tab.classList.remove(typeClassList[__classPrivateFieldGet(this, _SpTab_type, "f")]); - tab.classList.add(typeClassList[value]); - __classPrivateFieldSet(this, _SpTab_type, value, "f"); - } - get createNewIcon() { - return __classPrivateFieldGet(this, _SpTab_createNewIcon, "f"); - } - set createNewIcon(value) { - __classPrivateFieldSet(this, _SpTab_createNewIcon, value, "f"); - if (value === true) { - this.tabElement.insertBefore(__classPrivateFieldGet(this, _SpTab_createNewIconElement, "f"), this.textElement); - } - else { - __classPrivateFieldGet(this, _SpTab_createNewIconElement, "f").remove(); - } - } - static get observedAttributes() { - return ["text", "selected", "create-new-icon", "disabled", "type"]; - } - constructor() { - super(); - _SpTab_instances.add(this); - _SpTab_selected.set(this, void 0); - _SpTab_disabled.set(this, void 0); - _SpTab_type.set(this, void 0); - _SpTab_createNewIcon.set(this, void 0); - _SpTab_createNewIconElement.set(this, new SpIcon()); - this.tabElement = document.createElement("button"); - this.textElement = document.createElement("span"); - this.attachShadow({ mode: "open" }); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - styles, - ]; - this.tabElement.classList.add("spds__tab"); - this.tabElement.setAttribute("role", "tab"); - this.tabElement.setAttribute("aria-tabindex", "0"); - this.textElement.classList.add("spds__tabText"); - this.tabElement.appendChild(this.textElement); - } - connectedCallback() { - __classPrivateFieldGet(this, _SpTab_createNewIconElement, "f").classList.add("base__icon"); - __classPrivateFieldGet(this, _SpTab_createNewIconElement, "f").size = "small"; - __classPrivateFieldGet(this, _SpTab_createNewIconElement, "f").type = "plus"; - if (typeof this.selected === "undefined") { - // this.selected = false; - this.tabElement.setAttribute("aria-selected", "false"); - } - if (typeof this.type === "undefined") - this.type = "tabWhite"; - this.setAttribute("role", "tablist"); - this.shadowRoot.appendChild(this.tabElement); - } - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue === newValue) - return; - switch (name) { - case "text": - this.text = newValue; - break; - case "selected": - this.selected = newValue === "true" || newValue === ""; - break; - case "disabled": - this.disabled = newValue === "true" || newValue === ""; - break; - case "type": - this.type = newValue; - break; - case "create-new-icon": - this.createNewIcon = newValue === "true" || newValue === ""; - break; - } - } -} -_SpTab_selected = new WeakMap(), _SpTab_disabled = new WeakMap(), _SpTab_type = new WeakMap(), _SpTab_createNewIcon = new WeakMap(), _SpTab_createNewIconElement = new WeakMap(), _SpTab_instances = new WeakSet(), _SpTab_onSelectedAdd = function _SpTab_onSelectedAdd() { - this.tabElement.classList.add("-selected"); - this.tabElement.setAttribute("aria-selected", "true"); -}, _SpTab_onSelectedRemove = function _SpTab_onSelectedRemove() { - this.tabElement.classList.remove("-selected"); - this.tabElement.setAttribute("aria-selected", "false"); -}, _SpTab_tabDisabledUpdate = function _SpTab_tabDisabledUpdate() { - this.tabElement.disabled = this.disabled; -}; -customElements.get("sp-tab") || customElements.define("sp-tab", SpTab); diff --git a/dist/src/index.d.ts.map b/dist/src/index.d.ts.map deleted file mode 100644 index 17ac092..0000000 --- a/dist/src/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC"} \ No newline at end of file diff --git a/dist/vitest.config.d.ts b/dist/vitest.config.d.ts deleted file mode 100644 index 2b17c25..0000000 --- a/dist/vitest.config.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -declare const _default: import("vite").UserConfig; -export default _default; -//# sourceMappingURL=vitest.config.d.ts.map \ No newline at end of file diff --git a/dist/vitest.config.d.ts.map b/dist/vitest.config.d.ts.map deleted file mode 100644 index 7e07e0c..0000000 --- a/dist/vitest.config.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"vitest.config.d.ts","sourceRoot":"","sources":["../vitest.config.ts"],"names":[],"mappings":";AAEA,wBAIG"} \ No newline at end of file diff --git a/dist/vitest.config.js b/dist/vitest.config.js deleted file mode 100644 index 0bc0e82..0000000 --- a/dist/vitest.config.js +++ /dev/null @@ -1,6 +0,0 @@ -import { defineConfig } from "vitest/config"; -export default defineConfig({ - test: { - environment: "happy-dom", - }, -}); diff --git a/tsconfig-build.json b/tsconfig-build.json index d6babc2..9ec8e07 100644 --- a/tsconfig-build.json +++ b/tsconfig-build.json @@ -15,5 +15,5 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "exclude": ["example", "stories", "tests", "dist", "tools"] + "include": ["src"] }