@ibis-design/svelte 0.5.0 → 0.6.0

package/dist/components/inputs/TextLink.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import "./textlink.css";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+
+  interface Props extends HTMLAnchorAttributes {
+    href?: string;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    underline?: "always" | "hover" | "none";
+    linkSize?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    loading?: boolean;
+    skeleton?: boolean;
+    label?: string;
+    children?: Snippet;
+    iconPrefix?: Snippet;
+    iconSuffix?: Snippet;
+    iconPrefixText?: string;
+    iconSuffixText?: string;
+  }
+
+  let {
+    href,
+    target,
+    underline = "hover",
+    linkSize = "md",
+    disabled = false,
+    loading = false,
+    skeleton = false,
+    rel,
+    label,
+    children,
+    iconPrefix,
+    iconSuffix,
+    iconPrefixText,
+    iconSuffixText,
+    ...rest
+  }: Props = $props();
+
+  const computedRel = $derived(target === "_blank" ? (rel ?? "noopener noreferrer") : rel);
+
+  $effect(() => {
+    if (disabled && href) {
+      console.warn("Disabled links should not have an href");
+    }
+    if (iconPrefix && iconPrefixText) {
+      console.warn("iconPrefix snippet takes priority over iconPrefixText when both are provided.");
+    }
+    if (iconSuffix && iconSuffixText) {
+      console.warn("iconSuffix snippet takes priority over iconSuffixText when both are provided.");
+    }
+  });
+</script>
+
+<a
+  {...rest}
+  // href={disabled || skeleton ? undefined : href}
+  {target}
+  rel={computedRel}
+  aria-disabled={disabled || skeleton}
+  aria-busy={loading}
+  class=" ibis-link
+ibis-link--{linkSize}
+ibis-link--underline-{underline}
+{disabled ? 'ibis-link--disabled' : ''}
+{loading ? 'ibis-link--loading' : ''}
+{skeleton ? 'ibis-link--skeleton' : ''}">
+  {#if iconPrefix || iconPrefixText}
+    <span class="ibis-link__icon ibis-link--prefix">
+      {#if iconPrefix}
+        {@render iconPrefix()}
+      {:else}
+        {iconPrefixText}
+      {/if}
+    </span>
+  {/if}
+
+  <span
+    class="ibis-link__content
+    {loading ? 'ibis-link__content--hidden' : ''} 
+    {skeleton ? 'ibis-link__content--skeleton' : ''}">
+    {#if children}
+      {@render children?.()}
+    {:else if label}
+      {label}
+    {/if}
+  </span>
+
+  {#if iconSuffix || iconSuffixText}
+    <span class="ibis-link__icon ibis-link--suffix">
+      {#if iconSuffix}
+        {@render iconSuffix()}
+      {:else}
+        {iconSuffixText}
+      {/if}
+    </span>
+  {/if}
+
+  {#if loading}
+    <span class="ibis-link__loader" aria-hidden="true"></span>
+  {/if}
+</a>

package/dist/components/inputs/TextLink.svelte.d.ts

@@ -0,0 +1,21 @@
+import "./textlink.css";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+interface Props extends HTMLAnchorAttributes {
+    href?: string;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    underline?: "always" | "hover" | "none";
+    linkSize?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    loading?: boolean;
+    skeleton?: boolean;
+    label?: string;
+    children?: Snippet;
+    iconPrefix?: Snippet;
+    iconSuffix?: Snippet;
+    iconPrefixText?: string;
+    iconSuffixText?: string;
+}
+declare const TextLink: import("svelte").Component<Props, {}, "">;
+type TextLink = ReturnType<typeof TextLink>;
+export default TextLink;

package/dist/components/inputs/checkbox.css

@@ -0,0 +1,103 @@
+.ibis-checkbox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.ibis-checkbox__label-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ibis-checkbox__label {
+  font-size: var(--font-size-normal-text-default);
+  color: var(--color-neutral-700);
+}
+
+.ibis-checkbox__description {
+  font-size: var(--font-size-normal-text-sm);
+  color: var(--color-neutral-500);
+}
+
+.ibis-checkbox__wrapper {
+  display: flex;
+}
+
+.ibis-checkbox__control {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.ibis-checkbox__input {
+  display: none;
+}
+
+.ibis-checkbox__box {
+  width: 18px;
+  height: 18px;
+  border: var(--border-width-default) solid var(--color-neutral-300);
+  border-radius: var(--border-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-neutral-100);
+  transition:
+    box-shadow var(--transition-duration-normal) var(--transition-timing-default),
+    border-color var(--transition-duration-normal) var(--transition-timing-default),
+    background var(--transition-duration-normal) var(--transition-timing-default);
+}
+
+.ibis-checkbox__control:hover .ibis-checkbox__input:not(:checked) + .ibis-checkbox__box {
+  border-color: var(--color-neutral-700);
+  box-shadow: 0 0 0 4px var(--color-neutral-200);
+}
+
+.ibis-checkbox__input:checked + .ibis-checkbox__box {
+  background: var(--color-primary-200);
+  border-color: var(--color-primary-800);
+}
+
+.ibis-checkbox__control:hover .ibis-checkbox__input:checked + .ibis-checkbox__box {
+  box-shadow: 0 0 0 4px var(--color-primary-200);
+}
+
+.ibis-checkbox__text {
+  font-size: var(--font-size-normal-text-default);
+  color: var(--color-text-default);
+}
+
+.ibis-checkbox__help {
+  font-size: var(--font-size-normal-text-sm);
+  color: var(--color-neutral-500);
+}
+
+.ibis-checkbox__error {
+  font-size: var(--font-size-normal-text-sm);
+  color: var(--color-status-error);
+}
+
+.ibis-checkbox--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ibis-checkbox--invalid .ibis-checkbox__box {
+  border-color: var(--color-status-error);
+}
+
+.ibis-checkbox--invalid .ibis-checkbox__text {
+  font-size: var(--font-size-normal-text-default);
+  color: var(--color-status-error);
+}
+
+.ibis-checkbox--invalid
+  .ibis-checkbox__control:hover
+  .ibis-checkbox__input:not(:checked)
+  + .ibis-checkbox__box {
+  box-shadow: 0 0 0 4px #ffb3ad;
+  border-color: var(--color-status-error);
+}

package/dist/components/inputs/chips.css

@@ -0,0 +1,76 @@
+.ibis-chips {
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	border-radius: var(--component-button-size-sm-border-radius);
+	padding: var(--spacing-1) var(--spacing-3);
+	background-color: var(--color-white);
+	color: var(--color-text-primary);
+	border: var(--border-width-thin) solid var(--color-neutral-200);
+	cursor: pointer;
+}
+
+.ibis-chips__content {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-2);
+}
+
+.ibis-chips__icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.ibis-chips__label {
+	display: inline-flex;
+}
+
+.ibis-chips :global(svg) {
+	width: 1rem;
+	height: 1rem;
+	display: inline-block;
+	vertical-align: middle;
+	gap: var(--spacing-2);
+}
+
+.ibis-chips--sm {
+	font-size: var(--font-size-body-sm);
+}
+
+.ibis-chips--md {
+	font-size: var(--font-size-body-md);
+}
+
+.ibis-chips--lg {
+	font-size: var(--font-size-body-lg);
+}
+
+.ibis-chips--skeleton {
+	background-color: var(--color-neutral-200);
+	color: transparent;
+	pointer-events: none;
+}
+
+.ibis-chips__content--hidden {
+	visibility: hidden;
+}
+
+.ibis-chips:disabled {
+	opacity: var(--opacity-disabled);
+	cursor: not-allowed;
+}
+
+.ibis-chips:not(:disabled):hover {
+	background-color: var(--color-neutral-200);
+}
+
+.ibis-chips--selected {
+	background-color: var(--color-primary-100);
+	color: var(--color-primary-800);
+	border-color: var(--color-primary-800);
+}
+
+.ibis-chips--selected:not(:disabled):hover {
+	background-color: var(--color-primary-200);
+}

package/dist/components/inputs/dropdown.css

@@ -0,0 +1,106 @@
+.ibis-dropdown {
+	position: relative;
+	display: inline-block;
+	width: fit-content;
+}
+
+.ibis-dropdown__trigger {
+	all: unset;
+	display: block;
+	width: 100%;
+	cursor: pointer;
+}
+
+/* Override TextInput styles inside trigger */
+.ibis-dropdown__trigger .ibis-input {
+	gap: 0;
+}
+
+.ibis-dropdown__trigger .ibis-input__label-wrapper {
+	display: none;
+}
+
+.ibis-dropdown__trigger .ibis-input__help,
+.ibis-dropdown__trigger .ibis-input__error {
+	display: none;
+}
+
+/* Default field wrapper radius */
+.ibis-dropdown__trigger .ibis-input__field-wrapper {
+	border-radius: var(--border-radius-lg);
+	transition: border-radius var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+/* ↓ ADDED — remove bottom radius on input when open so it connects to menu */
+.ibis-dropdown--open .ibis-dropdown__trigger .ibis-input__field-wrapper {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	border-bottom-color: transparent;
+}
+
+/* Menu */
+.ibis-dropdown__menu {
+	position: absolute;
+	width: 100%;
+	background-color: var(--color-white);
+	border: 2px solid var(--color-primary-950);
+	/* ↓ CHANGED — removed top-left and top-right radius to connect with input */
+	border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
+	border-top: none; /* ↓ ADDED — removes double border between input and menu */
+	margin-top: 0; /* ↓ CHANGED — removed gap so menu connects to input */
+	z-index: 10;
+	list-style: none;
+	padding: 0;
+	overflow: hidden;
+}
+
+/* Dividers between items */
+.ibis-dropdown__menu li + li {
+	border-top: 1px solid var(--color-neutral-200);
+}
+
+/* Menu items */
+.ibis-dropdown__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);
+}
+
+.ibis-dropdown__item:hover {
+	background-color: var(--color-primary-400);
+	color: var(--color-white);
+}
+
+/* ↓ CHANGED — scoped to li aria-selected for correct specificity */
+li[aria-selected='true'] .ibis-dropdown__item {
+	background-color: var(--color-primary-500);
+	color: var(--color-white);
+	font-weight: var(--font-weight-bold);
+}
+
+li[aria-selected='true'] .ibis-dropdown__item:hover {
+	background-color: var(--color-primary-700);
+	color: var(--color-white);
+}
+
+.ibis-dropdown__item:focus {
+	outline: none;
+	background-color: var(--color-neutral-200);
+}
+
+/* Disabled */
+.ibis-dropdown__trigger:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}

package/dist/components/inputs/radio.css

@@ -0,0 +1,108 @@
+.ibis-radio {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+}
+
+.ibis-radio__label-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.ibis-radio__label {
+	font-size: var(--font-size-normal-text-default);
+	color: var(--color-neutral-700);
+}
+
+.ibis-radio__description {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-neutral-500);
+}
+
+.ibis-radio__control {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	cursor: pointer;
+}
+
+.ibis-radio__input {
+	display: none;
+}
+
+.ibis-radio__circle {
+	width: 20px;
+	height: 20px;
+	border-radius: 999px;
+	border: var(--border-width-default) solid var(--color-neutral-300);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition:
+		box-shadow var(--transition-duration-normal) var(--transition-timing-default),
+		border-color var(--transition-duration-normal) var(--transition-timing-default),
+		background var(--transition-duration-normal) var(--transition-timing-default);
+}
+
+.ibis-radio__dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 999px;
+	background: transparent;
+}
+
+.ibis-radio__dot--active {
+	background: var(--color-primary-900);
+}
+
+.ibis-radio__text {
+	font-size: var(--font-size-normal-text-default);
+	color: var(--color-text-default);
+}
+
+.ibis-radio__help {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-neutral-500);
+}
+
+.ibis-radio__error {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-status-error);
+}
+
+.ibis-radio--disabled {
+	opacity: var(--opacity-9);
+	cursor: not-allowed;
+}
+.ibis-radio--disabled .ibis-radio__circle {
+	border-color: var(--color-neutral-200);
+	background-color: var(--color-neutral-160);
+}
+
+.ibis-radio__input:checked + .ibis-radio__circle {
+	border-color: var(--color-primary-900);
+}
+
+.ibis-radio:not(.ibis-radio--disabled) .ibis-radio__control:hover .ibis-radio__circle {
+	box-shadow: 0 0 0 4px var(--color-neutral-200);
+	border-color: var(--color-neutral-700);
+	transform: scale(1.05);
+}
+
+.ibis-radio:not(.ibis-radio--disabled)
+	.ibis-radio__control:hover
+	.ibis-radio__input:checked
+	+ .ibis-radio__circle {
+	box-shadow: 0 0 0 4px var(--color-primary-200);
+	border-color: var(--color-primary-900);
+}
+
+.ibis-radio--invalid .ibis-radio__circle {
+	border-color: var(--color-status-error);
+}
+
+.ibis-radio--invalid .ibis-radio__control:hover .ibis-radio__circle {
+	box-shadow: 0 0 0 4px #ffb3ad;
+	border-color: var(--color-status-error);
+}

package/dist/components/inputs/switch.css

@@ -0,0 +1,68 @@
+.ibis-switch {
+	display: inline-flex;
+	align-items: center;
+}
+
+.ibis-switch__control {
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+	gap: var(--spacing-1);
+	user-select: none;
+}
+
+.ibis-switch__input {
+	display: none;
+}
+
+/* Track */
+.ibis-switch__track {
+	width: 32px;
+	height: 20px;
+	background: var(--color-neutral-200);
+	border-radius: 999px;
+	position: relative;
+	transition:
+		background var(--transition-duration-normal) var(--transition-timing-default),
+		box-shadow var(--transition-duration-normal) var(--transition-timing-default);
+}
+
+/* Thumb */
+.ibis-switch__thumb {
+	width: 16px;
+	height: 16px;
+	background: var(--color-white);
+	border-radius: 999px;
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	transition:
+		transform var(--transition-duration-normal) var(--transition-timing-default),
+		background var(--transition-duration-normal) var(--transition-timing-default);
+}
+
+.ibis-switch__input:checked + .ibis-switch__track {
+	background: var(--color-primary-700);
+}
+
+.ibis-switch__input:checked + .ibis-switch__track .ibis-switch__thumb {
+	transform: translateX(12px);
+}
+
+/* Disabled state */
+.ibis-switch--disabled {
+	opacity: var(--opacity-7);
+	cursor: not-allowed;
+}
+
+.ibis-switch--disabled .ibis-switch__track {
+	background: var(--color-neutral-200);
+}
+
+.ibis-switch--disabled .ibis-switch__thumb {
+	background: var(--color-neutral-100);
+}
+
+.ibis-switch--disabled .ibis-switch__control {
+	cursor: not-allowed;
+}