@unkn0wndo3s/nova-design-system 0.1.0 → 0.2.0

package/src/components/Notifications/notification.astro

@@ -1,23 +1,23 @@
----
-import { CloseIcon } from "../Icons";
-
-
-export interface Props {
-  type:        'info' | 'success' | 'warning' | 'error';
-}
-const notificationUUID  = `notification-${Math.random().toString(36).substr(2, 9)}`;
-const { type } = Astro.props;
----
-
-<div class={`notification notification__${type}`} role="alert" id={notificationUUID}>
-  <div class=`notification__${type}__content`>
-    <slot />
-  </div>
-  <button class={`notification__${type}__close`} aria-label="Close notification" onclick={`document.getElementById('${notificationUUID}')?.remove()`}>
-    <CloseIcon size={16} label="Close notification" />
-  </button>
-</div>
-
-<style lang="scss">
-@use './_notification.scss';
+---
+import { CloseIcon } from "../Icons";
+
+
+export interface Props {
+  type:        'info' | 'success' | 'warning' | 'error';
+}
+const notificationUUID  = `notification-${Math.random().toString(36).substr(2, 9)}`;
+const { type } = Astro.props;
+---
+
+<div class={`notification notification__${type}`} role="alert" id={notificationUUID}>
+  <div class=`notification__${type}__content`>
+    <slot />
+  </div>
+  <button class={`notification__${type}__close`} aria-label="Close notification" onclick={`document.getElementById('${notificationUUID}')?.remove()`}>
+    <CloseIcon size={16} label="Close notification" />
+  </button>
+</div>
+
+<style lang="scss">
+@use './_notification.scss';
 </style>

package/src/components/Tabs/_tab.scss

@@ -1,33 +1,33 @@
-@use '../../styles/tokens/typography' as *;
-
-.tab {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--nds-spacing-xs);
-    justify-content: center;
-    width: fit-content;
-
-    &__item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: fit-content;
-        cursor: pointer;
-        padding: var(--nds-spacing-2xs);
-        @include text-base;
-
-        &--active {
-            color: var(--nds-primary);
-
-            &::after {
-                content: '';
-                display: block;
-                width: 120%;
-                height: 1px;
-                background-color: var(--nds-primary);
-                border-radius: var(--nds-radius-sm);
-            }
-        }
-    }
+@use '../../styles/tokens/typography' as *;
+
+.tab {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nds-spacing-xs);
+    justify-content: center;
+    width: fit-content;
+
+    &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: fit-content;
+        cursor: pointer;
+        padding: var(--nds-spacing-2xs);
+        @include text-base;
+
+        &--active {
+            color: var(--nds-primary);
+
+            &::after {
+                content: '';
+                display: block;
+                width: 120%;
+                height: 1px;
+                background-color: var(--nds-primary);
+                border-radius: var(--nds-radius-sm);
+            }
+        }
+    }
 }

package/src/components/Tabs/tab.astro

@@ -1,54 +1,54 @@
----
-export interface Props {
-  id: string;
-  defaultActive?: string;
-}
-
-const { id, defaultActive } = Astro.props;
----
-
-<div class="tab" data-tab-group id={id} data-default-active={defaultActive}>
-  <slot />
-</div>
-
-<script>
-  document.querySelectorAll<HTMLElement>('[data-tab-group]').forEach((group) => {
-    const defaultActive = group.dataset.defaultActive;
-
-    function setActive(itemId: string) {
-      const groupId = group.id;
-
-      group.querySelectorAll<HTMLElement>('[data-tab-item]').forEach((item) => {
-        item.classList.toggle('tab__item--active', item.dataset.tabItem === itemId);
-        item.setAttribute('aria-selected', String(item.dataset.tabItem === itemId));
-      });
-
-      document.querySelectorAll<HTMLElement>(`[data-tab-content][data-tab-id="${groupId}"]`).forEach((content) => {
-        content.hidden = content.dataset.tabItemId !== itemId;
-      });
-
-      group.dispatchEvent(new CustomEvent('tab:change', {
-        detail: { itemId },
-        bubbles: true,
-      }));
-    }
-
-    const firstItem = group.querySelector<HTMLElement>('[data-tab-item]');
-    const initialId = defaultActive ?? firstItem?.dataset.tabItem ?? '';
-    if (initialId) setActive(initialId);
-
-    group.addEventListener('tab-item:click', (e: Event) => {
-      setActive((e as CustomEvent<{ itemId: string }>).detail.itemId);
-    });
-
-    group.addEventListener('tab:set', (e: Event) => {
-      setActive((e as CustomEvent<{ itemId: string }>).detail.itemId);
-    });
-
-    (group as any).setActiveTab = (itemId: string) => setActive(itemId);
-  });
-</script>
-
-<style lang="scss">
-@use './tab';
+---
+export interface Props {
+  id: string;
+  defaultActive?: string;
+}
+
+const { id, defaultActive } = Astro.props;
+---
+
+<div class="tab" data-tab-group id={id} data-default-active={defaultActive}>
+  <slot />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-tab-group]').forEach((group) => {
+    const defaultActive = group.dataset.defaultActive;
+
+    function setActive(itemId: string) {
+      const groupId = group.id;
+
+      group.querySelectorAll<HTMLElement>('[data-tab-item]').forEach((item) => {
+        item.classList.toggle('tab__item--active', item.dataset.tabItem === itemId);
+        item.setAttribute('aria-selected', String(item.dataset.tabItem === itemId));
+      });
+
+      document.querySelectorAll<HTMLElement>(`[data-tab-content][data-tab-id="${groupId}"]`).forEach((content) => {
+        content.hidden = content.dataset.tabItemId !== itemId;
+      });
+
+      group.dispatchEvent(new CustomEvent('tab:change', {
+        detail: { itemId },
+        bubbles: true,
+      }));
+    }
+
+    const firstItem = group.querySelector<HTMLElement>('[data-tab-item]');
+    const initialId = defaultActive ?? firstItem?.dataset.tabItem ?? '';
+    if (initialId) setActive(initialId);
+
+    group.addEventListener('tab-item:click', (e: Event) => {
+      setActive((e as CustomEvent<{ itemId: string }>).detail.itemId);
+    });
+
+    group.addEventListener('tab:set', (e: Event) => {
+      setActive((e as CustomEvent<{ itemId: string }>).detail.itemId);
+    });
+
+    (group as any).setActiveTab = (itemId: string) => setActive(itemId);
+  });
+</script>
+
+<style lang="scss">
+@use './tab';
 </style>

package/src/components/Tabs/tabContent.astro

@@ -1,21 +1,21 @@
----
-export interface Props {
-  id: string;
-  itemId: string;
-}
-
-const { id, itemId } = Astro.props;
----
-
-<div
-  data-tab-content
-  data-tab-id={id}
-  data-tab-item-id={itemId}
-  hidden
->
-  <slot />
-</div>
-
-<style lang="scss">
-@use './tab';
+---
+export interface Props {
+  id: string;
+  itemId: string;
+}
+
+const { id, itemId } = Astro.props;
+---
+
+<div
+  data-tab-content
+  data-tab-id={id}
+  data-tab-item-id={itemId}
+  hidden
+>
+  <slot />
+</div>
+
+<style lang="scss">
+@use './tab';
 </style>

package/src/components/Tabs/tabItem.astro

@@ -1,41 +1,41 @@
----
-export interface Props {
-  id: string;
-}
-
-const { id } = Astro.props;
----
-
-<div
-  class="tab__item"
-  data-tab-item={id}
-  role="tab"
-  aria-selected="false"
-  tabindex="0"
->
-  <slot />
-</div>
-
-<script>
-  document.querySelectorAll<HTMLElement>('[data-tab-item]').forEach((item) => {
-    function notify() {
-      const group = item.closest('[data-tab-group]');
-      if (!group) return;
-      group.dispatchEvent(new CustomEvent('tab-item:click', {
-        detail: { itemId: item.dataset.tabItem },
-      }));
-    }
-
-    item.addEventListener('click', notify);
-    item.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        notify();
-      }
-    });
-  });
-</script>
-
-<style lang="scss">
-@use './tab';
+---
+export interface Props {
+  id: string;
+}
+
+const { id } = Astro.props;
+---
+
+<div
+  class="tab__item"
+  data-tab-item={id}
+  role="tab"
+  aria-selected="false"
+  tabindex="0"
+>
+  <slot />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-tab-item]').forEach((item) => {
+    function notify() {
+      const group = item.closest('[data-tab-group]');
+      if (!group) return;
+      group.dispatchEvent(new CustomEvent('tab-item:click', {
+        detail: { itemId: item.dataset.tabItem },
+      }));
+    }
+
+    item.addEventListener('click', notify);
+    item.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        notify();
+      }
+    });
+  });
+</script>
+
+<style lang="scss">
+@use './tab';
 </style>

package/src/components/Toggle/_toggle.scss

@@ -1,33 +1,33 @@
-.toggle {
-    background-color: var(--nds-disabled);
-    border-radius: var(--nds-radius-full);
-    padding: var(--nds-spacing-2xs);
-    width: 50px;
-    height: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    cursor: pointer;
-    transition: background-color 160ms ease;
-    position: relative;
-    &-switch {
-        color: var(--nds-text);
-        width: 15px;
-        height: 15px;
-        background-color: var(--nds-text);
-        border-radius: var(--nds-radius-full);
-        position: absolute;
-        left: var(--nds-spacing-2xs);
-        top: 50%;
-        transform: translateY(-50%);
-        transition: left 160ms ease, background-color 160ms ease, transform 160ms ease;
-    }
-    &-active {
-        display: flex;
-        justify-content: right;
-        background-color: var(--nds-primary);
-        .toggle-switch {
-            left: calc(100% - var(--nds-spacing-2xs) - 15px);
-        }
-    }
-}
+.toggle {
+    background-color: var(--nds-disabled);
+    border-radius: var(--nds-radius-full);
+    padding: var(--nds-spacing-2xs);
+    width: 50px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    cursor: pointer;
+    transition: background-color 160ms ease;
+    position: relative;
+    &-switch {
+        color: var(--nds-text);
+        width: 15px;
+        height: 15px;
+        background-color: var(--nds-text);
+        border-radius: var(--nds-radius-full);
+        position: absolute;
+        left: var(--nds-spacing-2xs);
+        top: 50%;
+        transform: translateY(-50%);
+        transition: left 160ms ease, background-color 160ms ease, transform 160ms ease;
+    }
+    &-active {
+        display: flex;
+        justify-content: right;
+        background-color: var(--nds-primary);
+        .toggle-switch {
+            left: calc(100% - var(--nds-spacing-2xs) - 15px);
+        }
+    }
+}

package/src/components/Toggle/toggle.astro

@@ -1,62 +1,62 @@
----
-import { boolean } from 'astro:schema';
-
-export interface Props {
-    'data-checked': boolean;
-    name?: string;
-    id: string;
-}
-
-const { 'data-checked': dataChecked = 'false', name = 'toggle', id } = Astro.props;
----
-
-<toggle-switch data-checked={dataChecked} data-name={name} id={id}>
-    <div class="toggle">
-        <div class="toggle-switch"></div>
-    </div>
-</toggle-switch>
-
-<script>
-    class ToggleSwitch extends HTMLElement {
-        private _checked: boolean = false;
-
-        connectedCallback() {
-            this._checked = this.dataset.checked === 'true';
-            this.updateUI();
-
-            this.querySelector('.toggle')?.addEventListener('click', () => {
-                this.toggle();
-            });
-        }
-
-        toggle() {
-            this._checked = !this._checked;
-            this.updateUI();
-
-            this.dispatchEvent(new CustomEvent('change', {
-                detail: { checked: this._checked, name: this.dataset.name },
-                bubbles: true, 
-                composed: true,
-            }));
-        }
-        set checked(value: boolean) {
-            this._checked = value;
-            this.updateUI();
-        }
-
-        get checked() {
-            return this._checked;
-        }
-
-        private updateUI() {
-            this.dataset.checked = String(this._checked);
-            this.querySelector('.toggle')?.classList.toggle('toggle-active', this._checked);
-        }
-    }
-
-    customElements.define('toggle-switch', ToggleSwitch);
-</script>
-
-<style lang="scss">
-@use './_toggle.scss';
+---
+import { boolean } from 'astro:schema';
+
+export interface Props {
+    'data-checked': boolean;
+    name?: string;
+    id: string;
+}
+
+const { 'data-checked': dataChecked = 'false', name = 'toggle', id } = Astro.props;
+---
+
+<toggle-switch data-checked={dataChecked} data-name={name} id={id}>
+    <div class="toggle">
+        <div class="toggle-switch"></div>
+    </div>
+</toggle-switch>
+
+<script>
+    class ToggleSwitch extends HTMLElement {
+        private _checked: boolean = false;
+
+        connectedCallback() {
+            this._checked = this.dataset.checked === 'true';
+            this.updateUI();
+
+            this.querySelector('.toggle')?.addEventListener('click', () => {
+                this.toggle();
+            });
+        }
+
+        toggle() {
+            this._checked = !this._checked;
+            this.updateUI();
+
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: { checked: this._checked, name: this.dataset.name },
+                bubbles: true, 
+                composed: true,
+            }));
+        }
+        set checked(value: boolean) {
+            this._checked = value;
+            this.updateUI();
+        }
+
+        get checked() {
+            return this._checked;
+        }
+
+        private updateUI() {
+            this.dataset.checked = String(this._checked);
+            this.querySelector('.toggle')?.classList.toggle('toggle-active', this._checked);
+        }
+    }
+
+    customElements.define('toggle-switch', ToggleSwitch);
+</script>
+
+<style lang="scss">
+@use './_toggle.scss';
 </style>

package/src/components/index.ts

@@ -1,10 +1,13 @@
-// Auto-generated by scripts/generate-barrel.mjs — do not edit manually.
-
-export * from './Icons/index.ts';
-export { default as Notification } from './Notifications/notification.astro';
-export { default as Toggle }       from './Toggle/toggle.astro';
-export { default as Tab }          from './Tabs/tab.astro';
-export { default as TabItem }      from './Tabs/tabItem.astro';
-export { default as TabContent }   from './Tabs/tabContent.astro';
-export { default as Button }       from './Button/button.astro';
-export { default as Link }         from './Link/link.astro';
+// Auto-generated by scripts/generate-barrel.mjs — do not edit manually.
+
+export * from './Icons/index.ts';
+export { default as Notification } from './Notifications/notification.astro';
+export { default as Toggle }       from './Toggle/toggle.astro';
+export { default as Tab }          from './Tabs/tab.astro';
+export { default as TabItem }      from './Tabs/tabItem.astro';
+export { default as TabContent }   from './Tabs/tabContent.astro';
+export { default as Button }       from './Button/button.astro';
+export { default as Link }         from './Link/link.astro';
+export { default as ListItem }     from './ListItem/listItem.astro';
+export { default as ListItemTitle } from './ListItem/listItemTitle.astro';
+export { default as ListItemSubtitle } from './ListItem/listItemSubtitle.astro';

package/src/index.ts

@@ -1 +1 @@
-export * from './components/index.ts';
+export * from './components/index.ts';

package/src/layouts/Layout.astro

@@ -1,29 +1,29 @@
----
-import '../styles/index.scss';
----
-
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Nova Design System</title>
-	</head>
-	<body>
-		<slot />
-	</body>
-</html>
-
-<style>
-	html,
-	body {
-		margin: 0;
-		width: 100%;
-		min-height: 100%;
-		font-family: var(--nds-font-family-base);
-		background-color: var(--nds-page-low);
-		color: var(--nds-default);
-	}
-</style>
+---
+import '../styles/index.scss';
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Nova Design System</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+
+<style>
+	html,
+	body {
+		margin: 0;
+		width: 100%;
+		min-height: 100%;
+		font-family: var(--nds-font-family-base);
+		background-color: var(--nds-page-low);
+		color: var(--nds-default);
+	}
+</style>