kb-ui-vue 0.2.0 → 0.4.0

package/dist/styles/Avatar.css

@@ -1,31 +1,31 @@
-.kb-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  overflow: hidden;
-  border-radius: var(--kb-radius-md);
-  background: var(--kb-color-bg-elevated);
-  color: var(--kb-color-text-2);
-  flex-shrink: 0;
-}
-
-.kb-avatar--round {
-  border-radius: var(--kb-radius-round);
-}
-
-.kb-avatar__img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.kb-avatar__fallback {
-  font-size: 0.5em;
-  line-height: 1;
-}
-
-.kb-avatar__icon {
-  width: 50%;
-  height: 50%;
-}
+.kb-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-text-2);
+  flex-shrink: 0;
+}
+
+.kb-avatar--round {
+  border-radius: var(--kb-radius-round);
+}
+
+.kb-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.kb-avatar__fallback {
+  font-size: 0.5em;
+  line-height: 1;
+}
+
+.kb-avatar__icon {
+  width: 50%;
+  height: 50%;
+}

package/dist/styles/BackTop.css

@@ -0,0 +1,39 @@
+.kb-backtop {
+  position: fixed;
+  z-index: var(--kb-z-index-backtop);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  color: var(--kb-color-text-2);
+  cursor: pointer;
+  background: var(--kb-color-bg);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  box-shadow: var(--kb-shadow-2);
+  transition:
+    color var(--kb-transition-duration) var(--kb-transition-timing),
+    border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-backtop:hover {
+  color: var(--kb-color-primary);
+  border-color: var(--kb-color-primary);
+}
+
+.kb-backtop:focus-visible {
+  outline: 2px solid var(--kb-color-primary);
+  outline-offset: 2px;
+}
+
+.kb-backtop-fade-enter-active,
+.kb-backtop-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.kb-backtop-fade-enter-from,
+.kb-backtop-fade-leave-to {
+  opacity: 0;
+}

package/dist/styles/Badge.css

@@ -1,49 +1,49 @@
-.kb-badge {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.kb-badge--independent {
-  display: inline-flex;
-}
-
-.kb-badge__content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 var(--kb-space-1);
-  border-radius: var(--kb-radius-round);
-  background: var(--kb-color-danger);
-  color: var(--kb-color-bg);
-  font-size: var(--kb-font-size-xs);
-  line-height: 1;
-}
-
-.kb-badge--independent .kb-badge__content {
-  position: static;
-}
-
-.kb-badge__content:not(.kb-badge--independent, .kb-badge__content--dot) {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-}
-
-.kb-badge__content--dot {
-  width: 8px;
-  height: 8px;
-  min-width: 8px;
-  padding: 0;
-}
-
-.kb-badge__content--dot:not(.kb-badge--independent) {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-}
+.kb-badge {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.kb-badge--independent {
+  display: inline-flex;
+}
+
+.kb-badge__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 var(--kb-space-1);
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-danger);
+  color: var(--kb-color-bg);
+  font-size: var(--kb-font-size-xs);
+  line-height: 1;
+}
+
+.kb-badge--independent .kb-badge__content {
+  position: static;
+}
+
+.kb-badge__content:not(.kb-badge--independent, .kb-badge__content--dot) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.kb-badge__content--dot {
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  padding: 0;
+}
+
+.kb-badge__content--dot:not(.kb-badge--independent) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}

package/dist/styles/Breadcrumb.css

@@ -1,28 +1,28 @@
-.kb-breadcrumb {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--kb-space-1);
-  font-size: var(--kb-font-size-md);
-  color: var(--kb-color-text-2);
-}
-
-.kb-breadcrumb__item a {
-  color: var(--kb-color-text-2);
-  text-decoration: none;
-  transition: color var(--kb-transition-duration) var(--kb-transition-timing);
-}
-
-.kb-breadcrumb__item a:hover {
-  color: var(--kb-color-primary);
-}
-
-.kb-breadcrumb__item--current {
-  color: var(--kb-color-text-1);
-  font-weight: 500;
-}
-
-.kb-breadcrumb__separator {
-  color: var(--kb-color-text-3);
-  margin: 0 var(--kb-space-1);
-}
+.kb-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--kb-space-1);
+  font-size: var(--kb-font-size-md);
+  color: var(--kb-color-text-2);
+}
+
+.kb-breadcrumb__item a {
+  color: var(--kb-color-text-2);
+  text-decoration: none;
+  transition: color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-breadcrumb__item a:hover {
+  color: var(--kb-color-primary);
+}
+
+.kb-breadcrumb__item--current {
+  color: var(--kb-color-text-1);
+  font-weight: 500;
+}
+
+.kb-breadcrumb__separator {
+  color: var(--kb-color-text-3);
+  margin: 0 var(--kb-space-1);
+}

package/dist/styles/Button.css

@@ -1,108 +1,108 @@
-.kb-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--kb-space-1);
-  box-sizing: border-box;
-  border: 1px solid var(--kb-color-border);
-  border-radius: var(--kb-radius-md);
-  background: var(--kb-color-bg);
-  color: var(--kb-color-text-1);
-  font-family: var(--kb-font-family);
-  font-size: var(--kb-font-size-md);
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    background var(--kb-transition-duration) var(--kb-transition-timing),
-    border-color var(--kb-transition-duration) var(--kb-transition-timing),
-    color var(--kb-transition-duration) var(--kb-transition-timing);
-}
-
-.kb-button:hover:not(.kb-button--disabled) {
-  border-color: var(--kb-color-primary);
-  color: var(--kb-color-primary);
-}
-
-.kb-button--disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.kb-button--round {
-  border-radius: var(--kb-radius-round);
-}
-
-.kb-button--small {
-  padding: var(--kb-space-1) var(--kb-space-2);
-  font-size: var(--kb-font-size-sm);
-}
-
-.kb-button--medium {
-  padding: var(--kb-space-2) var(--kb-space-4);
-}
-
-.kb-button--large {
-  padding: var(--kb-space-3) var(--kb-space-5);
-  font-size: var(--kb-font-size-lg);
-}
-
-.kb-button--primary {
-  border-color: var(--kb-color-primary);
-  background: var(--kb-color-primary-gradient);
-  color: var(--kb-color-bg);
-}
-
-.kb-button--primary:hover:not(.kb-button--disabled) {
-  border-color: var(--kb-color-primary);
-  color: var(--kb-color-bg);
-  filter: brightness(0.94);
-}
-
-.kb-button--success {
-  border-color: var(--kb-color-success);
-  background: var(--kb-color-success);
-  color: var(--kb-color-bg);
-}
-
-.kb-button--warning {
-  border-color: var(--kb-color-warning);
-  background: var(--kb-color-warning);
-  color: var(--kb-color-bg);
-}
-
-.kb-button--danger {
-  border-color: var(--kb-color-danger);
-  background: var(--kb-color-danger);
-  color: var(--kb-color-bg);
-}
-
-.kb-button--info {
-  border-color: var(--kb-color-info);
-  background: var(--kb-color-info);
-  color: var(--kb-color-bg);
-}
-
-.kb-button--plain.kb-button--primary {
-  background: var(--kb-color-bg);
-  color: var(--kb-color-primary);
-}
-
-.kb-button--plain.kb-button--success {
-  background: var(--kb-color-bg);
-  color: var(--kb-color-success);
-}
-
-.kb-button--plain.kb-button--warning {
-  background: var(--kb-color-bg);
-  color: var(--kb-color-warning);
-}
-
-.kb-button--plain.kb-button--danger {
-  background: var(--kb-color-bg);
-  color: var(--kb-color-danger);
-}
-
-.kb-button--plain.kb-button--info {
-  background: var(--kb-color-bg);
-  color: var(--kb-color-info);
-}
+.kb-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kb-space-1);
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-family: var(--kb-font-family);
+  font-size: var(--kb-font-size-md);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background var(--kb-transition-duration) var(--kb-transition-timing),
+    border-color var(--kb-transition-duration) var(--kb-transition-timing),
+    color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-button:hover:not(.kb-button--disabled) {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}
+
+.kb-button--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.kb-button--round {
+  border-radius: var(--kb-radius-round);
+}
+
+.kb-button--small {
+  padding: var(--kb-space-1) var(--kb-space-2);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-button--medium {
+  padding: var(--kb-space-2) var(--kb-space-4);
+}
+
+.kb-button--large {
+  padding: var(--kb-space-3) var(--kb-space-5);
+  font-size: var(--kb-font-size-lg);
+}
+
+.kb-button--primary {
+  border-color: var(--kb-color-primary);
+  background: var(--kb-color-primary-gradient);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--primary:hover:not(.kb-button--disabled) {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+  filter: brightness(0.94);
+}
+
+.kb-button--success {
+  border-color: var(--kb-color-success);
+  background: var(--kb-color-success);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--warning {
+  border-color: var(--kb-color-warning);
+  background: var(--kb-color-warning);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--danger {
+  border-color: var(--kb-color-danger);
+  background: var(--kb-color-danger);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--info {
+  border-color: var(--kb-color-info);
+  background: var(--kb-color-info);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--plain.kb-button--primary {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-primary);
+}
+
+.kb-button--plain.kb-button--success {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-success);
+}
+
+.kb-button--plain.kb-button--warning {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-warning);
+}
+
+.kb-button--plain.kb-button--danger {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-danger);
+}
+
+.kb-button--plain.kb-button--info {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-info);
+}

package/dist/styles/Calendar.css

@@ -1,79 +1,89 @@
-.kb-calendar {
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid var(--kb-color-border);
-  border-radius: var(--kb-radius-md);
-  padding: var(--kb-space-3);
-  background: var(--kb-color-bg);
-}
-
-.kb-calendar__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--kb-space-3);
-}
-
-.kb-calendar__title {
-  color: var(--kb-color-text-1);
-  font-size: var(--kb-font-size-lg);
-  font-weight: 600;
-}
-
-.kb-calendar__nav {
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: var(--kb-radius-sm);
-  background: transparent;
-  color: var(--kb-color-text-2);
-  font-size: 18px;
-  cursor: pointer;
-}
-
-.kb-calendar__nav:hover {
-  background: var(--kb-color-bg-elevated);
-  color: var(--kb-color-primary);
-}
-
-.kb-calendar__week {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  margin-bottom: var(--kb-space-1);
-}
-
-.kb-calendar__week-label {
-  text-align: center;
-  color: var(--kb-color-text-3);
-  font-size: var(--kb-font-size-sm);
-}
-
-.kb-calendar__grid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
-}
-
-.kb-calendar__day {
-  aspect-ratio: 1;
-  border: none;
-  border-radius: var(--kb-radius-sm);
-  background: transparent;
-  color: var(--kb-color-text-1);
-  font-size: var(--kb-font-size-sm);
-  cursor: pointer;
-}
-
-.kb-calendar__day:hover:not(.kb-calendar__day--active) {
-  background: var(--kb-color-bg-elevated);
-}
-
-.kb-calendar__day--outside {
-  color: var(--kb-color-text-3);
-  opacity: 0.5;
-}
-
-.kb-calendar__day--active {
-  background: var(--kb-color-primary);
-  color: var(--kb-color-bg);
-}
+.kb-calendar {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  padding: var(--kb-space-3);
+  background: var(--kb-color-bg);
+}
+
+.kb-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--kb-space-3);
+}
+
+.kb-calendar__title {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-lg);
+  font-weight: 600;
+}
+
+.kb-calendar__nav {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--kb-radius-sm);
+  background: transparent;
+  color: var(--kb-color-text-2);
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.kb-calendar__nav:hover {
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-primary);
+}
+
+.kb-calendar__week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: var(--kb-space-1);
+}
+
+.kb-calendar__week-label {
+  text-align: center;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.kb-calendar__day {
+  aspect-ratio: 1;
+  border: none;
+  border-radius: var(--kb-radius-sm);
+  background: transparent;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-sm);
+  cursor: pointer;
+}
+
+.kb-calendar__day--in-range {
+  border-radius: 0;
+  background: color-mix(in srgb, var(--kb-color-primary) 14%, transparent);
+}
+
+.kb-calendar__day--range-end {
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+}
+
+.kb-calendar__day:hover:not(.kb-calendar__day--active) {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-calendar__day--outside {
+  color: var(--kb-color-text-3);
+  opacity: 0.5;
+}
+
+.kb-calendar__day--active {
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+}