le-kit 0.5.2 → 0.5.4

package/dist/collection/components/le-slot/le-slot.default.css

@@ -1,222 +0,0 @@
-/**
- * Styles for le-slot component
- * Uses :host(.admin-mode) to toggle between default and admin styles
- */
-
-/* ============================================
-   DEFAULT MODE - Invisible passthrough
-   ============================================ */
-:host {
-  display: contents;
-  --le-slot-border-color: #0088ff;
-  --le-slot-bg-color: rgba(0, 136, 255, 0.05);
-  --le-slot-header-bg: rgb(218, 238, 255);
-  --le-slot-label-color: #0066cc;
-  --le-slot-description-color: #666;
-  --le-slot-required-color: #e53935;
-  --le-slot-dropzone-min-height: 20px;
-  --le-slot-dropzone-border-color: #ccc;
-}
-
-.le-slot-container,
-.le-slot-header,
-.le-slot-description,
-.le-slot-dropzone,
-.le-slot-input {
-  display: none;
-}
-
-/* Hidden slot wrapper - keeps slot in DOM but invisible */
-.hidden-slot {
-  display: none;
-}
-
-/* ============================================
-   ADMIN MODE - Visible placeholder UI
-   ============================================ */
-:host(.admin-mode) {
-  display: block;
-  flex: 1;
-}
-
-:host(.admin-mode) .le-slot-container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  border: 2px dashed var(--le-slot-border-color);
-  border-radius: 4px;
-  background: var(--le-slot-bg-color);
-  margin: 4px 0;
-}
-
-:host(.admin-mode) .le-slot-header {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 0 0 var(--le-spacing-1, 4px);
-  background: var(--le-slot-header-bg);
-  border-bottom: 1px solid var(--le-slot-border-color);
-  font-size: var(--le-font-size-xs, 11px);
-  font-weight: 400;
-  text-transform: capitalize;
-}
-:host(.admin-mode) .le-slot-header-no-label {
-  justify-content: flex-end;
-  height: 16px;
-  border: none;
-  background-color: transparent;
-}
-
-.le-slot-label {
-  color: var(--le-slot-label-color);
-  text-align: start;
-  overflow: hidden;
-  width: 0;
-  flex: 1 1 0%;
-}
-
-.le-slot-required {
-  color: var(--le-slot-required-color);
-  font-weight: bold;
-}
-
-:host(.admin-mode) .le-slot-description {
-  display: block;
-  padding: 4px 8px;
-  font-size: 12px;
-  color: var(--le-slot-description-color);
-  font-style: italic;
-}
-:host(.admin-mode) .le-slot-description-icon {
-  display: inline-block;
-  font-size: 9px;
-  line-height: 1;
-  cursor: pointer;
-  color: var(--le-slot-description-color);
-}
-
-:host(.admin-mode) .le-slot-dropzone {
-  display: block;
-  min-height: var(--le-slot-dropzone-min-height);
-  padding: var(--le-spacing-1, 4px);
-  position: relative;
-}
-
-:host(.admin-mode) .le-slot-dropzone:empty::before {
-  content: 'Drop content here';
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  inset: 8px;
-  border: 2px dashed var(--le-slot-dropzone-border-color);
-  border-radius: 4px;
-  color: #999;
-  font-size: 12px;
-  pointer-events: none;
-}
-
-/* Highlight when dragging over */
-:host(.admin-mode.drag-over) .le-slot-container {
-  border-color: #00cc66;
-  background: rgba(0, 204, 102, 0.1);
-}
-
-:host(.admin-mode.drag-over) .le-slot-dropzone:empty::before {
-  border-color: #00cc66;
-  color: #00cc66;
-  content: 'Release to drop';
-}
-
-/* ============================================
-   TEXT INPUT STYLES (Admin mode)
-   ============================================ */
-:host(.admin-mode) .le-slot-input {
-  display: block;
-  padding: var(--le-spacing-1, 4px);
-}
-
-:host(.admin-mode) .le-slot-input input,
-:host(.admin-mode) .le-slot-input textarea {
-  display: block;
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--le-slot-dropzone-border-color);
-  border-radius: 4px;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1.4;
-  background: #fff;
-  color: #333;
-  box-sizing: border-box;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-:host(.admin-mode) .le-slot-input input:focus,
-:host(.admin-mode) .le-slot-input textarea:focus {
-  outline: none;
-  border-color: var(--le-slot-border-color);
-  box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.15);
-}
-
-:host(.admin-mode) .le-slot-input input::placeholder,
-:host(.admin-mode) .le-slot-input textarea::placeholder {
-  color: #999;
-}
-
-:host(.admin-mode) .le-slot-input textarea {
-  resize: vertical;
-  min-height: 60px;
-}
-
-/* Hide the slot content in text/textarea mode - it's just for default value */
-:host(.admin-mode) .le-slot-input slot {
-  display: none;
-}
-
-/* ============================================
-   INVALID HTML STATE
-   ============================================ */
-.le-slot-invalid {
-  color: var(--le-slot-required-color);
-  font-size: 10px;
-  margin-left: auto;
-  font-weight: normal;
-  text-transform: none;
-}
-
-:host(.admin-mode) .le-slot-input.has-error input,
-:host(.admin-mode) .le-slot-input.has-error textarea {
-  border-color: var(--le-slot-required-color);
-  background: rgba(229, 57, 53, 0.05);
-}
-
-:host(.admin-mode) .le-slot-input.has-error input:focus,
-:host(.admin-mode) .le-slot-input.has-error textarea:focus {
-  border-color: var(--le-slot-required-color);
-  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
-}
-
-
-/* ========================================
-   Component Picker (Add Button & Popover)
-   ======================================== */
-.le-slot-add-btn {
-  font-size: 24px;
-  line-height: 0px;
-  width: 12px;
-  height: 12px;
-}
-
-.le-slot-header-no-label .le-slot-add-btn {
-  font-size: 16px;
-}
-
-.le-slot-button {
-  width: 20px;
-  height: 20px;
-}
-
-:host(.admin-mode) .le-slot-header-no-label.le-slot-header-text {
-  height: 0;
-}