@ibis-design/svelte 0.2.0 → 0.6.0

package/dist/components/buttons/dropdownButton.css

@@ -0,0 +1,82 @@
+.dropdown-button {
+	position: relative;
+	display: inline-block;
+}
+
+.caret {
+	margin-left: 0.25em;
+	width: 1em;
+	height: 1em;
+}
+
+.dropdown-menu {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	margin-top: 4px;
+	min-width: 160px;
+	background: white;
+	border: 1px solid var(--color-neutral-300);
+	border-radius: var(--component-button-size-md);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	z-index: 1000;
+	padding: 4px;
+	display: flex;
+	flex-direction: column;
+}
+
+/* .dropdown-menu :global(button) {
+	all: unset;
+	padding: 8px;
+	cursor: pointer;
+	border-radius: 4px;
+}
+
+.dropdown-menu :global(button:hover) {
+	background-color: var(--color-neutral-100);
+} */
+
+.dropdown-menu :global(.dropdown-menu__item) {
+	all: unset;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	box-sizing: border-box;
+	padding: var(--spacing-3) var(--spacing-4);
+	cursor: pointer;
+	font-family: var(--font-family-sans);
+	font-size: var(--font-size-normal-text-default);
+	font-weight: var(--font-weight-medium);
+	color: var(--color-neutral-900);
+	text-align: center;
+	transition: background-color var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+.dropdown-menu :global(.dropdown-menu__item:hover) {
+	background-color: var(--color-primary-400);
+	color: var(--color-white);
+}
+
+.dropdown-menu :global(.dropdown-menu__item--selected) {
+	background-color: var(--color-primary-500);
+	color: var(--color-white);
+	font-weight: var(--font-weight-bold);
+}
+
+.dropdown-menu :global(.dropdown-menu__item--selected:hover) {
+	background-color: var(--color-primary-700);
+	color: var(--color-white);
+}
+
+.caret {
+	margin-left: 0.25em;
+	width: 1em;
+	height: 1em;
+	transition: transform var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+/* ↓ ADDED — rotates caret when open */
+.caret--open {
+	transform: rotate(180deg);
+}

package/dist/components/buttons/pillTab.css

@@ -0,0 +1,59 @@
+.ibis-pill-tab {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	padding: var(--spacing-1) var(--spacing-3);
+	height: 100%;
+	align-self: stretch;
+	border-radius: var(--border-radius-full);
+	/* background: var(--color-neutral-100); */
+	color: var(--color-neutral-700);
+	cursor: pointer;
+	user-select: none;
+
+	transition:
+		background var(--transition-duration-normal),
+		color var(--transition-duration-normal),
+		box-shadow var(--transition-duration-normal);
+}
+
+.ibis-pill-tab__input {
+	display: none;
+}
+
+.ibis-pill-tab__content {
+	font-size: var(--font-size-sm);
+	line-height: 1;
+	text-align: center; /*New*/
+	width: 100%; /*New*/
+}
+
+/* Active */
+.ibis-pill-tab--active {
+	background: var(--color-primary-700);
+	color: var(--color-white);
+}
+
+/* Hover */
+.ibis-pill-tab:hover:not(.ibis-pill-tab--disabled):not(.ibis-pill-tab--active) {
+	background: var(--color-primary-100);
+	color: var(--color-primary-800);
+}
+
+.ibis-pill-tab--active:hover {
+	background: var(--color-primary-800);
+}
+
+/* Focus (important for accessibility) */
+.ibis-pill-tab__input:focus-visible + .ibis-pill-tab__content {
+	outline: 2px solid var(--color-primary-500);
+	outline-offset: 2px;
+	border-radius: 999px;
+}
+
+/* Disabled */
+.ibis-pill-tab--disabled {
+	opacity: var(--opacity-7);
+	cursor: not-allowed;
+}

package/dist/components/containers/Banner.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import "./banner.css";
+  import type { Snippet } from "svelte";
+
+  type BannerType = "success" | "error" | "default";
+
+  interface Props {
+    type?: BannerType;
+    title?: string;
+    message?: string;
+    children?: Snippet;
+    icon?: Snippet;
+    iconText?: string;
+    closable?: boolean;
+    loading?: boolean;
+  }
+
+  let {
+    type = "default",
+    title,
+    message,
+    children,
+    icon,
+    iconText,
+    closable,
+    loading,
+  }: Props = $props();
+
+  let visible = $state(true);
+
+  const close = () => {
+    visible = false;
+  };
+</script>
+
+{#if visible}
+  <div
+    class="ibis-banner"
+    role="status"
+    class:ibis-banner--success={type === "success"}
+    class:ibis-banner--error={type === "error"}
+    class:ibis-banner--default={type === "default"}>
+    {#if loading || icon || iconText}
+      <div class="ibis-banner__icon">
+        {#if loading}
+          <span class="ibis-banner__loader" aria-hidden="true"></span>
+        {:else if icon}
+          {@render icon?.()}
+        {:else}
+          {iconText}
+        {/if}
+      </div>
+    {/if}
+
+    <div class="ibis-banner__content">
+      {#if title}
+        <div class="ibis-banner__title">{title}</div>
+      {/if}
+
+      <div class="ibis-banner__message">
+        {#if children}
+          {@render children?.()}
+        {:else if message}
+          {message}
+        {/if}
+      </div>
+    </div>
+
+    {#if closable}
+      <button class="ibis-banner__close" onclick={close} aria-label="Close"> x </button>
+    {/if}
+  </div>
+{/if}

package/dist/components/containers/Banner.svelte.d.ts

@@ -0,0 +1,16 @@
+import "./banner.css";
+import type { Snippet } from "svelte";
+type BannerType = "success" | "error" | "default";
+interface Props {
+    type?: BannerType;
+    title?: string;
+    message?: string;
+    children?: Snippet;
+    icon?: Snippet;
+    iconText?: string;
+    closable?: boolean;
+    loading?: boolean;
+}
+declare const Banner: import("svelte").Component<Props, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/components/containers/Card.svelte

@@ -0,0 +1,34 @@
+<!--
+  Card – Container with token-based padding, radius, and shadow.
+  @component
+  @param {Snippet} [children] - Snippet content for the card body.
+  @example
+  <Card>Card content</Card>
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<div class="ibis-card">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .ibis-card {
+    background-color: var(--color-backgrounds-classic-bg-light);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-default);
+    padding: var(--spacing-4);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-normal-text-default);
+    line-height: var(--line-height-normal);
+  }
+</style>

package/dist/components/containers/Card.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    children?: Snippet;
+}
+/**
+ * Card – Container with token-based padding, radius, and shadow.
+ *
+ * @param {Snippet} [children] - Snippet content for the card body.
+ * @example
+ * <Card>Card content</Card>
+ */
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/containers/PillTabs.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  interface Props {
+    children?: () => any;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<div class="ibis-pill-tabs">
+  {@render children?.()}
+</div>
+
+<style>
+  .ibis-pill-tabs {
+    display: inline-flex;
+    align-items: stretch;
+    border-radius: var(--border-radius-full);
+    background: var(--color-white);
+    padding: 4px;
+    gap: 4px;
+  }
+</style>

package/dist/components/containers/PillTabs.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    children?: () => any;
+}
+declare const PillTabs: import("svelte").Component<Props, {}, "">;
+type PillTabs = ReturnType<typeof PillTabs>;
+export default PillTabs;

package/dist/components/containers/TipIndicator.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import './tipIndicator.css';
+
+	interface Props {
+		/**
+		 * Controls the position of the tooltip relative to the indicator.
+		 *
+		 * @default "top"
+		 */
+		position?: 'top' | 'bottom' | 'left' | 'right';
+		/**
+		 * The plain text content displayed inside the tooltip.
+		 */
+		text: string;
+		/**
+		 * Disables the tooltip from appearing on hover.
+		 *
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Controls the width of the tooltip.
+		 *
+		 * @default "auto"
+		 */
+		width?: 'auto' | '240' | '360';
+	}
+
+	let { position = 'top', text, disabled = false, width = 'auto' }: Props = $props();
+
+	let visible = $state(false);
+
+	const show = () => {
+		if (!disabled) visible = true;
+	};
+
+	const hide = () => {
+		visible = false;
+	};
+</script>
+
+<span
+	class="ibis-tip-indicator"
+	onmouseenter={show}
+	onmouseleave={hide}
+	onfocus={show}
+	onblur={hide}
+	tabindex="0"
+	role="button"
+	aria-describedby="ibis-tip"
+>
+	<svg
+		class="ibis-tip-indicator__icon"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		aria-hidden="true"
+	>
+		<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
+		<line
+			x1="12"
+			y1="11"
+			x2="12"
+			y2="17"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<circle cx="12" cy="7.5" r="1.2" fill="currentColor" />
+	</svg>
+
+	{#if visible}
+		<div id="ibis-tip" class="ibis-tip ibis-tip--{position} ibis-tip--width-{width}" role="tooltip">
+			<span class="ibis-tip__text">{text}</span>
+			<span class="ibis-tip__arrow"></span>
+		</div>
+	{/if}
+</span>

package/dist/components/containers/TipIndicator.svelte.d.ts

@@ -0,0 +1,28 @@
+import './tipIndicator.css';
+interface Props {
+    /**
+     * Controls the position of the tooltip relative to the indicator.
+     *
+     * @default "top"
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * The plain text content displayed inside the tooltip.
+     */
+    text: string;
+    /**
+     * Disables the tooltip from appearing on hover.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls the width of the tooltip.
+     *
+     * @default "auto"
+     */
+    width?: 'auto' | '240' | '360';
+}
+declare const TipIndicator: import("svelte").Component<Props, {}, "">;
+type TipIndicator = ReturnType<typeof TipIndicator>;
+export default TipIndicator;

package/dist/components/containers/Toaster.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import './toaster.css';
+	import type { Snippet } from 'svelte';
+
+	type ToastType = 'success' | 'error' | 'accent' | 'default';
+
+	interface Props {
+		type?: ToastType;
+		title?: string;
+		message?: string;
+		children?: Snippet;
+		icon?: Snippet;
+		iconText?: string;
+		closable?: boolean;
+		loading?: boolean;
+	}
+
+	let {
+		type = 'default',
+		title,
+		message,
+		children,
+		icon,
+		iconText,
+		closable,
+		loading
+	}: Props = $props();
+
+	let visible = $state(true);
+
+	const close = () => {
+		visible = false;
+	};
+</script>
+
+{#if visible}
+	<div
+		class="ibis-toaster"
+		role="status"
+		class:ibis-toaster--success={type === 'success'}
+		class:ibis-toaster--error={type === 'error'}
+		class:ibis-toaster--accent={type === 'accent'}
+		class:ibis-toaster--default={type === 'default'}
+	>
+		{#if loading || icon || iconText}
+			<div class="ibis-toaster__icon">
+				{#if loading}
+					<span class="ibis-toaster__loader" aria-hidden="true"></span>
+				{:else if icon}
+					{@render icon?.()}
+				{:else}
+					{iconText}
+				{/if}
+			</div>
+		{/if}
+
+		<div class="ibis-toaster__content">
+			{#if title}
+				<div class="ibis-toaster__title">{title}</div>
+			{/if}
+
+			<div class="ibis-toaster__message">
+				{#if children}
+					{@render children?.()}
+				{:else if message}
+					{message}
+				{/if}
+			</div>
+		</div>
+
+		{#if closable}
+			<button class="ibis-toaster__close" onclick={close} aria-label="Close"> x </button>
+		{/if}
+	</div>
+{/if}

package/dist/components/containers/Toaster.svelte.d.ts

@@ -0,0 +1,16 @@
+import './toaster.css';
+import type { Snippet } from 'svelte';
+type ToastType = 'success' | 'error' | 'accent' | 'default';
+interface Props {
+    type?: ToastType;
+    title?: string;
+    message?: string;
+    children?: Snippet;
+    icon?: Snippet;
+    iconText?: string;
+    closable?: boolean;
+    loading?: boolean;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/components/containers/Tooltip.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Tooltip;
+type Tooltip = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/containers/banner.css

@@ -0,0 +1,155 @@
+.ibis-banner {
+	font-family: var(--font-family-sans);
+	display: flex;
+	align-items: flex-start;
+	gap: 8px; /*hardcoded*/
+	padding: 8px 16px;
+	border-radius: 16px; /*hardcoded*/
+	border: var(--border-width-default) solid var(--color-neutral-200);
+	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /*hardcoded - tokenize later*/
+
+	max-width: 300px;
+	position: relative;
+	margin-bottom: 2px;
+}
+
+/* ICON */
+.ibis-banner__icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 20px;
+	height: 20px;
+	top: 2px;
+	left: 2px;
+
+	flex-shrink: 0;
+
+	margin-top: 2px;
+	color: var(--color-white);
+}
+
+.ibis-banner__icon :global(svg) {
+	width: 100%;
+	height: 100%;
+}
+
+.ibis-banner__content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+}
+
+.ibis-banner__title {
+	font-weight: var(--font-weight-medium);
+	font-size: var(--font-size-normal-text-sm);
+}
+
+.ibis-banner__message {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-white);
+}
+
+.ibis-banner--default .ibis-banner__message {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-primary-900);
+}
+
+.ibis-banner--success .ibis-banner__message {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-status-success);
+}
+
+.ibis-banner--error .ibis-banner__message {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-status-error);
+}
+
+.ibis-banner__close {
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: 18px; /*hardcoded*/
+	line-height: 1;
+	color: var(--color-white);
+	flex-shrink: 0;
+}
+
+/* SUCCESS */
+.ibis-banner--success {
+	border-color: rgba(0, 154, 8, 0.1);
+	background-color: rgba(0, 154, 8, 0.1);
+}
+
+.ibis-banner--success .ibis-banner__title {
+	color: var(--color-status-success);
+}
+
+.ibis-banner--success .ibis-banner__icon {
+	color: var(--color-status-success);
+}
+
+.ibis-banner--success .ibis-banner__close {
+	color: var(--color-status-success);
+	border-color: var(--color-status-success);
+}
+
+/* ERROR */
+.ibis-banner--error {
+	border-color: rgba(183, 12, 0, 0.1);
+	background-color: rgba(183, 12, 0, 0.1);
+}
+
+.ibis-banner--error .ibis-banner__title {
+	color: var(--color-status-error);
+}
+
+.ibis-banner--error .ibis-banner__icon {
+	color: var(--color-status-error);
+}
+
+.ibis-banner--error .ibis-banner__close {
+	color: var(--color-status-error);
+	border-color: var(--color-status-error);
+}
+
+/* DEFAULT */
+.ibis-banner--default {
+	border-color: rgba(113, 59, 193, 0.1);
+	background-color: rgba(113, 59, 193, 0.1);
+}
+
+.ibis-banner--default .ibis-banner__title {
+	color: var(--color-primary-900);
+}
+
+.ibis-banner--default .ibis-banner__icon {
+	color: var(--color-primary-900);
+}
+
+.ibis-banner--default .ibis-banner__close {
+	color: var(--color-primary-900);
+	border-color: var(--color-primary-900);
+}
+
+.ibis-banner__loader {
+	width: 1em;
+	height: 1em;
+
+	border: var(--border-width-default) solid var(--color-primary-300);
+	border-top-color: var(--color-primary-900);
+	border-radius: 50%;
+
+	animation: ibis-spin 0.8s linear infinite;
+}
+
+@keyframes ibis-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}