@ibis-design/svelte 0.6.0 → 0.7.0

package/dist/components/buttons/pillTab.css

@@ -1,59 +0,0 @@
-.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.css

@@ -1,155 +0,0 @@
-.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);
-	}
-}

package/dist/components/containers/tipIndicator.css

@@ -1,79 +0,0 @@
-.ibis-tip-indicator {
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	color: var(--color-neutral-400);
-	transition: color var(--transition-duration-fast) var(--transition-timing-default);
-	outline: none;
-}
-
-.ibis-tip-indicator:hover,
-.ibis-tip-indicator:focus-visible {
-	color: var(--color-primary-500);
-}
-
-.ibis-tip-indicator__icon {
-	width: 1em;
-	height: 1em;
-	display: block;
-}
-
-/* Tooltip box */
-.ibis-tip {
-	position: absolute;
-	z-index: 100;
-	background-color: var(--color-neutral-600);
-	color: var(--color-white);
-	font-size: var(--font-size-normal-text-sm);
-	font-family: var(--font-family-sans);
-	padding: var(--spacing-2) var(--spacing-4);
-	border-radius: var(--border-radius-full);
-	pointer-events: none;
-	white-space: nowrap;
-}
-
-/* Width variants */
-.ibis-tip--width-auto {
-	white-space: nowrap;
-	width: auto;
-}
-
-.ibis-tip--width-240 {
-	width: 240px;
-	white-space: normal;
-}
-
-.ibis-tip--width-360 {
-	width: 360px;
-	white-space: normal;
-}
-
-/* Top */
-.ibis-tip--top {
-	bottom: calc(100% + 8px);
-	left: 50%;
-	transform: translateX(-50%);
-}
-
-/* Bottom */
-.ibis-tip--bottom {
-	top: calc(100% + 8px);
-	left: 50%;
-	transform: translateX(-50%);
-}
-
-/* Left */
-.ibis-tip--left {
-	right: calc(100% + 8px);
-	top: 50%;
-	transform: translateY(-50%);
-}
-
-/* Right */
-.ibis-tip--right {
-	left: calc(100% + 8px);
-	top: 50%;
-	transform: translateY(-50%);
-}

package/dist/components/containers/toaster.css

@@ -1,137 +0,0 @@
-.ibis-toaster {
-	font-family: var(--font-family-sans);
-	display: flex;
-	align-items: center;
-	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);
-
-	max-width: 200px;
-	position: relative;
-	margin-bottom: 2px;
-}
-
-/* ICON */
-.ibis-toaster__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-toaster__icon :global(svg) {
-	width: 100%;
-	height: 100%;
-}
-
-.ibis-toaster__content {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.ibis-toaster__title {
-	font-weight: var(--font-weight-medium);
-	font-size: var(--font-size-normal-text-sm);
-}
-
-.ibis-toaster__message {
-	font-size: var(--font-size-normal-text-sm);
-	color: var(--color-white);
-}
-
-.ibis-toaster--default .ibis-toaster__message {
-	font-size: var(--font-size-normal-text-sm);
-	color: var(--color-black);
-}
-
-.ibis-toaster--default .ibis-toaster__icon {
-	color: var(--color-black);
-}
-
-.ibis-toaster__close {
-	background: transparent;
-	border: none;
-	cursor: pointer;
-	font-size: 18px; /*hardcoded*/
-	line-height: 1;
-	color: var(--color-white);
-	flex-shrink: 0;
-}
-
-.ibis-toaster--default .ibis-toaster__close {
-	color: var(--color-black);
-	border-color: var(--color-white);
-}
-
-/* SUCCESS */
-.ibis-toaster--success {
-	border-color: var(--color-status-success);
-	background-color: var(--color-status-success);
-}
-
-.ibis-toaster--success .ibis-toaster__title {
-	color: var(--color-white);
-}
-
-/* ERROR */
-.ibis-toaster--error {
-	border-color: var(--color-status-error);
-	background-color: var(--color-status-error);
-}
-
-.ibis-toaster--error .ibis-toaster__title {
-	color: var(--color-white);
-}
-
-/* ACCENT */
-.ibis-toaster--accent {
-	border-color: #920075; /*hardcoded*/
-	background-color: #920075; /*hardcoded*/
-}
-
-.ibis-toaster--accent .ibis-toaster__title {
-	color: var(--color-white);
-}
-
-/* DEFAULT */
-.ibis-toaster--default {
-	border-color: var(--color-neutral-100);
-	background-color: var(--color-neutral-100);
-}
-
-.ibis-toaster--default .ibis-toaster__title {
-	color: var(--color-black);
-}
-
-.ibis-toaster__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);
-	}
-}

package/dist/components/inputs/checkbox.css

@@ -1,103 +0,0 @@
-.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

@@ -1,76 +0,0 @@
-.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

@@ -1,106 +0,0 @@
-.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;
-}